Flutter+Mobx實戰，寫一個App應用

Tecode發表於2019-05-14

說明

目前增加了路由跳轉，可以帶引數跳轉頁面。下拉可以自定義重新整理樣式，IOS點選Status Bar回到頂部，目前已經測試過。狀態管理器使用Mobx,我自己覺得對於Redux使用起來會複雜一點，下面是提供的預覽GIF圖,卡頓現象是因為螢幕錄製的幀率有點低。

專案地址：github.com/Tecode/flut…,不定時的更新，歡迎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 demoFunc = "/demo/func";
  static String deepLink = "/message";

  static void configureRoutes(Router router) {
    router.notFoundHandler = Handler(
        handlerFunc: (BuildContext context, Map<String, List<String>> params) {
      print("ROUTE WAS NOT FOUND !!!");
    });
    router.define(root, handler: rootHandler);
    router.define(setting, handler: settingRouteHandler);
    router.define(detail, handler: detailRouterHandler);
  }
}
複製程式碼

`lib\routers\route_handlers.dart`

在這裡可以處理一些傳過來的引數，然後我們將引數放入類中例項化。

import 'package:flutter_book/containers/Setting.dart';
import 'package:flutter_book/containers/FirstScreen.dart';
import 'package:flutter_book/containers/Detail.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_book/helpers/fluro_convert_util.dart';

Handler rootHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return FirstScreen();
});

Handler settingRouteHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
    return Setting();
});

Handler detailRouterHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return Detail(
      title: FluroConvertUtils.fluroCnParamsDecode(params["title"]?.first));
});

複製程式碼

`lib\main.dart`

將路由與Flutter繫結，這樣你的路由就可以生效了

class MyApp extends StatelessWidget {
  MyApp() {
    final router = new Router();
    Routes.configureRoutes(router);
    Application.router = router;
  }
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Book',
      theme: ThemeData(
          primaryColor: Color(AppColors.themeColor),
          accentColor: Color(AppColors.themeColor),
          scaffoldBackgroundColor: Color(AppColors.themeColor)),
      home: Entrance(),
      onGenerateRoute: Application.router.generator,
    );
  }
}
複製程式碼

使用

import 'package:fluro/fluro.dart';
import 'package:flutter_book/routers/application.dart';
import 'package:flutter_book/helpers/fluro_convert_util.dart';

...程式碼省略了

 Application.router.navigateTo(
    context,
    "/detail?title=${FluroConvertUtils.fluroCnParamsEncode('熱門圖書')}",
    transition: TransitionType.native
);
複製程式碼

路由傳參

路由不支援中文字元需要編碼再解碼

import 'dart:convert';

/// fluro 引數編碼解碼工具類
class FluroConvertUtils {
  /// fluro 傳遞中文引數前，先轉換，fluro 不支援中文傳遞
  static String fluroCnParamsEncode(String originalCn) {
    StringBuffer sb = StringBuffer();
    var encoded = Utf8Encoder().convert(originalCn);
    encoded.forEach((val) => sb.write('$val,'));
    return sb.toString().substring(0, sb.length - 1).toString();
  }

  /// fluro 傳遞後取出引數，解析
  static String fluroCnParamsDecode(String encodedCn) {
    var decoded = encodedCn.split('[').last.split(']').first.split(',');
    var list = <int>[];
    decoded.forEach((s) => list.add(int.parse(s.trim())));
    return Utf8Decoder().convert(list);
  }
}
複製程式碼

編碼

import 'package:flutter_book/helpers/fluro_convert_util.dart';

Application.router.navigateTo(
    context,
    "/detail?title=${FluroConvertUtils.fluroCnParamsEncode('熱門圖書')}",
    transition: TransitionType.native,
    // transitionDuration: const Duration(milliseconds: 300),
);
複製程式碼

解碼

import 'package:flutter_book/helpers/fluro_convert_util.dart';

Handler detailRouterHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return Detail(
      title: FluroConvertUtils.fluroCnParamsDecode(params["title"]?.first));
});
複製程式碼

使用Mobx狀態管理器

pubspec.yaml配置

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  mobx:
  flutter_mobx:


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  flutter_svg: ">=0.12.4"
  carousel_slider: ^1.3.0
  fluro: "^1.4.0"
  provider: ^2.0.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^1.3.1
  mobx_codegen:
複製程式碼

多個頁面使用一個store

這裡要使用到provider: ^2.0.1，類似React的Provider。使用Provider來包裹我們的元件，使Mobx和我們的React聯絡起來。

`React Provider`

<Provider {...store}>
    <Router history={browserHistory}
        <App />
    </Router>
</Provider>
複製程式碼

`Dart Provider`

