Flutter项目模板插件flutter_template的使用

flutter_template

A new Flutter package.

使用方法

要使用此包，请将其依赖添加到您的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  flutter_template:

在Dart文件中引入

import 'dart:math';

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(App());
}

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  [@override](/user/override)
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {

  ButtonStatus stateOnlyText = ButtonStatus.idle;
  ButtonStatus stateTextWithIcon = ButtonStatus.idle;

  void onPressedCustomButton() {
    switch (stateOnlyText) {
      case ButtonStatus.idle:
        stateOnlyText = ButtonStatus.loading;
        Future.delayed(Duration(seconds: 1), () {
          setState(() {
            stateOnlyText = Random.secure().nextBool()
                ? ButtonStatus.success
                : ButtonStatus.fail;
          });
        });

        break;
      case ButtonStatus.loading:
        break;
      case ButtonStatus.success:
        stateOnlyText = ButtonStatus.idle;
        break;
      case ButtonStatus.fail:
        stateOnlyText = ButtonStatus.idle;
        break;
    }
    setState(() {
      stateOnlyText = stateOnlyText;
    });
  }

  void onPressedIconWithText() {
    switch (stateTextWithIcon) {
      case ButtonStatus.idle:
        stateTextWithIcon = ButtonStatus.loading;
        Future.delayed(Duration(seconds: 1), () {
          setState(() {
            stateTextWithIcon = Random.secure().nextBool()
                ? ButtonStatus.success
                : ButtonStatus.fail;
          });
        });

        break;
      case ButtonStatus.loading:
        break;
      case ButtonStatus.success:
        stateTextWithIcon = ButtonStatus.idle;
        break;
      case ButtonStatus.fail:
        stateTextWithIcon = ButtonStatus.idle;
        break;
    }
    setState(() {
      stateTextWithIcon = stateTextWithIcon;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             // 示例1：仅文字的进度按钮
             ProgressButtonAnimation(
               maxWidth: 150,
               minWidth: 150,
               stateWidget: Text(
                 "Send",
                 style: TextStyle(
                     color: Colors.white, fontWeight: FontWeight.w500),
               ),
               stateColor: Colors.amber.shade500,
             ),
             SizedBox(
               height: 50,
             ),
             // 示例2：带状态的文字按钮
             ProgressButtonAnimation(
               onPressed: onPressedCustomButton,
               state: stateOnlyText,
               maxWidth: 150,
               stateWidgets: {
                 ButtonStatus.idle: Text(
                   "Send",
                   style: TextStyle(
                       color: Colors.white, fontWeight: FontWeight.w500),
                 ),
                 ButtonStatus.loading: Text(
                   "Loading",
                   style: TextStyle(
                       color: Colors.white, fontWeight: FontWeight.w500),
                 ),
                 ButtonStatus.fail: Text(
                   "Fail",
                   style: TextStyle(
                       color: Colors.white, fontWeight: FontWeight.w500),
                 ),
                 ButtonStatus.success: Text(
                   "Success",
                   style: TextStyle(
                       color: Colors.white, fontWeight: FontWeight.w500),
                 )
               },
               stateColors: {
                 ButtonStatus.idle: Colors.deepPurple.shade500,
                 ButtonStatus.loading: Colors.blue.shade300,
                 ButtonStatus.fail: Colors.red.shade300,
                 ButtonStatus.success: Colors.green.shade400,
               },
             ),
             SizedBox(
               height: 50,
             ),
             // 示例3：带图标的按钮
             ProgressButtonAnimation.icon(
               buttonWithIcon: ButtonWithIcon(
                   text: "Send",
                   icon: Icon(Icons.send, color: Colors.white),
                   color: Colors.deepPurple.shade500),
               maxWidth: 150,
             ),
             SizedBox(
               height: 50,
             ),
             // 示例4：带状态的带图标的按钮
             ProgressButtonAnimation.icon(
               buttonWithIcons: {
                 ButtonStatus.idle: ButtonWithIcon(
                     text: "Send",
                     icon: Icon(Icons.send, color: Colors.white),
                     color: Colors.deepPurple.shade500),
                 ButtonStatus.loading: ButtonWithIcon(
                     text: "Loading", color: Colors.blue.shade700),
                 ButtonStatus.fail: ButtonWithIcon(
                     text: "Failed",
                     icon: Icon(Icons.cancel, color: Colors.white),
                     color: Colors.red.shade300),
                 ButtonStatus.success: ButtonWithIcon(
                     text: "Success",
                     icon: Icon(
                       Icons.check_circle,
                       color: Colors.white,
                     ),
                     color: Colors.green.shade400)
               },
               onPressed: onPressedIconWithText,
               maxWidth: 150,
               state: stateTextWithIcon,
             ),
           ],
         ),
        ),
      ),
    );
  }
}

