福田网站设计方案wordpress 程序员博客主题

Flutter 知识点总结

一、基础概念

1. Flutter 是什么

   • Google 开源的跨平台 UI 框架
   • 使用 Dart 语言编写
   • 通过 Skia 图形引擎直接绘制 UI，不依赖原生控件

2. 核心特点

   • 高性能（60/120fps）
   • 跨平台（iOS/Android/Web/Windows/macOS/Linux）
   • 热重载（Hot Reload）
   • 声明式 UI

二、Dart 语言要点

1. 基础语法

   • 强类型语言（支持类型推断）
   • 所有对象都是类的实例
   • 支持 async/await
   • 单线程+事件循环

2. 重要概念

   // 空安全
   String? nullableString = null;// Future 异步处理
   Future<void> fetchData() async {var data = await http.get(url);
   }// Stream 数据流
   Stream<int> countStream() async* {for(int i=0; i<10; i++) {await Future.delayed(Duration(seconds: 1));yield i;}
   }
   

三、Widget 体系

1. Widget 分类

   • 有状态 Widget：StatefulWidget
   • 无状态 Widget：StatelessWidget
   • 渲染 Widget：RenderObjectWidget

2. 常用 Widget

   // 基础组件
   Text('Hello'), Icon(Icons.star), Image.network(url)// 布局组件
   Row(), Column(), Stack(), Flex()// 容器组件
   Container(), Padding(), Center(), SizedBox()// 滚动组件
   ListView(), GridView(), SingleChildScrollView()// 功能组件
   GestureDetector(), InkWell(), Navigator()
   

3. 生命周期

   • StatelessWidget：build()
   • StatefulWidget：

     createState() → initState() → didChangeDependencies() → build() → 
     didUpdateWidget() → deactivate() → dispose()
     

四、布局与样式

1. 布局模型

   • 约束向下（父→子）
   • 尺寸向上（子→父）
   • 父组件决定位置

2. 常用布局方式

   // 弹性布局
   Flex(direction: Axis.horizontal,children: [Expanded(flex:2, child:...), Expanded(flex:1, child:...)]
   )// 层叠布局
   Stack(alignment: Alignment.center,children: [Background(), Positioned(top:10, child: FloatingButton())]
   )
   

3. 样式处理

   // 主题
   Theme(data: ThemeData(primaryColor: Colors.blue),child: Text('Hello', style: Theme.of(context).textTheme.headline6)
   )// 自定义样式
   BoxDecoration(gradient: LinearGradient(colors: [Colors.red, Colors.orange]),borderRadius: BorderRadius.circular(10),boxShadow: [BoxShadow(blurRadius: 10)]
   )
   

五、状态管理

1. 基础方式

   • setState：局部状态
   • InheritedWidget：祖先共享数据

2. 常用方案

   • Provider：最常用的轻量级方案
   • Riverpod：Provider 的改进版
   • Bloc：事件驱动状态管理
   • GetX：简洁的全家桶方案
   • Redux：单向数据流

3. Provider 示例

   // 定义 Model
   class Counter with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();}
   }// 提供数据
   ChangeNotifierProvider(create: (_) => Counter(),child: MyApp()
   )// 使用数据
   Consumer<Counter>(builder: (context, counter, _) => Text('${counter.count}')
   )
   

六、路由与导航

1. 基本导航

   // 跳转
   Navigator.push(context, MaterialPageRoute(builder: (_) => DetailPage()));// 返回
   Navigator.pop(context, '返回数据');
   

2. 命名路由

   // 注册路由
   MaterialApp(routes: {'/': (context) => HomePage(),'/detail': (context) => DetailPage()}
   )// 使用
   Navigator.pushNamed(context, '/detail', arguments: '数据');
   

3. 路由守卫

   MaterialApp(onGenerateRoute: (settings) {if(需要登录 && !已登录) {return MaterialPageRoute(builder: (_) => LoginPage());}return MaterialPageRoute(builder: (_) => settings.name == '/detail' ? DetailPage() : HomePage());}
   )
   

七、网络请求

1. http 包

   import 'package:http/http.dart' as http;Future<void> fetchData() async {final response = await http.get(Uri.parse('https://api.example.com/data'));if(response.statusCode == 200) {print(response.body);}
   }
   

