YouTipFlutter Create App
This section will introduce how to use the Flutter CLI to create a new Flutter project, run the application, and understand the most basic code structure.
* * *
## Create a Project Using Flutter CLI
Flutter CLI is Flutter's command-line tool used to create, manage, and build Flutter projects.
### Create a New Project
Run the following command in the terminal to create a new Flutter project:
$ flutter create my_first_app
Where `my_first_app` is your project name. Flutter will create the corresponding folders and files based on this name.
> The project name must use lowercase letters and underscores, and cannot contain spaces or special characters.
### Command Parameters
The `flutter create` command supports multiple parameters:
| Parameter | Description | Example |
| --- | --- | --- |
| --org | Specify the organization identifier (reverse domain name format) | --org com.example |
| --platforms | Specify the supported platforms | --platforms ios,android |
| --empty | Create a project using the minimal template | --empty |
$ flutter create hello_world Creating project "hello_world"... .gitignore 2026-04-01 10:30:22 .metadata 2026-04-01 10:30:22 analysis_options.yaml 2026-04-01 10:01:15 pubspec.yaml 2026-04-01 10:30:22 README.md 2026-04-01 10:30:22 lib/ main.dart 2026-04-01 10:30:22 test/ widget_test.dart 2026-04-01 10:22:34 android/ ios/ web/ ...Running "flutter pub get"... 13.2sRunning "flutter analyze"... 3.2s
* * *
## Run the Flutter Application
### Start the Development Server
Once the project is created, enter the project directory and run the application:
$ cd hello_world $ flutter run
The first run may take some time because Flutter needs to compile the Dart code and start the application.
### Specify the Run Device
If your computer is connected to multiple devices (or emulators), you can use the `-d` parameter to specify the run device:
| Device | Command |
| --- | --- |
| Android Emulator | flutter run -d android |
| iOS Simulator | flutter run -d iphone |
| Chrome Browser | flutter run -d chrome |
| Windows Desktop | flutter run -d windows |
### View Available Devices
Run the following command to view all available run devices:
$ flutter devices
Output example:
2 connected devices:Chrome (web) • chrome • web-javascript • Chrome • web Windows (windows) • windows • windows • x64 • Windows 10.0.0
* * *
## Hot Reload Feature
One of Flutter's most powerful features is Hot Reload. When your application is running:
1. Modify the code and save
2. Press the `r` key in the terminal
3. The application will reload, and you can see the latest changes
Hot reload is very fast, usually taking only a second or two. This greatly improves development efficiency, allowing you to preview interface effects in real time.
> Hot reload does not lose the application state, which means you can quickly iterate on UI design without restarting the application.
* * *
## main.dart File Analysis
Every Flutter project has an entry file `lib/main.dart`. Let's look at the default generated content:
## Example: main.dart Code
// lib/main.dart
// Entry file for the Flutter application
// Import the Material Design component library
import'package:flutter/material.dart';
// Application entry function
void main(){
// runApp is Flutter's startup function
// It takes a Widget as the root widget
runApp(const MyApp());
}
// Root Widget (Stateless widget)
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context){
// MaterialApp is the root component of Material Design style
return MaterialApp(
// Set application title
title:'Flutter Demo',
// Set theme color
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
// Use Material 3
useMaterial3:true,
),
// Main page of the application
home:const MyHomePage(title:'Flutter Home Page'),
);
}
}
// Stateful widget (can have internal state)
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// Page title (immutable)
final String title;
@override
State createState()=> _MyHomePageState();
}
class _MyHomePageState extends State{
// Counter state
int _counter =0;
// Method to increment the counter
void _incrementCounter(){
// setState notifies Flutter that the state has changed and the UI needs to be rebuilt
setState((){
_counter++;
});
}
@override
Widget build(BuildContext context){
// Scaffold is the page scaffold for Material Design
return Scaffold(
// AppBar is the top app bar
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
// Display page title
title: Text(widget.title),
),
// Main body content of the page
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:[
const Text('You have pushed the button this many times:'),
// Display counter value
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
// Floating button
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip:'Increment',
child:const Icon(Icons.add),
),
);
}
}
### Code Structure Explanation
| Part | Description |
| --- | --- |
| import statement | Import required packages; here, the Material Design component library is imported |
| main function | The entry point of the Dart program, calls runApp to start the application |
| runApp function | Flutter's startup function, takes the root Widget as a parameter |
| StatelessWidget | Stateless widget, UI does not change over time |
| StatefulWidget | Stateful widget, UI can respond to data changes |
| build method | A method that every Widget must implement, used to build the UI |