Flutter项目快速搭建插件flutter_boilerplate_tool的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter项目快速搭建插件flutter_boilerplate_tool的使用

简介

flutter_boilerplate_tool 是一个命令行工具，旨在简化 Flutter 项目的样板代码创建。它会提示用户输入主题设置和屏幕名称，并根据这些信息生成必要的文件和目录结构。

安装

要全局安装 flutter_boilerplate_tool，请使用以下命令：

dart pub global activate flutter_boilerplate_tool

或者

dart pub add flutter_boilerplate_tool

使用

要在您的 Flutter 项目目录中运行该工具，请使用：

dart run flutter_boilerplate_tool

使用示例

dart run flutter_boilerplate_tool

运行后，您将被提示配置项目：

NOTE: 这将会覆盖 main 文件和其他一些文件。您应该首先运行此命令。
是否继续？(y/N): y
项目导入包名（如 'flutter_demo_app'）: flutter_app

============ Light Theme ===========

注意：使用不带 # 的十六进制颜色代码
例如 (eeeeee, ffffff, 000000)

LightPrimaryColor: eeeeee
LightPrimaryVariantColor: eaf1ff
LightTextColor: 000000

============ Dark Theme ===========
DarkPrimaryColor: 3B3B3B
DarkPrimaryVariantColor: D4D4D4
DarkTextColor: DADADA

当前主题？(light, dark): light

============ Screens ============
注意：不要使用大写字母，只能使用下划线作为特殊字符，不需要添加 "_screen" 后缀。
例如：home, profile, settings
Screen1: splash
是否添加更多屏幕？(y/N): y
Screen2: login
是否添加更多屏幕？(y/N): y
Screen3: home
是否添加更多屏幕？(y/N): N

样板代码已成功创建。

这将根据您的输入生成必要的文件结构和样板代码。

示例代码

以下是使用 flutter_boilerplate_tool 的示例代码：

import 'package:flutter_boilerplate_tool/flutter_boilerplate_tool.dart';
import 'package:flutter_boilerplate_tool/project.dart';

void main() {
  print('正在运行 flutter_boilerplate_tool 示例...');

  Project project = Project(
    projectImportName: 'test_app',
    lightThemeColors: LightThemeColors(
      primaryColor: 'f9d6e3',
      primaryVariantColor: 'f9d6e3',
      textColor: '000000',
    ),
    darkThemeColors: DarkThemeColors(
      primaryColor: 'efacda',
      primaryVariantColor: 'f9d6e3',
      textColor: '000000',
    ),
    screens: ['home', 'profile', 'settings'],
    currentTheme: 'light',
  );

  // 调用您的 CLI 工具的主函数
  createBoilerplateCode(project);
}

更多关于Flutter项目快速搭建插件flutter_boilerplate_tool的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter项目快速搭建插件flutter_boilerplate_tool的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中，使用flutter_boilerplate_tool可以极大地加速项目的初始化过程，通过预设的模板和配置，快速搭建起一个功能完备的基础项目结构。以下是如何使用flutter_boilerplate_tool快速搭建Flutter项目的具体步骤和代码示例。

前提条件

  1. 确保你已经安装了Flutter SDK，并且配置好了开发环境。
  2. 确保你的系统中安装了Dart和Pub（通常与Flutter SDK一起安装）。

安装flutter_boilerplate_tool

首先，你需要全局安装flutter_boilerplate_tool。打开终端或命令行工具，运行以下命令：

dart pub global activate flutter_boilerplate_tool

使用flutter_boilerplate_tool创建项目

安装完成后，你可以使用flutter_boilerplate命令来创建新的Flutter项目。下面是一个基本的命令示例：

flutter_boilerplate create my_new_project

这条命令会在当前目录下创建一个名为my_new_project的新文件夹，并在其中生成一个基于模板的Flutter项目。

项目结构示例

flutter_boilerplate_tool生成的项目通常会包含以下基本结构：

my_new_project/
├── android/
├── ios/
├── lib/
│   ├── main.dart
│   ├── app/
│   │   ├── app.dart
│   │   ├── app_provider.dart
│   │   ├── app_router.dart
│   │   ├── ... (其他应用级别的组件和逻辑)
│   ├── features/
│   │   ├── feature_one/
│   │   │   ├── feature_one_screen.dart
│   │   │   ├── feature_one_bloc.dart
│   │   │   ├── ... (其他功能特定的组件和逻辑)
│   │   ├── feature_two/
│   │   │   ...
│   ├── ui/
│   │   ├── themes/
│   │   ├── widgets/
│   │   │   ├── custom_button.dart
│   │   │   ├── ... (其他自定义UI组件)
│   ├── utils/
│   │   ├── constants.dart
│   │   ├── extensions.dart
│   │   ├── ... (其他工具类和扩展)
├── pubspec.yaml
├── README.md
├── ... (其他配置文件)

main.dart 示例代码

main.dart通常是应用的入口文件，flutter_boilerplate_tool可能会为你生成一个类似下面的基础结构：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:my_new_project/app/app.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        // 提供应用级别的依赖，如BLoC、服务等
        ChangeNotifierProvider(create: (_) => AppProvider()),
      ],
      child: MaterialApp(
        title: 'My New Project',
        theme: ThemeData(
          // 设置应用主题
        ),
        home: AppRouter(), // 使用路由组件作为主页面
      ),
    ),
  );
}

AppRouter.dart 示例代码

AppRouter.dart可能负责应用的路由管理，示例如下：

import 'package:flutter/material.dart';
import 'package:my_new_project/features/feature_one/feature_one_screen.dart';
import 'package:my_new_project/features/feature_two/feature_two_screen.dart';

class AppRouter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settings) {
        switch (settings.name) {
          case '/':
            return MaterialPageRoute(builder: (_) => FeatureOneScreen());
          case '/feature_two':
            return MaterialPageRoute(builder: (_) => FeatureTwoScreen());
          default:
            return MaterialPageRoute(builder: (_) => Scaffold(body: Center(child: Text('404 Not Found'))));
        }
      },
    );
  }
}

总结

flutter_boilerplate_tool通过预设的模板和自动化脚本，大大简化了Flutter项目的初始化过程。你可以根据自己的需求进一步定制生成的项目结构，并添加具体的业务逻辑和功能。上述示例代码展示了如何使用该工具快速搭建项目，并给出了main.dart和AppRouter.dart的基础实现。

回到顶部