2. Dio（推荐）

   final dio = Dio();
   final response = await dio.get('/data', queryParameters: {'page':1},options: Options(headers: {'token':'xxx'})
   );
   

3. JSON 解析

   // 手动解析
   Map<String, dynamic> data = jsonDecode(response.body);// 自动生成（json_serializable）
   @JsonSerializable()
   class User {final String name;final int age;factory User.fromJson(Map<String,dynamic> json) => _$UserFromJson(json);Map<String,dynamic> toJson() => _$UserToJson(this);
   }
   

八、数据持久化

1. shared_preferences

   final prefs = await SharedPreferences.getInstance();
   await prefs.setString('token', 'abc123');
   String token = prefs.getString('token');
   

2. SQLite（sqflite）

   final db = await openDatabase('my_db.db');
   await db.execute('CREATE TABLE IF NOT EXISTS users(id INTEGER PRIMARY KEY, name TEXT)');
   await db.insert('users', {'name': 'Jack'});
   List<Map> users = await db.query('users');
   

3. Hive（高性能 NoSQL）

   var box = await Hive.openBox('myBox');
   box.put('name', 'Lisa');
   print(box.get('name'));
   

九、动画系统

1. 基础动画

   AnimationController(duration: Duration(seconds:1),vsync: this
   )..forward();FadeTransition(opacity: CurvedAnimation(parent: controller,curve: Curves.easeIn),child: Text('淡入淡出')
   )
   

2. Hero 动画

   // 页面1
   Hero(tag: 'avatar', child: Image.asset('avatar.png'))// 页面2
   Hero(tag: 'avatar', child: Image.asset('avatar.png'))
   

3. 物理动画

   SpringSimulation(SpringDescription(mass:1, stiffness:100, damping:10),0.0,  // 起始位置300.0,// 结束位置10.0  // 初始速度
   )
   

十、测试与调试

1. 单元测试

   test('Counter increments', () {final counter = Counter();counter.increment();expect(counter.value, 1);
   });
   

2. Widget 测试

   testWidgets('MyWidget has a title', (tester) async {await tester.pumpWidget(MyWidget(title: 'T'));expect(find.text('T'), findsOneWidget);
   });
   

3. 调试工具

   • Flutter Inspector：检查 Widget 树
   • Performance Overlay：性能分析
   • Dart DevTools：全面的调试工具集

十一、进阶主题

1. Platform Channels

   • 与原生平台通信
   • 支持 MethodChannel/EventChannel/BasicMessageChannel

2. Isolate

   void heavyTask(SendPort port) {// 计算密集型任务port.send(result);
   }final receivePort = ReceivePort();
   await Isolate.spawn(heavyTask, receivePort.sendPort);
   receivePort.listen((data) => print(data));
   

3. Flutter Web

   • 同一套代码编译为 Web 应用
   • 注意区分平台特定代码

4. Flutter 桌面端

   • Windows/macOS/Linux 支持
   • 系统菜单、原生窗口管理等特性

十二、最佳实践

1. 代码组织

   lib/
   ├── models/        # 数据模型
   ├── services/      # 业务逻辑
   ├── repositories/  # 数据仓库
   ├── pages/         # 页面
   ├── widgets/       # 公用组件
   └── main.dart      # 入口文件
   

2. 性能优化

   • 避免 build() 方法中执行耗时操作
   • 使用 const 构造函数
   • 合理使用 ListView.builder
   • 减少不必要的重绘

3. 国际化

   MaterialApp(localizationsDelegates: [GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,],supportedLocales: [const Locale('en', 'US'),const Locale('zh', 'CN'),],
   )
   

4. 打包发布

   # Android
   flutter build appbundle
   # iOS
   flutter build ipa
   # Web
   flutter build web
   

十三、生态资源

1. 官方资源

   • flutter.dev
   • Flutter GitHub
   • Pub.dev 包仓库

2. 学习资源

   • Flutter 官方文档
   • 《Flutter 实战》开源电子书
   • Flutter 社区（掘金、CSDN、StackOverflow）

3. 常用插件

   • http/dio：网络请求
   • provider/riverpod：状态管理
   • shared_preferences/hive：本地存储
   • get_it：依赖注入
   • cached_network_image：图片缓存
   • flutter_bloc：BLoC 模式

这个总结涵盖了 Flutter 开发的主要知识点，可以作为学习路线图或速查参考。实际开发中应根据项目需求选择合适的技术方案。