经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Flutter » 查看文章
Flutter系列文章-Flutter进阶2
来源：cnblogs　　作者：很久8899　　时间：2023/7/31 9:11:30　　对本文有异议

这一节我将再详细地为您介绍 Flutter 进阶主题，包括导航和路由、状态管理、异步处理、HTTP请求和Rest API，以及数据持久化。让我们逐个介绍这些主题。

1.导航和路由

在 Flutter 中，导航和路由是构建多页面应用的关键概念。导航是指从一个页面（或称为路由）切换到另一个页面的过程。每个页面都对应着一个 Widget。在 Flutter 中，页面切换由 Navigator 管理。

1.1. 基本导航

在 Flutter 中，使用 MaterialApp 来管理导航栈。当创建一个新的 MaterialApp 时，它会自动创建一个路由栈，并将一个 Navigator 放在栈顶。

要导航到新页面，可以使用 Navigator.push() 方法：

  1. Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));

要返回前一个页面，可以使用 Navigator.pop() 方法：

  1. Navigator.pop(context);

1.2. 命名路由

Flutter 也支持命名路由，它可以让你在应用中使用可读性更好的名称来导航。要使用命名路由，首先在 MaterialApp 中定义路由表：

  1. MaterialApp(
  2.   routes: {
  3.     '/': (context) => HomePage(),
  4.     '/second': (context) => SecondPage(),
  5.   },
  6. )

然后，你可以使用命名路由进行导航：

  1. Navigator.pushNamed(context, '/second');

1.3. 带参数的路由

有时你需要向新页面传递参数。在 Flutter 中，可以使用 ModalRoute.of() 来获取路由中的参数：

  1. class SecondPage extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     final args = ModalRoute.of(context).settings.arguments as Map<String, dynamic>;
  5.     // 使用参数
  6.     return Scaffold(...);
  7.   }
  8. }

要传递参数，可以在导航时传入参数：

  1. Navigator.pushNamed(context, '/second', arguments: {'name': 'John', 'age': 30});

1.4. 路由转场动画

Flutter 提供了丰富的路由转场动画效果，例如渐变、缩放、平移等。你可以在 MaterialPageRoute 中设置 PageTransitionsBuilder 来自定义转场动画：

  1. MaterialApp(
  2.   routes: {
  3.     '/': (context) => HomePage(),
  4.     '/second': (context) => SecondPage(),
  5.   },
  6.   theme: ThemeData(
  7.     pageTransitionsTheme: PageTransitionsTheme(
  8.       builders: {
  9.         TargetPlatform.android: CupertinoPageTransitionsBuilder(), // 使用iOS样式的转场动画
  10.       },
  11.     ),
  12.   ),
  13. )

这里只是导航和路由的基本介绍，Flutter 提供了更多的导航和路由功能，例如 Hero 动画、路由拦截等。你可以通过阅读官方文档和示例代码深入学习导航和路由的更多内容。

2. 状态管理

在 Flutter 中，状态管理是处理应用中不同页面之间的共享数据和状态变化的重要方面。Flutter 中有多种状态管理的解决方案，其中比较流行的有 Provider、Riverpod 和 Bloc。

2.1. Provider

Provider 是一个轻量级的、易于使用的状态管理库。它允许你在 Widget 树中共享数据，并通过 Consumer 或 Provider.of 获取数据。

首先，在应用的根 Widget 中创建一个 ChangeNotifierProvider，将要共享的数据模型放在其中：

  1. void main() {
  2.   runApp(
  3.     ChangeNotifierProvider(
  4.       create: (context) => CounterModel(),
  5.       child: MyApp(),
  6.     ),
  7.   );
  8. }

然后，在需要使用数据的 Widget 中，使用 Consumer 来订阅数据变化：

  1. class MyWidget extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     final counter = context.watch<CounterModel>();
  5.     return Text('Count: ${counter.count}');
  6.   }
  7. }

当 CounterModel 中的数据发生变化时，MyWidget 会自动更新。

2.2. Riverpod