Dart Provider也是一樣的道理，將Mobx和Flutter聯絡起來，lib/main.dart完整程式碼，這樣使用可以保證你例項化的的store是同一個類。

  runApp(MultiProvider(
    providers: [
      Provider<FindStore>(
        builder: (_) => FindStore(),
      )
    ],
    child: MyApp(),
  ));
複製程式碼

如何使用

我的導航發現那一欄和下面的內容是分開的，當我點選導航的切換按鈕就會改變顯示的頁面，這樣我們可以複用顯示層的UI元件，資料放專門的檔案去管理。

來看看如何實現的

通過點選然後改變資料findStore.setTile('tile', true);

導航`lib/widgets/NavBar/FindNavBar.dart`

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_book/helpers/constants.dart';
import 'package:flutter_book/stores/findStore.dart';
import 'package:provider/provider.dart';

class FindNavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  // 我們的store
    final findStore = Provider.of<FindStore>(context);

    return Observer(
      builder: (_) => AppBar(
            title: Text("發現"),
            actions: <Widget>[
              IconButton(
                alignment: Alignment.centerRight,
                onPressed: () {
                  findStore.setTile('tile', true);
                  findStore.counter();
                },
                icon: SvgPicture.asset(
                  'assets/icon/icon_more.svg',
                  width: Constants.appBarIconSize + 2.0,
                  height: Constants.appBarIconSize + 2.0,
                  color: Color(findStore.tile
                      ? AppColors.fontColor
                      : AppColors.fontColorGray),
                ),
              ),
              IconButton(
                alignment: Alignment.centerLeft,
                onPressed: () {
                  findStore.setTile('tile', false);
                },
                icon: SvgPicture.asset(
                  'assets/icon/icon_cube.svg',
                  width: Constants.appBarIconSize + 2.0,
                  height: Constants.appBarIconSize + 2.0,
                  color: Color(findStore.tile
                      ? AppColors.fontColorGray
                      : AppColors.fontColor),
                ),
              ),
            ],
            centerTitle: true,
            elevation: 0,
          ),
    );
  }
}
複製程式碼

內容`lib/containers/Find.dart`

檢測到資料發生變化，頁面重新渲染得到新的頁面

import 'package:flutter/material.dart';
import 'package:flutter_book/widgets/Find/BookTile.dart';
import 'package:flutter_book/widgets/Find/BookCover.dart';

import 'package:flutter_book/stores/findStore.dart';
import 'package:provider/provider.dart';
import 'package:flutter_mobx/flutter_mobx.dart';

class Find extends StatefulWidget {
  @override
  _FindState createState() => _FindState();
}

class _FindState extends State<Find> {
  @override
  Widget build(BuildContext context) {
    final findStore = Provider.of<FindStore>(context);
    return Observer(builder: (_) => findStore.tile ? BookTile() : BookCover());
  }
}
複製程式碼

`FindStore` `lib/stores/findStore.dart`

import 'package:mobx/mobx.dart';

// Include generated file
part 'findStore.g.dart';

// This is the class used by rest of your codebase
class FindStore = _FindStore with _$FindStore;

// The store-class
abstract class _FindStore implements Store {
  @observable
  bool tile = false;

  @observable
  num count = 0;

  @action
  void setTile(String key, dynamic value) => tile = value;

  @action
  num counter() => this.count++;
}
複製程式碼

注意

如果你是很多個頁面共享一個Store不要直接匯入然後例項化,例如：

第一個頁面 `demo1.dart`

這個頁面我們匯入了counter.dart這個store而且我們將它例項化，當我們點選的時候資料發生變化頁面會重新渲染

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';

import 'counter.dart'; // Import the Counter

final counter = Counter(); // Instantiate the store

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MobX',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MobX Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '數值是:',
            ),
            // Wrapping in the Observer will automatically re-render on changes to counter.value
            Observer(
              builder: (_) => Text(
                    '${counter.value}',
                    style: Theme.of(context).textTheme.display1,
                  ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
複製程式碼

第二個頁面 `demo2.dart`

這個頁面我們也匯入了counter.dart，我們要的結果是第一個頁面的資料變化了也影響這個頁面，但是顯然是不能的。因為store雖然是一個，但是例項化的時候是兩個不同的，所以第一個頁面的資料變化了也不會影響到這裡。

怎麼解決呢？我們可以使用之前提到的Provider去將Mobx與Flutter聯絡起來然後通過上下關係去的到我們想要的Store，例如final findStore = Provider.of<FindStore>(context);

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';

import 'counter.dart'; // Import the Counter

final counter = Counter(); // Instantiate the store

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MobX',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MobX Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '第二個頁面顯示第一個頁面的數是:',
            ),
            Observer(
              builder: (_) => Text(
                    '${counter.value}',
                    style: Theme.of(context).textTheme.display1,
                  ),
            ),
          ],
        ),
      ),
    );
  }
}
複製程式碼

