用GetX寫了一個待辦事項

在使用了 Provider 一年後，遇到了很多阻力，期間嘗試過 BLoC 、MobX ，均不如意，一個樣本代碼太多，使用複雜，一個生產代碼要等很久。難道 Flutter 就沒有諸如原生 Android 的 jetpack 套裝一樣方便的套件嗎？後來開始嘗試 GetX，才發現真香，正如作者所說：

GetX是Flutter的超輕便且強大的解決方案。它以快速實用的方式結合了高性能狀態管理，智能依賴性注入和路由管理。

我寫了一個demo探索過了基本使用方式之後，又決定寫一個待辦清單app 實踐一下 Clean Architecture 。

首先感謝下鴻洋大佬的 todo api，第一版是利用 api 開發的一個在線應用，後來在不註冊的情況下，加入 moor 數據庫，可以離線使用。這一部分改的倉促，下一期迭代會改進。

項目依賴和結構

dependencies:
  flutter:
    sdk: flutter
  cookie_jar: ^1.0.1
  cupertino_icons: ^1.0.0
  date_format: ^1.0.9
  dio: ^3.0.10
  dio_cookie_manager: ^1.0.0
  dio_http_cache: ^0.2.11
  flutter_slidable: ^0.5.7
  get: ^3.21.2
  google_fonts: ^1.1.1
  moor: ^3.4.0
  path: ^1.7.0
  path_provider: ^1.6.24
  pull_to_refresh: ^1.6.3
  shared_preferences: ^0.5.12+4
  table_calendar: ^2.3.1

項目網絡模塊封裝了 dio，因爲是帶 cookie 的請求，所以加入了 cookie 和本地化，算是一個比較完善的請求模塊。

數據庫選用了 moor ，Android 中 room 的字母倒過來就是這個，和 room 一樣可以響應式，十分優秀。

剩下的第三方包就是分頁和側滑控件，還有一個日曆包。

整體項目的結構參考getx_pattern，又按照自己的習慣做了修改。

從 GetX 開始開發

使用 GetX

void main() async {
  runApp(GetMaterialApp(
    debugShowCheckedModeBanner: false,
    initialRoute: '/',
    builder: (context, child) => Scaffold(
      // Global GestureDetector that will dismiss the keyboard
      body: GestureDetector(
        onTap: () {
          hideKeyboard(context);
        },
        child: child,
      ),
    ),
    theme: appThemeData,
    defaultTransition: Transition.fade,
    getPages: AppPages.pages,
    initialBinding: SplashBinding(),
    home: SplashPage(),
  ));
}

命名路由

要使用完整的路由功能，需要把 MaterialApp 替換爲 GetMaterialApp ，中間加入的builder 是爲了解決點擊空白處隱藏鍵盤的需求，這個在原生也很常見。

  static final pages = [
    GetPage(
      name: Routes.LOGIN,
      page: () => LoginPage(),
      binding: LoginPageBinding(),
    ),
    GetPage(
      name: Routes.SPLASH,
      page: () => SplashPage(),
      binding: SplashBinding(),
    ),
    GetPage(
      name: Routes.SIGN_UP,
      page: () => SignUpPage(),
      binding: SiginUpBinding(),
    ),
    GetPage(
      name: Routes.TASK,
      page: () => TaskPage(),
      binding: TaskBinding(),
    ),
    GetPage(
      name: Routes.TASK_ADD,
      page: () => AddTaskPage(),
      binding: AddTaskBinding(),
    ),
    GetPage(
      name: Routes.TASK_DETAILS,
      page: () => TaskDetailsPage(),
    ),
    GetPage(
      name: Routes.TASK_EDIT,
      page: () => EditTaskPage(),
      binding: EditTaskBinding(),
    ),
    GetPage(
      name: Routes.TASK_MOTHLY,
      page: () => MonthlyPage(),
      binding: MonthlyBinding(),
    ),
    GetPage(
      name: Routes.PROFILE,
      page: () => ProfilePage(),
    ),
  ];
}