Riverpod 是一个新的状态管理库，它是 Provider 的改进版。Riverpod 提供更好的性能和更简洁的 API。

要使用 Riverpod，首先创建一个 Provider：

  1. final counterProvider = Provider<int>((ref) => 0);

然后，使用 ProviderListener 来订阅数据变化：

  1. class MyWidget extends ConsumerWidget {
  2.   @override
  3.   Widget build(BuildContext context, ScopedReader watch) {
  4.     final counter = watch(counterProvider);
  5.     return Text('Count: $counter');
  6.   }
  7. }

2.3. Bloc

Bloc 是另一种常用的状态管理库，它使用单向数据流来管理状态。Bloc 将状态和操作分离，使得代码更易于维护和测试。

首先，创建一个 Bloc：

  1. enum CounterEvent { increment, decrement }
  3. class CounterBloc extends Bloc<CounterEvent, int> {
  4.   @override
  5.   int get initialState => 0;
  7.   @override
  8.   Stream<int> mapEventToState(CounterEvent event) async* {
  9.     switch (event) {
  10.       case CounterEvent.increment:
  11.         yield state + 1;
  12.         break;
  13.       case CounterEvent.decrement:
  14.         yield state - 1;
  15.         break;
  16.     }
  17.   }
  18. }

然后，在需要使用 Bloc 的 Widget 中，使用 BlocBuilder 来订阅状态变化：

  1. class MyWidget extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return BlocBuilder<CounterBloc, int>(
  5.       builder: (context, state) {
  6.         return Text('Count: $state');
  7.       },
  8.     );
  9.   }
  10. }

这里只是状态管理的基本介绍，Provider、Riverpod 和 Bloc 都提供了更多的功能和高级用法。深入学习状态管理需要一定的时间和实践，你可以通过阅读官方文档和示例代码来掌握更多技巧和最佳实践。

3. 异步处理

在 Flutter 中，异步处理是非常常见的，例如从网络获取数据、读取本地文件等。Flutter 提供了 Future 和 Stream 来处理异步操作。

3.1. Future

Future 表示一个可能完成或失败的异步操作。要执行一个异步任务，可以使用 async 和 await 关键字：

  1. Future<String> fetchData() async {
  2.   // 模拟网络请求
  3.   await Future.delayed(Duration(seconds: 2));
  4.   return 'Data from server';
  5. }
  7. void main() {
  8.   fetchData().then((data) {
  9.     print(data);
  10.   }).catchError((error) {
  11.     print('Error: $error');
  12.   });
  13. }

3.2. Stream

Stream 表示一系列异步事件。与 Future 不同的是，Stream 可以产生多个值，而不是单个结果。

要创建一个 Stream，可以使用 StreamController：

  1. Stream<int> countStream() {
  2.   final controller = StreamController<int>();
  3.   Timer.periodic(Duration(seconds: 1), (timer) {
  4.     controller.add(timer.tick);
  5.   });
  6.   return controller.stream;
  7. }
  9. void main() {
  10.   countStream().listen((count) {
  11.     print('Count: $count');
  12.   });
  13. }

这里只是异步处理的基本介绍，Flutter 还提供了更多的异步工具和函数，例如 async* 和 await for，它们可以更方便地处理异步操作。深入学习异步处理需要实践和不断尝试，希望你能在实际项目中掌握这些技术。

4. HTTP请求和Rest API

在现代的应用中，与服务器进行交互是很常见的需求。Flutter 提供了多种方式来进行 HTTP 请求和处理 Rest API。

4.1. 使用 http 包

Flutter 的 http 包是一个简单易用的 HTTP 请求库，它允许你发送 HTTP 请求并处理响应。

首先，要在 pubspec.yaml 文件中添加 http 包的依赖：

  1. dependencies:
  2.   flutter:
  3.     sdk: flutter
  4.   http: ^0.13.3

