Flutter+Mobx实战，写一个App应用

最新推荐文章于 2024-08-13 08:02:28 发布

Tecode1009

最新推荐文章于 2024-08-13 08:02:28 发布

阅读量366

点赞数

分类专栏：前端文章标签： flutter mobx provider dio

本文链接：https://blog.csdn.net/Tecode1009/article/details/100009911

版权

本文介绍了使用Flutter和Mobx构建App应用的实战经验，包括路由配置、状态管理、参数传递和编码解码。文章强调了正确使用Mobx的状态管理，避免在多个页面中直接实例化导致的问题，并提供了项目的GitHub链接供参考。

摘要由CSDN通过智能技术生成

说明

目前增加了路由跳转，可以带参数跳转页面。下拉可以自定义刷新样式，IOS点击Status Bar回到顶部，目前已经测试过。状态管理器使用Mobx,我自己觉得对于Redux使用起来会复杂一点，下面是提供的预览GIF图,卡顿现象是因为屏幕录制的帧率有点低。

项目地址：https://github.com/Tecode/flutter_book,不定时的更新，欢迎start。

安卓预览

IOS预览

依赖库

environment:
  sdk: ">=2.1.0 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  mobx:
  flutter_mobx: // Mobx
  cupertino_icons: ^0.1.2
  flutter_svg: ">=0.12.4" // 处理SVG图片
  carousel_slider: ^1.3.0 // 轮播图
  fluro: "^1.4.0" // 路由
  provider: ^2.0.1 // 用于包裹mobx

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^1.3.1 //Mobx依赖
  mobx_codegen: // Mobx依赖

`Flutter`版本

Flutter 1.5.9-pre.223 • channel master • https://github.com/flutter/flutter.git
Framework • revision b76a1e8312 (25 hours ago) • 2019-05-13 09:06:30 +0100
Engine • revision 816d3fc586
Tools • Dart 2.3.1 (build 2.3.1-dev.0.0 a0290f823c)

修改系统状态栏颜色

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_book/containers/Entrance.dart';
import 'package:flutter_book/helpers/constants.dart' show AppColors;
import 'package:flutter/services.dart';

void main() {
  // 修改系统状态栏颜色
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Color(AppColors.themeColor), // navigation bar color
    statusBarColor: Color(AppColors.themeColor), // status bar color
  ));
  runApp(MyApp());wenti
}

自定义appBar左侧导航显示的内容

appBar: AppBar(
...
        leading: IconButton(
          alignment: Alignment.centerRight,
          icon: SvgPicture.asset(
            'assets/icon/icon_trophy.svg',
            width: Constants.appBarIconSize + 5.0,
            height: Constants.appBarIconSize + 5.0,
          ),
          onPressed: () {
            print("ok");
          },
        )
...
)

媒体查询

MediaQuery.of(context)

资源配置

  assets:
   - assets/icon/
   - lib/containers/
   - lib/model/
   - lib/helpers/
   - lib/routers/
   - assets/images/

路由配置

这里我使用的是fluro配置路由，这里我偷一下懒了，就没有使用原生的方法，不过他帮我们封装了好多的方法我们可以很方便的去使用它，下面说一下路由的配置。

`lib\routers\routers.dart`

配置路由对应的模块，可以理解成Vue-router或React-router一样，先要将对应的路由配置到你要跳转的模块去。

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_book/routers/route_handlers.dart';

class Routes {
  static String root = "/";
  static String setting = "/setting";
  static String detail = "/detail";
  static String demoSimpleFixedTrans = "/demo/fixedtrans";
  static String