一个使用 GetX 进行状态管理的 Flutter 源模板

Flutter Getx 模板

• 这是使用 Getx 进行状态管理的 Flutter 模板 ☕

? 概述 main.dart，之后您可以自定义语言包、主题、页面和路由

import 'package:flutter/material.dart';
import 'package:flutter_postman_application/src/lang/translation_service.dart';
import 'package:flutter_postman_application/src/routes/app_pages.dart';
import 'package:flutter_postman_application/src/shared/logger/logger_utils.dart';
import 'package:flutter_postman_application/src/theme/theme_service.dart';
import 'package:flutter_postman_application/src/theme/themes.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';

void main() async {
  await GetStorage.init();
  runApp(GetMaterialApp(
    debugShowCheckedModeBanner: false,
    enableLog: true,
    logWriterCallback: Logger.write,
    initialRoute: AppPages.INITIAL,
    getPages: AppPages.routes,
    locale: TranslationService.locale,
    fallbackLocale: TranslationService.fallbackLocale,
    translations: TranslationService(),
    theme: Themes().lightTheme,
    darkTheme: Themes().darkTheme,
    themeMode: ThemeService().getThemeMode(),
  ));
}

??????? 自定义语言包

• translation_service.dart

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

import 'en_US.dart';
import 'vi_VN.dart';

class TranslationService extends Translations {
  static final locale = Get.deviceLocale;
  static final fallbackLocale = Locale('en', 'US');
  @override
  Map<String, Map<String, String>> get keys => {
        'en_US': en_US,
        'vi_VN': vi_VN,
      };
}

• en_US.dart

const Map<String, String> en_US = {
  'helloWord': 'Hello World',
};

• ? 类似于其他语言文件

? 自定义主题包

• themes.dart

import 'package:flutter/material.dart';
import 'package:flutter_postman_application/src/public/styles.dart';

class Themes {
  final lightTheme = ThemeData.light().copyWith(
    primaryColor: colorPrimary,
    appBarTheme: AppBarTheme(
      brightness: Brightness.light,
      textTheme: TextTheme(
        headline2: TextStyle(color: colorTitle),
      ),
    ),
  );
  final darkTheme = ThemeData.dark().copyWith(
    primaryColor: colorPrimary,
    appBarTheme: AppBarTheme(
      brightness: Brightness.dark,
      textTheme: TextTheme(
        headline2: TextStyle(color: mC),
      ),
    ),
  );
}

? 将主题模式保存在设备存储中

• theme_service.dart

import 'package:flutter/material.dart';
import 'package:get_storage/get_storage.dart';
import 'package:get/get.dart';

class ThemeService {
  final _getStorage = GetStorage();
  final storageKey = 'isDarkMode';

  ThemeMode getThemeMode() {
    return isSavedDarkMode() ? ThemeMode.dark : ThemeMode.light;
  }

  bool isSavedDarkMode() {
    return _getStorage.read(storageKey) ?? false;
  }

  void saveThemeMode(bool isDarkMode) {
    _getStorage.write(storageKey, isDarkMode);
  }

  void changeThemeMode() {
    Get.changeThemeMode(isSavedDarkMode() ? ThemeMode.light : ThemeMode.dark);
    saveThemeMode(!isSavedDarkMode());
  }
}

</> 为开发者记录错误

• logger_utils.dart

class Logger {
  static void write(String text, {bool isError = false}) {
    Future.microtask(() => print('** $text. isError: [$isError]'));
  }
}

? 管理路由

• app_routes.dart

part of 'app_pages.dart';

abstract class Routes {
  static const ROOT = '/root';
  static const HOME = '/home';
}

? 管理页面

• app_pages.dart

import 'package:flutter_postman_application/src/app.dart';
import 'package:get/get.dart';
part 'app_routes.dart';

// ignore: avoid_classes_with_only_static_members
class AppPages {
  static const INITIAL = Routes.ROOT;

  static final routes = [
    GetPage(
      name: Routes.ROOT,
      page: () => App(),
      children: [],
    ),
  ];
}

我该如何运行它？

• :rocket: flutter 版本 < 2.0 (1.x.x)，不支持空安全
• :rocket: 克隆此仓库
• :rocket: 在终端运行以下代码

flutter pub get
flutter run

项目中使用的库

get_test: ^3.13.3
get_storage: ^1.4.0

作者

lambiengcode

GitHub

https://github.com/hongvinhmobile/flutter_getx_template