然后，可以使用 http 包来发送 HTTP 请求：

  1. import 'package:http/http.dart' as http;
  3. Future<void> fetchData() async {
  4.   final url = Uri.parse('https://api.example.com/data');
  5.   final response = await http.get(url);
  7.   if (response.statusCode == 200) {
  8.     print('Response: ${response.body}');
  9.   } else {
  10.     print('Error: ${response.statusCode}');
  11.   }
  12. }

4.2. 使用 Dio 包

dio 是另一个流行的 HTTP 请求库，它提供了更丰富的功能和易用的 API。

首先，要在 pubspec.yaml 文件中添加 dio 包的依赖：

  1. dependencies:
  2.   flutter:
  3.     sdk: flutter
  4.   dio: ^4.0.0

然后，可以使用 dio 包来发送 HTTP 请求：

  1. import 'package:dio/dio.dart';
  3. Future<void> fetchData() async {
  4.   final dio = Dio();
  5.   final url = 'https://api.example.com/data';
  6.   final response = await dio.get(url);
  8.   if (response.statusCode == 200) {
  9.     print('Response: ${response.data}');
  10.   } else {
  11.     print('Error: ${response.statusCode}');
  12.   }
  13. }

4.3. 处理 JSON 数据

通常服务器返回的数据是 JSON 格式的。在 Flutter 中，你可以使用 dart:convert 包来解析和序列化 JSON 数据。

  1. import 'dart:convert';
  3. void main() {
  4.   final jsonString = '{"name": "John", "age": 30}';
  5.   final jsonData = jsonDecode(jsonString);
  7.   print('Name: ${jsonData['name']}');
  8.   print('Age: ${jsonData['age']}');
  9. }

这里只是 HTTP 请求和处理 JSON 数据的基本介绍。在实际项目中，你可能还需要处理错误、使用模型类来序列化数据等。希望你通过学习官方文档和示例代码来掌握更多关于 HTTP 请求和 Rest API 的知识。

5. 数据持久化

在应用中进行数据持久化是必不可少的，Flutter 提供了多种方式来实现数据的本地存储。

5.1. 使用 shared_preferences 包

shared_preferences 是一个简单易用的本地存储库，它可以存储键值对数据。

首先，要在 pubspec.yaml 文件中添加 shared_preferences 包的依赖：

  1. dependencies:
  2.   flutter:
  3.     sdk: flutter
  4.   shared_preferences: ^2.0.9

然后，可以使用 shared_preferences 包来读取和写入数据：

  1. import 'package:shared_preferences/shared_preferences.dart';
  3. void main() async {
  4.   final prefs = await SharedPreferences.getInstance();
  6.   // 保存数据
  7.   await prefs.setString('username', 'John');
  9.   // 读取数据
  10.   final username = prefs.getString('username');
  11.   print('Username: $username');
  12. }

5.2. 使用 sqflite 包

sqflite 是一个 SQLite 数据库包，它提供了更强大的数据库功能，适用于需要存储复杂数据的场景。

首先，要在 pubspec.yaml 文件中添加 sqflite 包的依赖：

  1. dependencies:
  2.   flutter:
  3.     sdk: flutter
  4.   sqflite: ^2.0.0+4

然后，可以使用 sqflite 包来创建和管理数据库：

  1. import 'package:sqflite/sqflite.dart';
  2. import 'package:path/path.dart';
  4. void main() async {
  5.   final databasePath = await getDatabasesPath();
  6.   final database = await openDatabase(
  7.     join(databasePath, 'app_database.db'),
  8.     version: 1,
  9.     onCreate: (db, version) {
  10.       db.execute('CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)');
  11.     },
  12.   );
  14.   // 插入数据
  15.   await database.insert('users', {'name': 'John'});
  17.   // 查询数据
  18.   final users = await database.query('users');
  19.   for (var user in users) {
  20.     print('User: ${user['name']}');
  21.   }
  22. }

这里只是数据持久化的基本介绍。在实际项目中，你可能还需要处理数据库迁移、使用 ORM 框架等。希望你能通过学习官方文档和示例代码来掌握更多关于数据持久化的知识。

6. 综合Demo

