Creazione della prima app Flutter
Segua passo dopo passo la creazione di una semplice applicazione Flutter "Hello World", comprendendo la struttura del progetto e la funzionalità di hot reload.
Creazione della prima app Flutter è una lezione Flutter Mobile Development gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Flutter Mobile Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Flutter Mobile Development include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Your First Flutter App!
Time to build your first Flutter app — a simple Hello World to learn the workflow. You’re about to see why Flutter feels so fast.
Create a New Project
Run flutter create to scaffold a new project, then cd into the folder. One command and you’re ready to code.
flutter create my_first_app
cd my_first_appUnderstand Project Structure
Flutter scaffolds several folders. The ones that matter: lib/main.dart (your code), pubspec.yaml (dependencies), and the android/ — ios/ platform dirs.
The App Entry Point: main.dart
Every app starts at main(). Inside it, runApp() takes your root widget and attaches it to the screen.
import 'package:flutter/material.dart';
void main() {
runApp(
const Center(
child: Text(
'Launching App...', // Text displayed directly
textDirection: TextDirection.ltr, // Required for root Text widget
style: TextStyle(color: Colors.blue, fontSize: 20),
),
),
);
}Building Your MyApp Widget
Wrap your app in a root widget, often MyApp. For UI that doesn’t change, use a StatelessWidget — it just needs a build method describing the UI.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// This widget will define the app's look and feel
return const Placeholder(); // A temporary visual marker
}
}MaterialApp & Scaffold Basics
MaterialApp adds Material Design; inside it Scaffold gives you the basic layout — an AppBar on top and a body for content.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter App',
theme: ThemeData(primarySwatch: Colors.blue), // Sets primary color
home: Scaffold(
appBar: AppBar(
title: const Text('My First App'), // Text in the app bar
),
body: const Center(
child: Text(
'Hello, CoddyKit!', // Our main content text
style: TextStyle(fontSize: 24),
),
),
),
);
}
}Running Your New App
App ready? Run it. Start an emulator, simulator, or plug in a device, then run flutter run from the project root.
flutter runMeet Hot Reload!
Hot Reload injects code changes into a running app almost instantly — no full restart, no lost state. Just save your .dart file to trigger it.
Hot Reload in Action
Try it yourself: tweak the AppBar text, the body, or the theme color below, then save and watch Hot Reload update the running app live.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter App',
theme: ThemeData(primarySwatch: Colors.green), // Changed color!
home: Scaffold(
appBar: AppBar(
title: const Text('My Updated App'), // Changed text!
),
body: const Center(
child: Text(
'Hot Reloaded!', // Changed text and size!
style: TextStyle(fontSize: 28, color: Colors.red),
),
),
),
);
}
}Hot Reload vs. Hot Restart
Hot Reload injects code and keeps your app’s state — great for UI tweaks. Hot Restart rebuilds from scratch and wipes state, for bigger changes.
Quick Check: Hot Reload
You've seen Flutter's hot reload in action. Let's test your understanding!
Recap: First Flutter App
Congrats! You built and ran your first Flutter app — flutter create, the main.dart structure, MaterialApp + Scaffold, and the power of Hot Reload.
Impara Dart con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 88
Domande Frequenti
La lezione «Creazione della prima app Flutter» è gratuita?
Sì — il testo completo di «Creazione della prima app Flutter» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Flutter Mobile Development, passa a CoddyKit PRO. Il corso Flutter Mobile Development include 4 lezioni in totale.
Cosa imparerò in «Creazione della prima app Flutter»?
Segua passo dopo passo la creazione di una semplice applicazione Flutter "Hello World", comprendendo la struttura del progetto e la funzionalità di hot reload. Eserciti Flutter Mobile Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Flutter Mobile Development?
Non è richiesta alcuna esperienza precedente. Flutter Mobile Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Creazione della prima app Flutter»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Flutter Mobile Development?
Sì. Ogni lezione Flutter Mobile Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Ecosistema e configurazione di Flutter
- Fondamenti di Dart per Flutter
- Creazione della prima app Flutter
- Programmazione asincrona con Futures e async/await