習慣了使用命名路由，所以定義了路由表。binding是 GetX 中我特別喜歡的功能——依賴注入，就像原生的 Hilt 一樣，讓代碼結構無侵分層。並且如果使用的是流或計時器，它們將自動關閉，開發者根據不用擔心。Binding 類是一個解耦依賴注入的類，在路由的時候使用。就可以知道注入的作用域，以及知道在何處以及如何處置注入的對象。

登錄

api 是玩安卓的開放 api，登錄要使用 api 和 repository，所以依賴注入的形式注入:

class LoginPageBinding implements Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => LoginApi());
    Get.lazyPut(() => LoginRepository());
    Get.lazyPut<LoginController>(
      () => LoginController(),
    );
  }
}

在使用的時候直接 find：

  final LoginRepository repository = Get.find<LoginRepository>();

Get.put（）是最常見的注入依賴的方法，它是直接注入到內存裏。你可以在任何地方找到注入的對象，這是 Provider 所沒有的功能。

僅有put還不夠，GetX 還提供另外一個方法，Get.lazyPut可以懶加載一個依賴，這樣它只有在使用時纔會被實例化。這對於計算代價高的類來說非常有用，或者如果你想在一個地方實例化幾個類（比如在 Bindings 類中），但是不知道會不會使用到，那懶加載是正確的選擇，是不是很像 kotlin 的 lazy。

顯示密碼的功能暫時未加。

在歡迎頁會注入全局的依賴，然後判斷是否登錄，對應不同的導航：

  @override
  void onReady() async {
    super.onReady();
    await GloabConfig.init();
    await DenpendencyInjection.init();
    LoginProvider loginProvider = Get.find<LoginProvider>();
    print(loginProvider);
    // 如果未登錄就登錄
    // 如果已登錄就去task頁面
    if (loginProvider.isLogin()) {
      Get.offNamed(Routes.TASK);
    } else {
      Get.offNamed(Routes.LOGIN);
    }
  }
}

Task 列表

主頁實現了底部導航和嵌入式FloatingActionButtonLocation，沒有任務的時候會彈出使用引導。點擊加號可以添加任務。因爲 api 是分頁的，所以也做了分頁處理。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('My Task')),
      body: Body(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Get.toNamed(Routes.TASK_ADD);
        },
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconButton(
              icon: Icon(Icons.calendar_today_sharp),
              onPressed: () {
                Get.toNamed(Routes.TASK_MOTHLY);
              },
            ),
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {
                Get.toNamed(Routes.PROFILE);
              },
            ),
          ],
        ),
      ),
    );
  }
}

任務 item可以點擊進入詳情和側滑，有兩個側滑菜單，編輯和刪除，對應不同的功能，圓形的checkbox可以完成任務，任務標題和時間在完成時會有刪除線。

GetView 就是封裝的StatelessWidget,內部有一個 get方法便捷的獲取注入的controller，這樣連獲取的步驟都能省略。

增加和編輯

對應的標題是必須項，描述可以爲空，時間是默認當前，優先級有高低中三個，默認是中。

選擇日期會彈出日曆你，採用局部刷新，提高性能，update([updateDateId])函數的參數是一個 id，只會刷新對應 id 的 GetBuilder,並且 GetX 不受 InheritedWidget的限制，所以可以在任意地方引用未被內存回收的 Controller，所以可以在編輯頁面，讓列表頁也同時刷新。

  void handleDatePicker() async {
    final datePick = await showDatePicker(
        context: Get.context,
        firstDate: DateTime(2000),
        initialDate: _dateTime,
        lastDate: DateTime(2100));
    if (datePick != null && datePick != _dateTime) {
      _dateTime = datePick;
      task.dateStr = _dateTime.format();
      dateTimeController.text = task.dateStr;
      update([updateDateId]);
    }
  }

  void submit() async {
    if (formKey.currentState.validate()) {
      formKey.currentState.save();
      try {
        Get.loading();
        await _taskRepository.updateTask(task);
        Get.dismiss();
        // 刷新列表頁
        Get.find<TaskController>().update();
        // controller.updateTask(task);
        Get.back();
      } catch (e) {
        print(e);
        Get.dismiss();
        Get.snackbar('Error', e.toString());
      }
    }
  }