以下是一个包含了导航和路由、状态管理、异步处理、HTTP 请求和 Rest API，以及数据持久化的综合的示例代码。这个示例将使用 Provider 来管理状态，并通过 HTTP 请求获取数据并将其保存到 SQLite 数据库中。

首先，在 pubspec.yaml 文件中添加依赖：

  1. dependencies:
  2.   flutter:
  3.     sdk: flutter
  4.   cupertino_icons: ^1.0.2
  5.   provider: ^6.0.1
  6.   http: ^0.13.3
  7.   sqflite: ^2.0.0+4

然后，创建四个 Dart 文件来构建示例：

main.dart：定义 MyApp 作为根 Widget，并创建 MaterialApp。

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  3. import 'package:path/path.dart';
  4. import 'package:sqflite/sqflite.dart';
  5. import 'package:http/http.dart' as http;
  7. import 'home_page.dart';
  8. import 'user.dart';
  10. void main() {
  11.   runApp(MyApp());
  12. }
  14. class MyApp extends StatelessWidget {
  15.   @override
  16.   Widget build(BuildContext context) {
  17.     return MaterialApp(
  18.       home: MultiProvider(
  19.         providers: [
  20.           ChangeNotifierProvider(create: (context) => UserProvider()),
  21.         ],
  22.         child: HomePage(),
  23.       ),
  24.     );
  25.   }
  26. }

home_page.dart：定义 HomePage 作为显示用户信息的页面。

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  4. import 'user.dart';
  5. import 'second_page.dart';
  7. class HomePage extends StatelessWidget {
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     final userProvider = Provider.of<UserProvider>(context);
  11.     final users = userProvider.users;
  13.     return Scaffold(
  14.       appBar: AppBar(
  15.         title: Text('User List'),
  16.       ),
  17.       body: ListView.builder(
  18.         itemCount: users.length,
  19.         itemBuilder: (context, index) {
  20.           final user = users[index];
  21.           return ListTile(
  22.             title: Text(user.name),
  23.             subtitle: Text('Email: ${user.email}'),
  24.             onTap: () {
  25.               Navigator.push(
  26.                 context,
  27.                 MaterialPageRoute(
  28.                   builder: (context) => SecondPage(user: user),
  29.                 ),
  30.               );
  31.             },
  32.           );
  33.         },
  34.       ),
  35.       floatingActionButton: FloatingActionButton(
  36.         onPressed: () async {
  37.           await userProvider.fetchUsersFromApi();
  38.         },
  39.         child: Icon(Icons.refresh),
  40.       ),
  41.     );
  42.   }
  43. }

second_page.dart：定义 SecondPage 作为显示单个用户信息的页面。

  1. import 'package:flutter/material.dart';
  3. import 'user.dart';
  5. class SecondPage extends StatelessWidget {
  6.   final User user;
  8.   SecondPage({required this.user});
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return Scaffold(
  13.       appBar: AppBar(
  14.         title: Text('User Detail'),
  15.       ),
  16.       body: Center(
  17.         child: Column(
  18.           mainAxisAlignment: MainAxisAlignment.center,
  19.           children: [
  20.             Text(user.name, style: TextStyle(fontSize: 24)),
  21.             SizedBox(height: 10),
  22.             Text('Email: ${user.email}', style: TextStyle(fontSize: 18)),
  23.             SizedBox(height: 10),
  24.             Text('Phone: ${user.phone}', style: TextStyle(fontSize: 18)),
  25.             SizedBox(height: 10),
  26.             Text('Website: ${user.website}', style: TextStyle(fontSize: 18)),
  27.           ],
  28.         ),
  29.       ),
  30.     );
  31.   }
  32. }

