Flutter基础项目模板插件starter_project的使用

Flutter基础项目模板插件starter_project的使用

什么是starter_project？

starter_project 是一个命令行工具，用于将普通的 Flutter 项目转换为带有预设文件结构和常用功能的基础项目模板。

它的功能包括：

• 创建文件夹结构
• 创建资源文件夹（如 assets）
• 添加一些文件，例如 utils, app_assets, constants 等
• 添加常用的包/插件
• 重命名项目（应用名称、包名）

使用方法

1. 在项目的 pubspec.yaml 文件中添加以下依赖项：

dev_dependencies:
  starter_project: <最新版本>

starter_project:
  app_name: "你的应用名称"
  package: "com.example.你的应用名称"

1. 在项目的目录下运行以下命令：

flutter pub get
flutter pub run starter_project

示例代码

这是一个简单的 Flutter 应用程序示例，展示了如何使用 starter_project 插件创建的基本项目结构。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试使用 "flutter run" 运行你的应用。你会看到应用有一个蓝色工具栏。
        // 然后，在不退出应用的情况下，尝试将以下 primarySwatch 改为 Colors.green 并触发 "热重载"（在控制台按 "r" 或保存更改以在 Flutter IDE 中触发）。
        // 注意，计数器不会重置回零；应用没有重新启动。
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用的主页。它是有状态的，意味着它包含影响其外观的字段。
  // 这个类是状态的配置。它保留了由父组件（在这个例子中是 App 小部件）提供的值（在这个例子中是标题）并用于构建方法的状态构建。
  // 小部件子类中的字段总是标记为 "final"。

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这次调用 setState 告诉 Flutter 框架某些东西已经改变，这会导致它重新运行下面的构建方法，
      // 以便显示可以反映更新后的值。如果我们不调用 setState 而是改变 _counter，则不会重新运行构建方法，
      // 因此看起来什么也不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用 setState 时，此方法都会重新运行。
    //
    // Flutter 框架经过优化，使重新运行构建方法变得快速，因此你可以重新构建任何需要更新的东西，而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们从 MyHomePage 对象获取值，该对象是由 App.build 方法创建的，并用于设置我们的应用栏标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是布局小部件。它接受单个子元素并将其定位在父级中间。
        child: Column(
          // Column 也是布局小部件。它接受一个子元素列表并垂直排列它们。
          // 默认情况下，它水平大小适合其子元素，并尽可能高。
          //
          // 调用 "调试绘制"（在控制台按 "p"，选择 Android Studio 中 Flutter Inspector 的 "切换调试绘制" 动作，或在 Visual Studio Code 中选择 "切换调试绘制" 命令）
          // 以查看每个小部件的线框。
          //
          // Column 有几个属性来控制其自身大小及其子元素的位置。在这里，我们使用 mainAxisAlignment 来垂直居中子元素；
          // 主轴是垂直方向，因为 Columns 是垂直的（交叉轴将是水平方向）。
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经按下了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ), // 这个尾随逗号使得自动格式化更美观。
    );
  }
}