开始使用

此项目是一个 Dart 包，一个包含可以轻松共享到多个 Flutter 或 Dart 项目的库模块。

有关如何开始使用 Flutter 的帮助，请查看我们的在线文档，其中包含教程、示例、移动开发指南以及完整的 API 参考。

示例代码

// example/example.dart
import 'dart:math';

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(App());
}

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  [@override](/user/override)
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {

  ButtonStatus stateOnlyText = ButtonStatus.idle;
  ButtonStatus stateTextWithIcon = ButtonStatus.idle;

  void onPressedCustomButton() {
    switch (stateOnlyText) {
      case ButtonStatus.idle:
        stateOnlyText = ButtonStatus.loading;
        Future.delayed(Duration(seconds: 1), () {
          setState(() {
            stateOnlyText = Random.secure().nextBool()
                ? ButtonStatus.success
                : ButtonStatus.fail;
          });
        });

        break;
      case ButtonStatus.loading:
        break;
      case ButtonStatus.success:
        stateOnlyText = ButtonStatus.idle;
        break;
      case ButtonStatus.fail:
        stateOnlyText = ButtonStatus.idle;
        break;
    }
    setState(() {
      stateOnlyText = stateOnlyText;
    });
  }

  void onPressedIconWithText() {
    switch (stateTextWithIcon) {
      case ButtonStatus.idle:
        stateTextWithIcon = ButtonStatus.loading;
        Future.delayed(Duration(seconds: 1), () {
          setState(() {
            stateTextWithIcon = Random.secure().nextBool()
                ? ButtonStatus.success
                : ButtonStatus.fail;
          });
        });

        break;
      case ButtonStatus.loading:
        break;
      case ButtonStatus.success:
        stateTextWithIcon = ButtonStatus.idle;
        break;
      case ButtonStatus.fail:
        stateTextWithIcon = ButtonStatus.idle;
        break;
    }
    setState(() {
      stateTextWithIcon = stateTextWithIcon;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             ProgressButtonAnimation(
               maxWidth: 150,
               minWidth: 150,
               stateWidget: Text(
                 "Send",
                 style: TextStyle(
                     color: Colors.white, fontWeight: FontWeight.w500),
               ),
               stateColor: Colors.amber.shade500,
             ),
             SizedBox(
               height: 50,
             ),
             ProgressButtonAnimation(
               onPressed: onPressedCustomButton,
               state: stateOnlyText,
               maxWidth: 150,
               stateWidgets: {
                 ButtonStatus.idle: Text(
                   "Send",
                   style: TextStyle(
                       color: Colors.white, fontWeight: FontWeight.w500),
                 ),
                 ButtonStatus.loading: Text(
                   "Loading",
                   style: TextStyle(
                       color: Colors.white, fontWeight: FontWeight.w500),
                 ),
                 ButtonStatus.fail: Text(
                   "Fail",
                   style: TextStyle(
                       color: Colors.white, fontWeight: FontWeight.w500),
                 ),
                 ButtonStatus.success: Text(
                   "Success",
                   style: TextStyle(
                       color: Colors.white, fontWeight: FontWeight.w500),
                 )
               },
               stateColors: {
                 ButtonStatus.idle: Colors.deepPurple.shade500,
                 ButtonStatus.loading: Colors.blue.shade300,
                 ButtonStatus.fail: Colors.red.shade300,
                 ButtonStatus.success: Colors.green.shade400,
               },
             ),
             SizedBox(
               height: 50,
             ),
             ProgressButtonAnimation.icon(
               buttonWithIcon: ButtonWithIcon(
                   text: "Send",
                   icon: Icon(Icons.send, color: Colors.white),
                   color: Colors.deepPurple.shade500),
               maxWidth: 150,
             ),
             SizedBox(
               height: 50,
             ),
             ProgressButtonAnimation.icon(
               buttonWithIcons: {
                 ButtonStatus.idle: ButtonWithIcon(
                     text: "Send",
                     icon: Icon(Icons.send, color: Colors.white),
                     color: Colors.deepPurple.shade500),
                 ButtonStatus.loading: ButtonWithIcon(
                     text: "Loading", color: Colors.blue.shade700),
                 ButtonStatus.fail: ButtonWithIcon(
                     text: "Failed",
                     icon: Icon(Icons.cancel, color: Colors.white),
                     color: Colors.red.shade300),
                 ButtonStatus.success: ButtonWithIcon(
                     text: "Success",
                     icon: Icon(
                       Icons.check_circle,
                       color: Colors.white,
                     ),
                     color: Colors.green.shade400)
               },
               onPressed: onPressedIconWithText,
               maxWidth: 150,
               state: stateTextWithIcon,
             ),
           ],
         ),
        ),
      ),
    );
  }
}