月份視圖

月份視圖用了table_calendar包，這個包功能強大，可以定製日曆視圖。默認顯示兩週，點擊月份展開四周的月份視圖。可以按日期篩選出任務。這裏的任務可以點擊進入詳情和點擊checkbox更改狀態。

TableCalendar(
          onDaySelected: (DateTime day, _, __) {
            controller.selectedDate(day);
          },
          calendarController: controller.calendarController,
          startingDayOfWeek: StartingDayOfWeek.monday,
          initialCalendarFormat: CalendarFormat.week,
          calendarStyle: CalendarStyle(
            selectedColor: Theme.of(context).accentColor,
          ),
        )

這裏更改狀態後，同樣可以拿到列表頁的Controller去更新列表頁：

modifyTaskStatus(Task task) async {
    try {
      TaskController taskController = Get.find<TaskController>();
      await taskController.modifyTaskStatus(task);
    } catch (e) {}
    update();
  }

個人中心

個人中心是一個靜態頁面，最下面展示了我寫的 GetX 的 demo 截圖。點擊放大的功能放在迭代裏做吧。

這裏藏有福利，一個漂亮的二次元萌妹子。

擴展函數

在 utils文件夾下寫了兩個擴展函數，擴展了日期格式化和基於 GetX 的全局加載框。

extension DateExtension on DateTime {
  String format() {
    return formatDate(this, [
      yyyy,
      '-',
      mm,
      '-',
      dd,
    ]);
  }
}

extension GetExtension on GetInterface {
  dismiss() {
    if (Get.isDialogOpen) {
      Get.back();
    }
  }

  loading() {
    if (Get.isDialogOpen) {
      Get.back();
    }
    Get.dialog(LoadingDialog());
  }
}

使用也很簡單，但不要忘了要導入擴展函數類：

dateTime.format()；

      Get.loading();
            。。。。。。
      Get.dismiss();

GetService

GetService 我的理解是類似服務，比如 SharedPreferences、Database，還有需要異步初始化的類，放在這裏注入非常合適：

  TaskDao init() {
    TaskDatabase database = TaskDatabase();
    return TaskDao(database);
  }
}

class AppSpController extends GetxService {
  Future<SharedPreferences> init() async {
    return await SharedPreferences.getInstance();
  }
}

同步的就用同步方法注入：

    // 數據庫
    Get.put(TaskDaoController().init());

異步的用異步方法注入：

    // shared_preferences
    await Get.putAsync(() => AppSpController().init());

數據庫 moor 的使用

Android 通過 room 給開發帶來的便利，用過的都知道。moor 就是 Flutter 上的 room。

Moor 使用 Dart 的源代碼生成器生成代碼，我們可以用函數式的調用操作數據庫。這也是需要 moor_generator 依賴項以及 build_runner 的原因。

moor 優點之一是我們可以完全使用 Dart 操作數據庫，而不必寫數據庫語句。這也適用於定義SQL表。創建一個表示 table 的類即可。

class Tasks extends Table {
  // 可空類型
  IntColumn get completeDate => integer().nullable()();
  TextColumn get completeDateStr => text().nullable()();
  TextColumn get content => text().nullable()();

  // 爲空自動生成默認值
  IntColumn get date =>
      integer().clientDefault(() => DateTime.now().millisecondsSinceEpoch)();

  // 爲空自動生成默認值
  TextColumn get dateStr =>
      text().nullable().clientDefault(() => DateTime.now().format())();

  // 主鍵
  IntColumn get id => integer().nullable().autoIncrement()();

  // 爲空自動生成默認值
  IntColumn get priority => integer().nullable().withDefault(Constant(0))();

  // 爲空自動生成默認值
  IntColumn get status => integer().nullable().withDefault(Constant(0))();

  TextColumn get title => text()();

  IntColumn get type => integer().withDefault(Constant(0))();

  IntColumn get userId => integer().nullable()();
}

