可以用前端项目的思路理解 Flutter，但也要转换一下概念：
> **Flutter 里的页面、按钮、布局、样式，全都是 Widget。**
> Widget 大概可以理解成前端里的组件 Component。
下面我用"前端转 Flutter"的方式，通俗讲一下：
-
Flutter 项目怎么初始化
-
项目目录分别是什么
-
项目结构该怎么组织
-
推荐一个适合初学者的结构
-
如何新增页面、组件、功能模块
一、先理解：Flutter 项目和前端项目的对应关系
如果你之前写过 React / Vue，可以这样类比：
| 前端 | Flutter |
|---|---|
| `package.json` | `pubspec.yaml` |
| `npm install` | `flutter pub get` / `flutter pub add` |
| `src/` | `lib/` |
| `main.tsx` / `main.js` | `lib/main.dart` |
| 组件 Component | Widget |
| `render()` | `build()` |
| 函数组件 | `StatelessWidget` |
| 有状态组件 | `StatefulWidget` |
| `setState` | `setState()` |
| React Router / Vue Router | Navigator / GoRouter |
| CSS / Tailwind | Flutter Widget 属性 |
| `div` | `Container` |
| `flex` | `Row` / `Column` / `Flex` |
| 图片资源 `assets` | Flutter `assets` |
| 全局状态管理 | Provider / Riverpod / Bloc |
二、Flutter 项目初始化
1. 安装 Flutter
如果你还没安装，需要先安装 Flutter SDK。
检查环境：
```bash
flutter doctor
```
正常会看到类似：
```text
✓ Flutter
✓ Android toolchain
✓ Chrome
✓ Connected device
```
如果是初学者，可以先用：
-
Android 模拟器
-
iOS 模拟器
-
Chrome 浏览器 Web 调试
2. 创建项目
进入你要放项目的目录：
```bash
cd ~/projects
```
创建 Flutter 项目：
```bash
flutter create my_app
```
进入项目：
```bash
cd my_app
```
运行项目：
```bash
flutter run
```
如果想指定 Chrome：
```bash
flutter run -d chrome
```
如果设备列表不确定，可以先看设备：
```bash
flutter devices
```
3. 初始化后的项目长这样
刚创建出来的项目大概是：
```text
my_app/
├── android/
├── ios/
├── web/
├── linux/
├── macos/
├── windows/
├── lib/
│ └── main.dart
├── test/
│ └── widget_test.dart
├── analysis_options.yaml
└── pubspec.yaml
```
作为前端，你可以这样理解：
```text
android/ Android 原生工程
ios/ iOS 原生工程
web/ Web 相关配置
lib/ 你的主要代码，相当于前端的 src/
test/ 测试目录
pubspec.yaml 相当于 package.json
```
你平时 90% 时间都在改：
```text
lib/
pubspec.yaml
```
三、`pubspec.yaml` 是什么？
`pubspec.yaml` 类似前端的 `package.json`。
例如：
```yaml
name: my_app
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: '>=3.0.0 <4.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.6
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
```
其中：
```yaml
dependencies:
```
相当于：
```json
"dependencies": {}
```
安装第三方包：
```bash
flutter pub add go_router
```
相当于前端的：
```bash
npm install react-router
```
安装依赖：
```bash
flutter pub get
```
相当于：
```bash
npm install
```
四、Flutter 项目最重要的是 `lib/`
Flutter 的业务代码基本都放在：
```text
lib/
```
默认只有一个：
```text
lib/main.dart
```
但是真实项目不要把所有东西都塞进 `main.dart`。
你可以把 `lib/` 理解成前端项目的 `src/`。
前端项目你可能这样组织：
```text
src/
├── main.tsx
├── App.tsx
├── routes/
├── pages/
├── components/
├── hooks/
├── services/
├── utils/
└── styles/
```
Flutter 也可以类似地组织：
```text
lib/
├── main.dart
├── app.dart
├── routes/
├── pages/
├── widgets/
├── services/
├── utils/
├── constants/
└── theme/
```
但更推荐按"功能模块"组织。
五、初学者推荐的项目结构
一开始不要太复杂。
不要一上来就搞：
```text
data/
domain/
usecases/
entities/
repositories/
```
初学者容易被架构劝退。
推荐你先按这个结构来：
```text
lib/
├── main.dart
├── app.dart
│
├── core/
│ ├── constants/
│ ├── theme/
│ ├── utils/
│ └── widgets/
│
├── features/
│ ├── home/
│ │ ├── home_page.dart
│ │ └── widgets/
│ │
│ ├── counter/
│ │ ├── counter_page.dart
│ │ └── widgets/
│ │
│ └── auth/
│ ├── login_page.dart
│ └── widgets/
│
├── routes/
│ └── app_routes.dart
│
└── services/
└── api_service.dart
```
六、这个结构怎么理解？
1. `main.dart`
程序入口，相当于前端的：
```ts
main.tsx
```
或者：
```ts
index.tsx
```
它只做启动应用的事情。
2. `app.dart`
根组件，相当于前端里的：
```jsx
<App />
```
一般放：
```dart
MaterialApp
```
或者：
```dart
MaterialApp.router
```
3. `routes/`
路由配置，相当于：
```ts
router.tsx
```
例如 React Router：
```tsx
<Routes>
<Route path="/" element={<Home /> } />
<Route path="/login" element={<Login /> } />
</Routes>
```
Flutter 里也可以用类似方式组织。
4. `core/`
公共基础内容。
比如：
```text
core/
├── constants/ 常量
├── theme/ 主题、颜色、字体
├── utils/ 工具函数
└── widgets/ 通用组件
```
相当于前端里的：
```text
src/
├── constants/
├── styles/
├── utils/
└── components/
```
5. `features/`
功能模块，相当于前端的：
```text
src/features/
```
比如：
```text
features/
├── auth/
├── home/
├── profile/
├── settings/
```
每一个 feature 放一个完整功能。
例如登录模块：
```text
features/auth/
├── login_page.dart
├── register_page.dart
├── widgets/
├── services/
└── models/
```
七、一个最简单的 Flutter 初始化示例
我们把默认项目改造成一个比较清晰的结构。
1. 创建项目
```bash
flutter create my_app
cd my_app
```
2. 创建文件夹
macOS / Linux：
```bash
mkdir -p lib/core/theme
mkdir -p lib/core/widgets
mkdir -p lib/core/utils
mkdir -p lib/routes
mkdir -p lib/features/home
mkdir -p lib/features/counter
```
Windows PowerShell：
```powershell
mkdir lib/core/theme -Force
mkdir lib/core/widgets -Force
mkdir lib/core/utils -Force
mkdir lib/routes -Force
mkdir lib/features/home -Force
mkdir lib/features/counter -Force
```
最后结构：
```text
lib/
├── main.dart
├── app.dart
├── core/
│ ├── theme/
│ ├── utils/
│ └── widgets/
├── features/
│ ├── home/
│ └── counter/
└── routes/
```
八、写入口文件 `main.dart`
把 `lib/main.dart` 改成：
```dart
import 'package:flutter/material.dart';
import 'package:my_app/app.dart';
void main() {
runApp(const MyApp());
}
```
这里注意：
```dart
import 'package:my_app/app.dart';
```
`my_app` 是你的项目名。
如果你的项目名不是 `my_app`，要改成你自己的项目名。
例如你创建的是：
```bash
flutter create todo_app
```
那就写：
```dart
import 'package:todo_app/app.dart';
```
九、写根组件 `app.dart`
创建：
```text
lib/app.dart
```
内容：
```dart
import 'package:flutter/material.dart';
import 'package:my_app/features/home/home_page.dart';
import 'package:my_app/features/counter/counter_page.dart';
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '我的 Flutter 应用',
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.blue,
),
home: const HomePage(),
routes: {
'/counter': (context) => const CounterPage(),
},
);
}
}
```
这个就像前端的：
```jsx
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/counter" element={<CounterPage />} />
</Routes>
</Router>
);
}
```
十、写一个首页 `HomePage`
创建：
```text
lib/features/home/home_page.dart
```
内容：
```dart
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('首页'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('这是首页'),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/counter');
},
child: const Text('去计数器页面'),
),
],
),
),
);
}
}
```
你可以把它理解成一个页面组件。
其中：
```dart
Scaffold
```
相当于一个页面的基础骨架，通常包含：
```text
AppBar 顶部导航栏
body 页面主体
floatingActionButton 右下角浮动按钮
drawer 侧边栏
bottomNavigationBar 底部导航
```
十一、写一个计数器页面 `CounterPage`
创建：
```text
lib/features/counter/counter_page.dart
```
内容：
```dart
import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int count = 0;
void addCount() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('计数器'),
),
body: Center(
child: Text(
'当前数字：$count',
style: const TextStyle(
fontSize: 24,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: addCount,
child: const Icon(Icons.add),
),
);
}
}
```
这个非常像前端的有状态组件。
React 里可能是：
```jsx
function CounterPage() {
const count, setCount = useState(0);
return (
<div>
<p>当前数字：{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
```
Flutter 里是：
```dart
setState(() {
count++;
});
```
十二、现在的项目结构
现在你的项目大概是：
```text
lib/
├── main.dart
├── app.dart
│
├── core/
│ ├── theme/
│ ├── utils/
│ └── widgets/
│
├── features/
│ ├── home/
│ │ └── home_page.dart
│ │
│ └── counter/
│ └── counter_page.dart
│
└── routes/
```
虽然 `routes/` 暂时没用上，但后面可以抽出去。
十三、把通用组件放到 `core/widgets/`
假设我们做一个通用按钮。
创建：
```text
lib/core/widgets/app_button.dart
```
内容：
```dart
import 'package:flutter/material.dart';
class AppButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;
const AppButton({
super.key,
required this.text,
required this.onPressed,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
minimumSize: const Size(double.infinity, 48),
),
child: Text(text),
);
}
}
```
这就像前端里的通用按钮组件：
```jsx
<Button text="登录" onClick={handleLogin} />
```
然后在首页使用：
```dart
import 'package:my_app/core/widgets/app_button.dart';
```
修改 `home_page.dart`：
```dart
import 'package:flutter/material.dart';
import 'package:my_app/core/widgets/app_button.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('首页'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: AppButton(
text: '去计数器页面',
onPressed: () {
Navigator.pushNamed(context, '/counter');
},
),
),
),
);
}
}
```
十四、项目里的文件是怎么互相引用的？
Flutter 使用 `import`。
例如：
```dart
import 'package:my_app/app.dart';
```
意思是导入：
```text
lib/app.dart
```
再比如：
```dart
import 'package:my_app/features/home/home_page.dart';
```
意思是导入：
```text
lib/features/home/home_page.dart
```
再比如：
```dart
import 'package:my_app/core/widgets/app_button.dart';
```
意思是导入：
```text
lib/core/widgets/app_button.dart
```
你可以把：
```text
package:my_app/
```
理解成：
```text
lib/
```
所以：
```dart
package:my_app/features/home/home_page.dart
```
约等于：
```text
lib/features/home/home_page.dart
```
十五、什么时候该拆文件夹？
初学者最容易纠结：
> 这个文件该放哪？
给你一个简单判断标准。
1. 如果只是一个页面
放在对应 feature 里：
```text
features/home/home_page.dart
```
2. 如果页面里有很多小组件
给这个 feature 建一个 `widgets/`：
```text
features/home/
├── home_page.dart
└── widgets/
├── user_card.dart
├── banner_card.dart
└── menu_item.dart
```
3. 如果多个页面都用到这个组件
放到公共组件：
```text
core/widgets/
```
或者：
```text
shared/widgets/
```
例如：
```text
core/widgets/app_button.dart
core/widgets/loading_view.dart
core/widgets/error_view.dart
```
4. 如果是接口请求
先放：
```text
lib/services/
```
例如：
```text
services/api_service.dart
```
项目大了以后可以放：
```text
core/network/
```
5. 如果是工具函数
放：
```text
core/utils/
```
例如：
```text
core/utils/date_utils.dart
core/utils/validators.dart
```
十六、初学者不要过度设计
很多教程一上来就给你：
```text
data/
domain/
presentation/
repositories/
usecases/
entities/
datasources/
```
这个不是不对，而是对初学者太重了。
刚开始建议你这样：
```text
lib/
├── main.dart
├── app.dart
├── core/
├── features/
└── services/
```
等你项目变大，再慢慢演进：
```text
features/auth/
├── pages/
├── widgets/
├── services/
├── models/
```
再大一点：
```text
features/auth/
├── data/
├── domain/
└── presentation/
```
项目结构是随着项目变大的，不是一开始就必须最复杂。
十七、推荐你一开始这样组织
我建议你直接用这个版本：
```text
lib/
├── main.dart
├── app.dart
│
├── core/
│ ├── constants/
│ │ └── app_constants.dart
│ ├── theme/
│ │ └── app_theme.dart
│ ├── utils/
│ │ └── validators.dart
│ └── widgets/
│ ├── app_button.dart
│ └── loading_view.dart
│
├── features/
│ ├── home/
│ │ ├── home_page.dart
│ │ └── widgets/
│ │
│ ├── auth/
│ │ ├── login_page.dart
│ │ ├── register_page.dart
│ │ └── widgets/
│ │
│ └── profile/
│ ├── profile_page.dart
│ └── widgets/
│
├── routes/
│ └── app_routes.dart
│
└── services/
├── api_service.dart
└── storage_service.dart
```
这个结构非常适合初学者。
十八、把主题抽出来
创建：
```text
lib/core/theme/app_theme.dart
```
内容：
```dart
import 'package:flutter/material.dart';
class AppTheme {
static ThemeData get light {
return ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.blue,
appBarTheme: const AppBarTheme(
centerTitle: true,
),
);
}
static ThemeData get dark {
return ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.blue,
brightness: Brightness.dark,
);
}
}
```
然后 `app.dart` 使用：
```dart
import 'package:flutter/material.dart';
import 'package:my_app/core/theme/app_theme.dart';
import 'package:my_app/features/home/home_page.dart';
import 'package:my_app/features/counter/counter_page.dart';
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '我的 Flutter 应用',
debugShowCheckedModeBanner: false,
theme: AppTheme.light,
darkTheme: AppTheme.dark,
home: const HomePage(),
routes: {
'/counter': (context) => const CounterPage(),
},
);
}
}
```
十九、把路由抽出来
创建：
```text
lib/routes/app_routes.dart
```
内容：
```dart
import 'package:flutter/material.dart';
import 'package:my_app/features/counter/counter_page.dart';
import 'package:my_app/features/home/home_page.dart';
class AppRoutes {
static const home = '/';
static const counter = '/counter';
static Map<String, WidgetBuilder> get routes {
return {
home: (context) => const HomePage(),
counter: (context) => const CounterPage(),
};
}
}
```
然后 `app.dart`：
```dart
import 'package:flutter/material.dart';
import 'package:my_app/core/theme/app_theme.dart';
import 'package:my_app/routes/app_routes.dart';
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '我的 Flutter 应用',
debugShowCheckedModeBanner: false,
theme: AppTheme.light,
darkTheme: AppTheme.dark,
initialRoute: AppRoutes.home,
routes: AppRoutes.routes,
);
}
}
```
这样路由就集中管理了。
页面跳转：
```dart
Navigator.pushNamed(context, AppRoutes.counter);
```
二十、如何新增一个功能模块？
比如新增一个 `profile` 页面。
1. 创建文件夹和文件
```text
lib/features/profile/profile_page.dart
```
内容：
```dart
import 'package:flutter/material.dart';
class ProfilePage extends StatelessWidget {
const ProfilePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('个人中心'),
),
body: const Center(
child: Text('这是个人中心'),
),
);
}
}
```
2. 添加路由
修改：
```text
lib/routes/app_routes.dart
```
```dart
import 'package:flutter/material.dart';
import 'package:my_app/features/counter/counter_page.dart';
import 'package:my_app/features/home/home_page.dart';
import 'package:my_app/features/profile/profile_page.dart';
class AppRoutes {
static const home = '/';
static const counter = '/counter';
static const profile = '/profile';
static Map<String, WidgetBuilder> get routes {
return {
home: (context) => const HomePage(),
counter: (context) => const CounterPage(),
profile: (context) => const ProfilePage(),
};
}
}
```
3. 从页面跳转
在任意页面里：
```dart
Navigator.pushNamed(context, AppRoutes.profile);
```
二十一、接口请求怎么放？
初学者可以先建：
```text
lib/services/api_service.dart
```
例如：
```dart
class ApiService {
Future<Map<String, dynamic>> fetchUserInfo() async {
// 这里先模拟请求
await Future.delayed(const Duration(seconds: 1));
return {
'name': '张三',
'age': 18,
};
}
}
```
页面中使用：
```dart
final apiService = ApiService();
final user = await apiService.fetchUserInfo();
```
项目大了之后，可以改成：
```text
lib/core/network/api_client.dart
```
但是刚开始不用太复杂。
二十二、前端转 Flutter 最容易不适应的地方
1. 没有 HTML 和 CSS
Flutter 不写：
```html
<div class="container"></div>
```
而是写 Widget：
```dart
Container(
padding: EdgeInsets.all(16),
color: Colors.blue,
child: Text('Hello'),
)
```
2. 布局主要靠 Row、Column、Stack
例如水平排列：
```dart
Row(
children: [
Text('姓名'),
Text('张三'),
],
)
```
垂直排列：
```dart
Column(
children: [
Text('第一行'),
Text('第二行'),
],
)
```
层叠布局：
```dart
Stack(
children: [
Image.network('xxx'),
Text('标题'),
],
)
```
3. 一切皆 Widget
页面是 Widget：
```dart
Scaffold
AppBar
Text
Button
Padding
Center
Column
```
全都是 Widget。
4. 状态更新要告诉 Flutter 重新 build
前端里你可能习惯了：
```js
state.count++
```
然后框架自动更新。
Flutter 里如果是 `StatefulWidget`，要这样：
```dart
setState(() {
count++;
});
```
意思是：
> 状态变了，请重新执行 build，更新 UI。
二十三、推荐学习顺序
作为前端转 Flutter，建议按这个顺序学：
第一阶段：基础 UI
先熟悉这些：
```text
MaterialApp
Scaffold
AppBar
Text
Container
Row
Column
Stack
ListView
GridView
Image
Icon
ElevatedButton
TextField
```
第二阶段：页面跳转
学会：
```dart
Navigator.push
Navigator.pushNamed
Navigator.pop
```
或者后面用：
```dart
go_router
```
第三阶段：状态管理
先会用：
```dart
StatefulWidget
setState
```
再学：
```text
Provider
```
或者：
```text
Riverpod
```
我个人比较推荐初学者学：
```text
Riverpod
```
原因：
-
比 Bloc 简单
-
比全局 Provider 更清晰
-
适合中大型项目
-
和前端状态管理思想比较接近
第四阶段：网络请求
学习：
```text
http
dio
jsonDecode
FutureBuilder
async/await
```
推荐先用：
```yaml
dio
```
相当于前端里的 axios。
安装：
```bash
flutter pub add dio
```
第五阶段：项目结构优化
当你写了几个页面之后，再慢慢整理：
```text
features/
core/
shared/
routes/
services/
```
二十四、一个适合初学者的最终结构
你可以直接按这个来：
```text
lib/
├── main.dart
├── app.dart
│
├── core/
│ ├── constants/
│ ├── theme/
│ ├── utils/
│ └── widgets/
│
├── features/
│ ├── auth/
│ │ ├── login_page.dart
│ │ ├── register_page.dart
│ │ └── widgets/
│ │
│ ├── home/
│ │ ├── home_page.dart
│ │ └── widgets/
│ │
│ └── profile/
│ ├── profile_page.dart
│ └── widgets/
│
├── routes/
│ └── app_routes.dart
│
└── services/
├── api_service.dart
└── storage_service.dart
```
这个结构不会太重，也足够支撑你从入门到做完整项目。
二十五、记住这几个原则
1. `main.dart` 尽量简单
只负责启动。
2. `app.dart` 放根 Widget
比如：
```dart
MaterialApp
```
3. 页面按功能模块放
不要这样：
```text
lib/
├── page1.dart
├── page2.dart
├── page3.dart
```
建议：
```text
lib/features/home/home_page.dart
lib/features/auth/login_page.dart
lib/features/profile/profile_page.dart
```
4. 通用组件放 `core/widgets`
比如：
```text
按钮
输入框
弹窗
加载动画
空状态
错误页
```
5. 页面太复杂就拆 Widget
如果一个页面的 `build()` 很长，就拆：
```text
home_page.dart
widgets/
├── home_banner.dart
├── home_menu.dart
└── home_list.dart
```
就像前端拆组件一样。
6. 一开始不要过度架构
先跑起来，再整理。
先能写：
```text
页面
组件
路由
请求
状态
```
再慢慢理解：
```text
repository
usecase
dependency injection
clean architecture
```
二十六、最后给你一个最简版心智模型
你可以这样记：
```text
main.dart 应用入口
app.dart 根组件
routes/ 路由
core/ 公共工具、主题、通用组件
features/ 业务功能模块
services/ 接口请求、本地存储
```
对应前端：
```text
main.dart main.tsx
app.dart App.tsx
routes/ router.tsx
core/ utils + styles + common components
features/ pages / features
services/ api / services
```
一句话总结：
> **Flutter 项目组织核心就是：入口归入口，路由归路由，公共能力放 core，业务功能按 feature 拆分。**