Flutter按钮组件插件flutter_btn的使用

Flutter按钮组件插件flutter_btn的使用

特性

目前此插件展示了自定义按钮。

开始使用

  1. 在你的 pubspec.yaml 文件中添加该插件。
  2. 然后在任何你希望使用它的代码文件中导入该插件。 开心编码 😎

使用方法

查看位于 ./example 文件夹下的示例应用。

const like = 'sample';

额外信息

更多新的按钮设计即将推出 😄

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_btn/flutter_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_btn 示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '示例应用'),
    );
  }
}

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> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(child: Text(widget.title)),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经点击了按钮这么多次：',
            ),
            const SizedBox(
              height: 10,
            ),
            CustomButton(  // 使用 CustomButton 插件创建按钮
              onPressed: _incrementCounter,  // 设置按钮点击事件
              child: const Text("点击我")  // 按钮显示的文字
            ),
            const SizedBox(
              height: 10,
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        foregroundColor: Colors.white,
        backgroundColor: Colors.black,
        child: const Icon(Icons.add),
      ),
    );
  }
}

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

1 回复

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


flutter_btn 是一个用于 Flutter 的按钮组件插件，它提供了丰富的按钮样式和自定义选项，可以帮助开发者快速创建漂亮的按钮。以下是如何使用 flutter_btn 插件的基本步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_btn: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 flutter_btn 插件。

import 'package:flutter_btn/flutter_btn.dart';

3. 使用按钮组件

flutter_btn 提供了多种按钮样式，你可以根据需要选择使用。

基本按钮

FlutterBtn(
  onPressed: () {
    // 按钮点击事件
    print('Button Pressed');
  },
  text: 'Click Me',
)

自定义样式

FlutterBtn(
  onPressed: () {
    // 按钮点击事件
    print('Button Pressed');
  },
  text: 'Custom Button',
  color: Colors.blue,
  textColor: Colors.white,
  borderRadius: 10.0,
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
)

图标按钮

FlutterBtn(
  onPressed: () {
    // 按钮点击事件
    print('Button Pressed');
  },
  text: 'Icon Button',
  icon: Icons.star,
  iconColor: Colors.yellow,
)

禁用按钮

FlutterBtn(
  onPressed: null,  // 设置为 null 表示禁用
  text: 'Disabled Button',
)

4. 其他选项

flutter_btn 还提供了许多其他自定义选项，例如：

  • elevation: 按钮的阴影高度。
  • borderColor: 按钮边框颜色。
  • borderWidth: 按钮边框宽度。
  • fontSize: 按钮文字大小。
  • fontWeight: 按钮文字粗细。

你可以根据这些选项进一步定制按钮的外观。

5. 示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_btn 插件创建不同类型的按钮。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Btn Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlutterBtn(
                onPressed: () {
                  print('Basic Button Pressed');
                },
                text: 'Basic Button',
              ),
              SizedBox(height: 20),
              FlutterBtn(
                onPressed: () {
                  print('Custom Button Pressed');
                },
                text: 'Custom Button',
                color: Colors.blue,
                textColor: Colors.white,
                borderRadius: 10.0,
                padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
              ),
              SizedBox(height: 20),
              FlutterBtn(
                onPressed: () {
                  print('Icon Button Pressed');
                },
                text: 'Icon Button',
                icon: Icons.star,
                iconColor: Colors.yellow,
              ),
              SizedBox(height: 20),
              FlutterBtn(
                onPressed: null,
                text: 'Disabled Button',
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部