@UseMoor(tables: [Tasks], daos: [TaskDao])
class TaskDatabase extends _$TaskDatabase {
  // we tell the database where to store the data with this constructor
  TaskDatabase() : super(_openConnection());

  // you should bump this number whenever you change or add a table definition. Migrations
  // are covered later in this readme.
  @override
  int get schemaVersion => 1;
}

LazyDatabase _openConnection() {
  // the LazyDatabase util lets us find the right location for the file async.
  return LazyDatabase(() async {
    // put the database file, called db.sqlite here, into the documents folder
    // for your app.
    final dbFolder = await getApplicationDocumentsDirectory();
    final file = File(join(dbFolder.path, 'db.sqlite'));
    return VmDatabase(file);
  });
}

數據庫操作寫在這裏也可以，但是會顯得臃腫，moor 還提供 Dao ,把操作放在 Dao 類是個好習慣：


@UseDao(tables: [Tasks])
class TaskDao extends DatabaseAccessor<TaskDatabase> with _$TaskDaoMixin {
  TaskDao(TaskDatabase db) : super(db);

  /// 獲取全部
  Future<List<Task>> get getAllTasks => select(tasks).get();

  ///imit查詢來限制返回的結果數量
  ///offset偏移量
  Future<List<Task>> getTasks(int limit, {int offset}) {
    return (select(tasks)..limit(limit, offset: offset)).get();
  }

  ///imit查詢來限制返回的結果數量
  ///offset偏移量
  Future<List<Task>> getTasksWithDateStr(String dateStr) {
    return (select(tasks)..where((e) => e.dateStr.equals(dateStr))).get();
  }

  /// 獲取單個數據
  /// 沒必要用list
  Future<Task> getTaskById(int id) {
    return (select(tasks)..where((t) => t.id.equals(id))).getSingle();
  }

  Future<bool> updateTask(Task entry) {
    TasksCompanion();

    return update(tasks).replace(entry);
  }

  Future<int> createOrUpdateUser(String title,
      {String content, String date, int type = 0, int priority = 0}) {
    return into(tasks).insertOnConflictUpdate(TasksCompanion(
      title: Value(title),
      content: Value(content),
      dateStr: Value(date),
      type: Value(type),
      priority: Value(priority),
    ));
  }

  Future<Task> createTask(TasksCompanion task) async {
    var id = await into(tasks).insertOnConflictUpdate(task);
    return getTaskById(id);
  }

  /// 批量插入
  Future<void> insertMultipleTasks(List<Task> entries) async {
    await batch((batch) {
      batch.insertAll(tasks, entries);
    });
  }

  Future<int> deleteTaskById(int id) {
    return (delete(tasks)..where((t) => t.id.equals(id))).go();
  }

  Future<int> deleteTask(Task entry) {
    return delete(tasks).delete(entry);
  }

  Future<Task> modifyStatusByid(int id, int status) async {
    // into(tasks).up
    Task task = await getTaskById(id);
    task.copyWith(
      status: status,
    );
    await updateTask(task);
    return task;
  }

  Future<bool> modifyTask(Task task) {
    return update(tasks).replace(task);
  }

  /// 表中數據改變，會發生一個流
  Stream<List<Task>> watchEntriesInCategory() {
    return select(tasks).watch();
  }
}

總結

從路由管理到依賴注入，再到狀態管理，還有 Service ，這個應用都應用到了，並輕鬆的實現了代碼解耦。再加上騷粉的 UI ,是不錯新手學習項目。

todo：

顯示密碼
退出登錄
拆分網絡請求和本地存儲
個人中心大圖瀏覽
國際化
切換主題
修改圖標
。。。

源碼傳送門

用GetX寫了一個待辦事項

項目依賴和結構

從 GetX 開始開發

使用 GetX

命名路由

登錄

Task 列表

增加和編輯

月份視圖

個人中心

擴展函數

GetService

數據庫 moor 的使用

總結

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

【2024-05-21】以茶會友

從源碼解讀Flutter構建

Flutter項目google_ml_kit接入

Flutter問題收集

Flutter動畫心動的感覺 Flutter動畫心動的感覺

前後端數據傳輸安全——加密淺析加密

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結