📱 创建第一个Flutter应用
创建新项目
# 创建新项目
flutter create my_first_app
# 进入项目目录
cd my_first_app
# 运行应用
flutter run
项目结构解析
创建的项目包含以下重要文件和目录：
my_first_app/
├── lib/
│ └── main.dart # 应用入口文件
├── android/ # Android平台相关代码
├── ios/ # iOS平台相关代码
├── test/ # 测试文件
├── pubspec.yaml # 项目配置文件
└── README.md # 项目说明
理解main.dart文件
打开lib/main.dart文件，这是Flutter应用的入口：
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: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
💡 核心概念解析
- main()函数：Dart程序的入口点
- runApp()：启动Flutter应用，传入根Widget
- StatelessWidget：无状态组件，UI不会改变
- StatefulWidget：有状态组件，UI可以动态变化
- setState()：通知Flutter框架重新构建UI
🔍 常见问题解答
Q: Flutter doctor显示错误怎么办？
A: 根据错误信息逐一解决，常见问题包括：Android SDK未安装、许可证未接受、模拟器未配置等。
Q: 应用无法在模拟器上运行？
A: 确保模拟器已启动，或使用flutter devices命令查看可用设备。
Q: 热重载不工作？
A: 检查是否在调试模式下运行，某些修改需要热重启才能生效。