flutter-boilerplate-project 学习笔记

发布于:2025-08-06 ⋅ 阅读:(14) ⋅ 点赞:(0)

项目地址:

https://github.com/zubairehman/flutter_boilerplate_project/tree/master

样板包含创建新库或项目所需的最小实现。存储库代码预加载了一些基本组件,例如基本应用程序架构、应用程序主题、常量和创建新项目所需的依赖项。通过使用样板代码作为标准初始值设定项,我们可以在所有将继承它的项目中具有相同的模式。这也将有助于减少设置和开发时间,允许您使用相同的代码模式并避免从头开始重写。

代码生成

该项目使用与代码生成配合使用的库,执行以下命令生成文件:inject

flutter packages pub run build_runner build --delete-conflicting-outputs

或 watch 命令以保持源代码自动同步:

flutter packages pub run build_runner watch

隐藏生成的文件

要隐藏生成的文件,请导航到 -> -> -> 并将以下行粘贴到部分下:Android StudioPreferencesEditorFile Typesignore files and folders

*.inject.summary;*.inject.dart;*.g.dart;

在 Visual Studio Code 中,导航到 -> 并搜索 。添加以下模式:PreferencesSettingsFiles:Exclude

**/*.inject.summary
**/*.inject.dart
**/*.g.dart

国际化

多语言国际化开发

代码在线运行

https://dartpad.dev/?embed=true&split=60&run=true&sample_id=material.ListTile.2&channel=stable

Theme主题设置

默认的主题,是红色的,可以尝试调整一下主题,或者使用Material 主题。

修改

samking_pump/lib/constants/app_theme.dart

就可以实现主色调的修改了。

在这个文件中

samking_pump/lib/presentation/my_app.dart

有如下代码:


  Widget build(BuildContext context) {
    return Observer(
      builder: (context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: Strings.appName,
          theme: _themeStore.darkMode
              ? AppThemeData.darkThemeData
              : AppThemeData.lightThemeData,

这里有个return MaterialApp(…) 说明本身就是使用的是Material主题的。

使用Material默认主题

修改 samking_pump/lib/constants/app_theme.dart

  return ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      useMaterial3: true,
    );

设置主色调自动生成配色方案

  //这会根据 seedColor 自动生成一整套符合 Material 设计规范的颜色方案,非常实用。
  static ColorScheme blueLightColorScheme = ColorScheme.fromSeed(
    seedColor: Colors.blue, // 你也可以换成你喜欢的主色,比如 Colors.green
    brightness: Brightness.light,
  );

颜色查询

https://api.flutter.dev/flutter/material/Colors-class.html


网站公告

今日签到

点亮在社区的每一天
去签到