公共的Store `counter.dart`

import 'package:mobx/mobx.dart';

// Include generated file
part 'counter.g.dart';

// This is the class used by rest of your codebase
class Counter = _Counter with _$Counter;

// The store-class
abstract class _Counter implements Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}
複製程式碼

正確的使用方法

結束語

感謝你的圍觀，目前是我寫Flutter遇到的一些坑，歡迎大家一踩坑，大家有什麼意見和建議都可以提出來，謝謝。

Flutter實戰（一）寫一個天氣查詢的APP
2018-12-27
FlutterAPP
Flutter實戰1 --- 寫一個天氣查詢的APP
2018-12-18
FlutterAPP
Flutter實戰2 — 寫一個天氣查詢的APP
2019-03-04
FlutterAPP
Flutter實戰（二）寫一個天氣查詢的APP
2018-12-27
FlutterAPP
Flutter實戰2 --- 寫一個天氣查詢的APP
2018-12-20
FlutterAPP
Knative 實戰：一個微服務應用的部署
2019-11-14
微服務
app實戰運用
2024-11-27
APP
用nodejs寫一個命令列應用-前言
2018-07-20
NodeJS命令列
實戰：如何編寫一個 OpenTelemetry Extensions
2024-04-16
我用 Flutter Gemini 寫了一個水貼 APP
2024-02-28
FlutterAPP
gRPC應用實戰：（一）簡介
2021-08-18
RPC
一個輕APP場景應用-外掛
2019-05-11
APP
[譯] 用 Flutter 寫一個待辦事項應用
2018-07-18
Flutter
SpEL應用實戰
2024-02-21
用Flutter寫了個部落格園APP
2022-12-13
FlutterAPP
個推異常值檢測和實戰應用
2021-01-28
Flutter學習指南：編寫第一個應用
2019-03-04
Flutter
GlusterFS在Kubernetes中的應用實戰（一）
2018-11-06
Qt 編寫應用支援多語言版本--一個GUI應用示例
2019-06-13
QTGUI
實戰Parcel構建一個基於Vue.js的相簿應用
2018-05-09
Vue.js
用 class 寫法完整實現一個 Promise
2018-05-16
Promise
用Flutter實現一個小說閱讀App
2019-12-27
FlutterAPP
PhoneGap Hybrid APP 開發實戰(1)：第一個 Android APK
2018-07-15
APPAndroidAPK
動畫利器-lottie在懂表帝App中的實戰應用
2020-03-21
動畫APP
用nodejs寫一個命令列應用-package.json介紹
2018-07-24
NodeJS命令列PackageJSON
Flutter學習指南：編寫第一個Flutter應用
2018-11-12
Flutter
Flutter入坑指南：編寫第一個Flutter應用
2018-11-12
Flutter
混合開發實戰：App里拉起一個小程式（IOS篇）
2022-04-27
APPiOS
Vite 實戰：手把手教你寫一個 Vite 外掛
2022-03-16
Vite
用weexplus從0到1寫一個app(1)-環境搭建和首頁編寫
2018-09-01
APP
用Swoole來寫個聯機對戰遊戲呀！（一）前言
2019-04-22
遊戲
【Azure 應用服務】一個 App Service 同時部署執行兩個及多個 Java 應用程式(Jar包)
2022-01-08
APPJavaJAR
6個超級無敵實用APP，每一個都是百裡挑一
2019-07-22
APP
基於 MUI 構建一個具有 90 +頁面的APP應用
2018-09-27
UIAPP
封裝一個元件 + 函式惰性思想（重寫應用）
2018-05-19
封裝元件函式
[實戰] 使用 Vue.js 和 Iris 共建一個簡單的 Todo MVC 應用
2019-11-24
Vue.jsMVC
Prometheus監控實戰應用
2022-05-04
Prometheus
Android App應用啟動流程（一）
2021-09-09
AndroidAPP

Flutter+Mobx實戰，寫一個App應用

說明

安卓預覽

IOS預覽

依賴庫

Flutter版本

修改系統狀態列顏色

自定義appBar左側導航顯示的內容

媒體查詢

資源配置

路由配置

lib\routers\routers.dart

lib\routers\route_handlers.dart

lib\main.dart

使用

路由傳參

路由不支援中文字元需要編碼再解碼

編碼

解碼

使用Mobx狀態管理器

pubspec.yaml配置

多個頁面使用一個store

React Provider

Dart Provider

如何使用

來看看如何實現的

導航lib/widgets/NavBar/FindNavBar.dart

內容lib/containers/Find.dart

FindStore lib/stores/findStore.dart

注意

第一個頁面 demo1.dart

第二個頁面 demo2.dart

公共的Store counter.dart