user.dart：定义 User 类和 UserProvider 用于状态管理和数据持久化。

  1. import 'package:flutter/material.dart';
  2. import 'package:path/path.dart';
  3. import 'package:sqflite/sqflite.dart';
  4. import 'package:http/http.dart' as http;
  5. import 'dart:convert'; // 添加此导入
  7. class User {
  8.   final String name;
  9.   final String email;
  10.   final String phone;
  11.   final String website;
  13.   User(
  14.       {required this.name,
  15.       required this.email,
  16.       this.phone = '',
  17.       this.website = ''});
  18. }
  20. class UserProvider extends ChangeNotifier {
  21.   List<User> _users = [];
  23.   List<User> get users => _users;
  25.   Future<void> fetchUsersFromApi() async {
  26.     final response =
  27.         await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
  28.     if (response.statusCode == 200) {
  29.       final List<dynamic> data = json.decode(response.body); // 使用json.decode方法
  30.       _users = data
  31.           .map((item) => User(
  32.               name: item['name'],
  33.               email: item['email'],
  34.               phone: item['phone'],
  35.               website: item['website']))
  36.           .toList();
  37.       notifyListeners();
  38.       saveUsersToDatabase();
  39.     }
  40.   }
  42.   Future<void> saveUsersToDatabase() async {
  43.     final dbPath = await getDatabasesPath();
  44.     final database = await openDatabase(join(dbPath, 'user_database.db'),
  45.         version: 1, onCreate: (db, version) {
  46.       db.execute(
  47.         'CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, email TEXT, phone TEXT, website TEXT)',
  48.       );
  49.     });
  51.     await database.delete('users');
  52.     for (var user in _users) {
  53.       await database.insert('users', {
  54.         'name': user.name,
  55.         'email': user.email,
  56.         'phone': user.phone,
  57.         'website': user.website
  58.       });
  59.     }
  60.   }
  62.   Future<void> loadUsersFromDatabase() async {
  63.     final dbPath = await getDatabasesPath();
  64.     final database =
  65.         await openDatabase(join(dbPath, 'user_database.db'), version: 1);
  67.     final List<Map<String, dynamic>> maps = await database.query('users');
  68.     _users = maps
  69.         .map((map) => User(
  70.             name: map['name'],
  71.             email: map['email'],
  72.             phone: map['phone'],
  73.             website: map['website']))
  74.         .toList();
  75.     notifyListeners();
  76.   }
  77. }

这个示例将通过 HTTP 请求获取用户数据，并使用 Provider 来管理用户数据。用户数据将保存在 SQLite 数据库中，并在启动应用时从数据库加载。

总结

在本篇文章中，我们详细介绍了 Flutter 进阶的主题，包括导航和路由、状态管理、异步处理、HTTP请求和Rest API，以及数据持久化。这些主题在实际应用中都非常重要，帮助你构建更复杂、功能更强大的 Flutter 应用。

学习进阶主题需要不断实践和探索，希望你能通过阅读官方文档和示例代码来加深理解和掌握这些技术。祝你在 Flutter 的学习和开发中取得进步和成功！如果你有任何问题，随时向我提问，我会尽力帮助你解决。

原文链接：https://www.cnblogs.com/depeng8899/p/17591784.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Flutter热门文章

  • flutter监听app进入前后台状态的实现
  • Flutter开发之支持放大镜的输入框功能实现
  • Android&nbsp;Flutter实现图片滑动切换效果
  • 详解Flutter中视频播放器插件的使用教程
  • flutter&nbsp;微信聊天输入框功能实现
  • 详解如何在Flutter中获取设备标识符
  • Android使用Flutter实现录音插件
  • Flutter 编写收音机开源
  • Android?Flutter实现精灵图的使用详解
  • Flutter配置代理抓包实现过程详解

    • Flutter推荐文章

  • 【Flutter】一文读懂混入类Mixin
  • 深入理解 Flutter 图片加载原理
  • Flutter系列文章-Flutter进阶2
  • Flutter调优--深入探究MediaQuery引起界面Rebuild的原因及解决办法
  • flutter&nbsp;微信聊天输入框功能实现
  • 与 Flutter 共创未来 | Flutter Forward 活动精彩回顾
  • Flutter框架渲染流程与使用
  • Flutter异常监控 - 叁 | 从bugsnag源码学习如何追溯异常产生路径
  • Compose声明式代码语法对比React?Flutter?SwiftUI
  • Android使用Flutter实现录音插件

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号