更多关于Flutter项目模板插件flutter_template的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

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

flutter_template 是一个用于快速生成 Flutter 项目模板的插件或工具。它可以帮助开发者快速搭建项目结构，减少重复性工作，提高开发效率。以下是如何使用 flutter_template 插件的基本步骤：

1. 安装 `flutter_template` 插件

首先，你需要确保已经安装了 Flutter SDK，并且已经配置好了开发环境。然后，你可以通过以下方式安装 flutter_template 插件：

flutter pub global activate flutter_template

2. 创建新项目

使用 flutter_template 创建一个新的 Flutter 项目非常简单。你只需要运行以下命令：

flutter_template create <project_name>

其中 <project_name> 是你想要创建的项目名称。例如：

flutter_template create my_flutter_app

3. 选择模板

flutter_template 提供了多种项目模板供你选择。在创建项目时，你可以根据提示选择适合的模板。例如：

基础模板：包含基本的 Flutter 项目结构。
状态管理模板：集成了常见的状态管理库，如 Provider、Riverpod、Bloc 等。
网络请求模板：集成了 Dio 或 http 等网络请求库。
路由管理模板：集成了 Fluro 或 GoRouter 等路由管理库。

4. 自定义配置

在创建项目时，flutter_template 可能会询问你一些配置选项，例如是否启用空安全、是否集成某些特定的库等。你可以根据项目需求进行选择。

5. 运行项目

项目创建完成后，你可以进入项目目录并运行项目：

cd my_flutter_app
flutter run

6. 项目结构

flutter_template 生成的项目通常会包含以下目录和文件：

lib/：包含项目的 Dart 代码。
- main.dart：项目的入口文件。
- models/：数据模型。
- services/：网络请求、数据库等服务。
- screens/：页面组件。
- widgets/：可复用的 UI 组件。
- providers/ 或 blocs/：状态管理相关代码。
assets/：存放静态资源，如图片、字体等。
test/：单元测试和集成测试代码。

7. 进一步开发

根据项目需求，你可以在生成的项目基础上进行进一步的开发。flutter_template 已经为你搭建好了基本的项目结构，你可以专注于业务逻辑的实现。

8. 更新模板

如果你使用的是社区维护的 flutter_template 插件，建议定期检查更新，以获取最新的模板和改进。

flutter pub global activate flutter_template

Flutter项目模板插件flutter_template的使用

Flutter项目模板插件flutter_template的使用

flutter_template

使用方法

在Dart文件中引入

开始使用

1. 安装 flutter_template 插件

2. 创建新项目

3. 选择模板

4. 自定义配置

5. 运行项目

6. 项目结构

7. 进一步开发

8. 更新模板

1. 安装 `flutter_template` 插件