Flutter自定义按钮插件phoenix_btn的使用

phoenix_btn

phoenix_btn 是一个为企业级项目提供的基础组件库中的按钮组件。

功能特性

phoenix_btn 提供了多种类型的按钮，包括大按钮、普通按钮、轮廓按钮等，并且可以自定义样式。

开始使用

首先，确保已经安装了 phoenix_btn 插件。在 pubspec.yaml 文件中添加依赖：

dependencies:
  phoenix_btn: ^x.x.x

然后执行 flutter pub get 来获取依赖。

接下来，初始化 BaseTotalConfig 和 ButtonTotalConfig：

import 'package:flutter/material.dart';
// ignore: depend_on_referenced_packages
import 'package:phoenix_base/phoenix.dart';
import 'package:phoenix_btn/phoenix_btn.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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    BaseTotalConfig totalConfig = BaseTotalConfig();
    ButtonTotalConfig buttonTotalConfig = ButtonTotalConfig(buttonConfig: ButtonConfig(bigButtonHeight: 80));
    buttonTotalConfig.initThemeConfig(totalConfig.commonConfig.configId);
    totalConfig.buttonTotalConfig = buttonTotalConfig;
    BaseInit.register(totalConfig: totalConfig);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const BigGhostButton(),
              const SizedBox(height: 4),
              BigMainButton(
                title: '提交',
                isEnable: false,
                onTap: () {
                  // Toast.show('点击了主按钮', context);
                },
              ),
              const SizedBox(height: 4),
              BigOutlineButton(
                title: '提交',
                isEnable: false,
                onTap: () {
                  // Toast.show('点击了BigOutlineButtonWidget', context);
                },
              ),
              const SizedBox(height: 4),
              NormalButton(
                text: '主案特别长',
                backgroundColor: Colors.blue,
                onTap: () {
                  // Toast.show('点击了主按钮', context);
                },
              ),
              const SizedBox(height: 4),
              const SmallMainButton(title: '小按钮'),
              const SizedBox(height: 4),
              const SmallOutlineButton(),
              const SizedBox(height: 4),
              const VerticalIconButton(
                name: '首页',
                iconWidget: Icon(Icons.home),
              ),
              const BigGhostButton(
                title: 'ghost button',
                width: 120,
              ),
              BottomButtonPanel(
                mainButtonName: '主按钮',
                secondaryButtonName: '次按钮',
                mainButtonOnTap: () {
                  // BrnToast.show('主按钮', context);
                },
                secondaryButtonOnTap: () {
                  // BrnToast.show('次按钮', context);
                },
                // iconButtonList: const [
                //   VerticalIconButton(
                //     name: '写备注',
                //     iconWidget: Icon(Icons.add),
                //   ),
                // ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

完整示例

import 'package:flutter/material.dart';
// ignore: depend_on_referenced_packages
import 'package:phoenix_base/phoenix.dart';
import 'package:phoenix_btn/phoenix_btn.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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    BaseTotalConfig totalConfig = BaseTotalConfig();
    ButtonTotalConfig buttonTotalConfig = ButtonTotalConfig(buttonConfig: ButtonConfig(bigButtonHeight: 80));
    buttonTotalConfig.initThemeConfig(totalConfig.commonConfig.configId);
    totalConfig.buttonTotalConfig = buttonTotalConfig;
    BaseInit.register(totalConfig: totalConfig);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const BigGhostButton(),
              const SizedBox(height: 4),
              BigMainButton(
                title: '提交',
                isEnable: false,
                onTap: () {
                  // Toast.show('点击了主按钮', context);
                },
              ),
              const SizedBox(height: 4),
              BigOutlineButton(
                title: '提交',
                isEnable: false,
                onTap: () {
                  // Toast.show('点击了BigOutlineButtonWidget', context);
                },
              ),
              const SizedBox(height: 4),
              NormalButton(
                text: '主案特别长',
                backgroundColor: Colors.blue,
                onTap: () {
                  // Toast.show('点击了主按钮', context);
                },
              ),
              const SizedBox(height: 4),
              const SmallMainButton(title: '小按钮'),
              const SizedBox(height: 4),
              const SmallOutlineButton(),
              const SizedBox(height: 4),
              const VerticalIconButton(
                name: '首页',
                iconWidget: Icon(Icons.home),
              ),
              const BigGhostButton(
                title: 'ghost button',
                width: 120,
              ),
              BottomButtonPanel(
                mainButtonName: '主按钮',
                secondaryButtonName: '次按钮',
                mainButtonOnTap: () {
                  // BrnToast.show('主按钮', context);
                },
                secondaryButtonOnTap: () {
                  // BrnToast.show('次按钮', context);
                },
                // iconButtonList: const [
                //   VerticalIconButton(
                //     name: '写备注',
                //     iconWidget: Icon(Icons.add),
                //   ),
                // ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义按钮插件phoenix_btn的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼•2 天前

更多关于Flutter自定义按钮插件phoenix_btn的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用自定义按钮插件phoenix_btn的代码示例。这个示例将展示如何安装插件、导入包、并在你的应用中创建一个自定义按钮。

1. 安装插件

首先，你需要在你的pubspec.yaml文件中添加phoenix_btn依赖。

dependencies:
  flutter:
    sdk: flutter
  phoenix_btn: ^最新版本号  # 请替换为实际的最新版本号

然后运行以下命令来安装依赖：

flutter pub get

2. 导入包

在你的Dart文件中（例如main.dart），导入phoenix_btn包。

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

3. 使用PhoenixButton

现在你可以在你的应用中创建一个自定义按钮。以下是一个完整的示例，展示了如何使用PhoenixButton。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Phoenix Button Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phoenix Button Example'),
      ),
      body: Center(
        child: PhoenixButton(
          width: 200,
          height: 50,
          onPressed: () {
            // 按钮点击后的逻辑
            print("Button clicked!");
          },
          child: Text(
            'Click Me',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
          // 自定义按钮颜色和动画
          buttonColor: Colors.blue,
          shadowColor: Colors.grey.withOpacity(0.5),
          animationDuration: 300,
        ),
      ),
    );
  }
}

4. 运行应用

确保你的开发环境已经设置好，然后运行以下命令来启动你的Flutter应用：

flutter run

现在你应该能看到一个包含自定义PhoenixButton的页面。当你点击按钮时，控制台会输出“Button clicked!”。

额外说明

phoenix_btn插件提供了多种自定义选项，比如按钮颜色、阴影颜色、动画持续时间等。你可以根据需求调整这些参数来创建符合你设计的按钮。

希望这个示例能帮助你快速上手phoenix_btn插件！如果有其他问题或需要进一步的帮助，请随时提问。