Flutter网页按钮样式插件flutter_web_buttons的使用

插件简介

flutter_web_buttons 是一个可以快速为你的应用添加多种可定制的扁平或动画按钮的插件。该插件支持大多数常用的社交图标，并且按钮可以作为Hero动画使用。

特性

每个按钮都有自己的构造函数，提供了丰富的自定义选项。
包含了大多数常用的社交图标。
支持Hero动画。

安装

在 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  flutter_web_buttons: <latest_version>

在你的库中添加以下导入语句：

import 'package:flutter_web_buttons/flutter_web_buttons.dart';

基本使用

以下是一个简单的例子，展示了如何创建一个带有滚动文本效果的按钮：

FlutterWebButton.textScroll(
  'Text Scroll',
  onPressed: () {},
  animationDuration: const Duration(milliseconds: 500),
  flutterWebButtonOptions: FlutterWebButtonOptions(
      buttonWidth: 200,
      buttonRadius: 30,
      textColor: Colors.pink,
      buttonBackgroundColor: Colors.transparent,
      buttonBorderColor: Colors.pink),
),

示例

动画按钮

背景颜色变化

FlutterWebButton.backgroundColorChange(
  'Background Color',
  onPressed: () {
    debugPrint('Button Pressed');
  },
  flutterWebButtonOptions: FlutterWebButtonOptions(
      buttonWidth: 200,
      buttonRadius: 8,
      boxShadowColor: Colors.black.withOpacity(.8)),
),

背景填充

FlutterWebButton.backgroundFill(
  'Background Fill',
  onPressed: () {},
  animationDuration: const Duration(milliseconds: 500),
  flutterWebButtonOptions: FlutterWebButtonOptions(buttonWidth: 200),
),

按钮放大

FlutterWebButton.grow(
  'Button Grow',
  onPressed: () {
    debugPrint(txtKey.currentContext!.size!.width.toString());
  },
  flutterWebButtonOptions: FlutterWebButtonOptions(
    buttonWidth: 200,
  ),
),

文字上升动画

FlutterWebButton.raiseText(
  'Raise Text',
  onPressed: () {},
  flutterWebButtonOptions: FlutterWebButtonOptions(
    buttonWidth: 200,
    buttonRadius: 30,
  ),
),

文本滚动

FlutterWebButton.textScroll(
  'Text Scroll',
  onPressed: () {},
  flutterWebButtonOptions: FlutterWebButtonOptions(
    buttonWidth: 200,
    textColor: const Color(0xFF2A2C2B),
    buttonBackgroundColor: Colors.transparent,
    buttonBorderColor: const Color(0XFF2E7D32),
    buttonRadius: 30,
  ),
),

简单按钮

FlutterWebButton.simple(
  'Simple With Hero',
  onPressed: () {
    Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => const HeroPage()));
  },
  flutterWebButtonOptions: FlutterWebButtonOptions(
    buttonWidth: 200,
    heroTag: 'herotag',
    isHeroWidget: true,
  ),
),

社交图标按钮

社交图标

FlutterWebButton.socialIcon(
  flutterWebButtonSocialIcon: FlutterWebButtonSocialIcon.instagram,
  onPressed: () {},
  flutterWebIconOptions: FlutterWebIconOptions(color: Colors.pink),
),

社交图标放大

FlutterWebButton.socialIconGrow(
  flutterWebButtonSocialIcon: FlutterWebButtonSocialIcon.github,
  onPressed: () {},
  flutterWebIconOptions: FlutterWebIconOptions(),
),

图标放大

FlutterWebButton.iconGrow(
  icon: Icons.favorite,
  onPressed: () {},
  growAmount: 2,
  flutterWebIconOptions: FlutterWebIconOptions(color: Colors.red),
),

文本动画

文本颜色变化

FlutterWebButton.textColorChange(
  'Text Color Change',
  onPressed: () {},
  textAnimatedColor: const Color(0XFF2E7D32),
  flutterWebButtonOptions: FlutterWebButtonOptions(
    buttonWidth: 200,
    eliminateDecoration: true,
    textColor: const Color(0xFF2A2C2B),
    fontSize: 24,
  ),
),

下划线动画

FlutterWebButton.textUnderline(
  'Underline Animation Default',
  onPressed: () {},
  animationDuration: const Duration(milliseconds: 500),
  flutterTextOptions: FlutterTextOptions(fontSize: 24),
),

移动文本

FlutterWebButton.textMove(
  'Move Text',
  onPressed: () {},
  moveDistanceX: 5,
  flutterTextOptions: FlutterTextOptions(fontSize: 24),
)

按钮自定义属性

动画属性

某些属性可能不适用于所有按钮。

动画特定属性	可用性
动画持续时间	所有动画按钮
动画文字颜色	按钮特定
动画背景颜色	按钮特定
growAmount	仅适用于增长效果按钮

装饰属性

FlutterWebButtonOptions	FlutterWebIconButtonOptions
Height	Icon Size
Width	Icon Color
Background Color	Padding
Text Color	Hero Tag
Font Size	IsHeroWidget
Font Family
Padding
Eliminate Decoration
Button Radius
Border Color
Border Width
Shadow Color
Spread Radius
Blur Radius
Shadow Offset
Hero Tag
IsHeroWidget

完整示例代码

以下是完整的示例代码，展示了如何在一个Flutter应用中使用这些按钮：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Buttons Example',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: const MyHomePage(title: 'Flutter Web Buttons Demo Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey txtKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FlutterWebButton.backgroundColorChange(
                  'Background Color',
                  onPressed: () {
                    debugPrint('Button Pressed');
                  },
                  flutterWebButtonOptions: FlutterWebButtonOptions(
                      buttonWidth: 200,
                      buttonRadius: 8,
                      boxShadowColor: Colors.black.withOpacity(.8)),
                ),
                FlutterWebButton.backgroundFill('Background Fill',
                    onPressed: () {},
                    animationDuration: const Duration(milliseconds: 500),
                    flutterWebButtonOptions: FlutterWebButtonOptions(buttonWidth: 200)),
                FlutterWebButton.grow(
                  'Button Grow',
                  onPressed: () {
                    debugPrint(txtKey.currentContext!.size!.width.toString());
                  },
                  flutterWebButtonOptions: FlutterWebButtonOptions(
                    buttonWidth: 200,
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FlutterWebButton.raiseText(
                  'Raise Text',
                  onPressed: () {},
                  flutterWebButtonOptions: FlutterWebButtonOptions(
                    buttonWidth: 200,
                    buttonRadius: 30,
                  ),
                ),
                FlutterWebButton.textScroll(
                  'Text Scroll',
                  onPressed: () {},
                  flutterWebButtonOptions: FlutterWebButtonOptions(
                    buttonWidth: 200,
                    textColor: const Color(0xFF2A2C2B),
                    buttonBackgroundColor: Colors.transparent,
                    buttonBorderColor: const Color(0XFF2E7D32),
                    buttonRadius: 30,
                  ),
                ),
                FlutterWebButton.simple(
                  'Simple With Hero',
                  onPressed: () {
                    Navigator.of(context).push(MaterialPageRoute(
                        builder: (context) => const HeroPage()));
                  },
                  flutterWebButtonOptions: FlutterWebButtonOptions(
                    buttonWidth: 200,
                    heroTag: 'herotag',
                    isHeroWidget: true,
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FlutterWebButton.simpleIcon(
                  icon: Icons.menu,
                  onPressed: () {},
                  flutterWebIconOptions: FlutterWebIconOptions(color: Colors.black),
                ),
                FlutterWebButton.socialIcon(
                  flutterWebButtonSocialIcon: FlutterWebButtonSocialIcon.instagram,
                  onPressed: () {},
                  flutterWebIconOptions: FlutterWebIconOptions(color: Colors.pink),
                ),
                FlutterWebButton.socialIconGrow(
                  flutterWebButtonSocialIcon: FlutterWebButtonSocialIcon.github,
                  onPressed: () {},
                  flutterWebIconOptions: FlutterWebIconOptions(),
                ),
                FlutterWebButton.iconGrow(
                  icon: Icons.favorite,
                  onPressed: () {},
                  growAmount: 2,
                  flutterWebIconOptions: FlutterWebIconOptions(color: Colors.red),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FlutterWebButton.textColorChange(
                  'Text Color Change',
                  onPressed: () {},
                  textAnimatedColor: const Color(0XFF2E7D32),
                  flutterWebButtonOptions: FlutterWebButtonOptions(
                    buttonWidth: 200,
                    eliminateDecoration: true,
                    textColor: const Color(0xFF2A2C2B),
                    fontSize: 24,
                  ),
                ),
                FlutterWebButton.textUnderline(
                  'Underline Animation Default',
                  onPressed: () {},
                  animationDuration: const Duration(milliseconds: 500),
                  flutterTextOptions: FlutterTextOptions(fontSize: 24),
                ),
                FlutterWebButton.textUnderline(
                  'Underline Animation Center',
                  onPressed: () {},
                  flutterTextOptions: FlutterTextOptions(fontSize: 24),
                  animationCrossAxisAlignment: CrossAxisAlignment.center,
                ),
                FlutterWebButton.textMove(
                  'Move Text',
                  onPressed: () {},
                  moveDistanceX: 5,
                  flutterTextOptions: FlutterTextOptions(fontSize: 24),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FlutterWebButton.buttonHighlightIconFill(
                    'Icon With Background Fill',
                    icon: Icons.add,
                    onPressed: () {},
                    flutterTextOptions: FlutterTextOptions(
                      fontSize: 20,
                    )),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FlutterWebButton.textUnderline(
                  'Underline Animation',
                  onPressed: () {},
                  animationDuration: const Duration(milliseconds: 500),
                  flutterTextOptions: FlutterTextOptions(fontSize: 24),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class HeroPage extends StatelessWidget {
  const HeroPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hero Page')),
      body: Center(
        child: Hero(
          tag: 'herotag',
          child: Container(
            width: double.infinity,
            height: 400,
            color: Colors.pink,
            child: const Center(
              child: Text(
                'This is a hero!',
                style: TextStyle(fontSize: 50, color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

bupafengyu 1楼

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

flutter_web_buttons 是一个用于在 Flutter Web 应用中创建和自定义按钮的插件。它提供了一系列预定义的按钮样式和配置选项，使得开发者可以快速构建符合网页设计规范的按钮。以下是如何使用 flutter_web_buttons 插件的详细步骤：

1. 添加依赖项

首先，你需要在 pubspec.yaml 文件中添加 flutter_web_buttons 依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_web_buttons: ^latest_version

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

2. 导入包

在需要使用 flutter_web_buttons 的地方导入包：

import 'package:flutter_web_buttons/flutter_web_buttons.dart';

3. 使用 `WebButton`

WebButton 是该插件提供的主要组件。你可以通过传递不同的参数来自定义按钮的外观和行为。

基本使用

WebButton(
  onPressed: () {
    // 按钮点击事件
    print('Button Pressed!');
  },
  child: Text('Click Me'),
)

自定义样式

你可以通过 style 参数来定制按钮的样式：

WebButton(
  onPressed: () {
    print('Button Pressed!');
  },
  style: WebButtonStyle(
    backgroundColor: Colors.blue,
    textColor: Colors.white,
    borderRadius: BorderRadius.circular(8.0),
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  ),
  child: Text('Custom Styled Button'),
)

禁用按钮

你可以通过 enabled 参数来禁用按钮：

WebButton(
  onPressed: () {
    print('Button Pressed!');
  },
  enabled: false,
  child: Text('Disabled Button'),
)

其他样式

WebButtonStyle 提供了多种自定义选项，例如：

backgroundColor: 按钮背景颜色
textColor: 按钮文本颜色
borderRadius: 按钮圆角
padding: 按钮内边距
borderColor: 按钮边框颜色
hoverColor: 鼠标悬停时的背景颜色
splashColor: 点击时的水波纹颜色

4. 处理按钮点击事件

onPressed 是按钮点击事件的回调函数。你可以在这里处理按钮点击后的逻辑：

WebButton(
  onPressed: () {
    // 处理按钮点击事件
    Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()));
  },
  child: Text('Navigate to Next Page'),
)

5. 完整示例

以下是一个完整的示例，展示了如何使用 flutter_web_buttons 创建和自定义按钮：

import 'package:flutter/material.dart';
import 'package:flutter_web_buttons/flutter_web_buttons.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 Web Buttons Example'),
        ),
        body: Center(
          child: WebButton(
            onPressed: () {
              print('Button Pressed!');
            },
            style: WebButtonStyle(
              backgroundColor: Colors.blue,
              textColor: Colors.white,
              borderRadius: BorderRadius.circular(8.0),
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            ),
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

Flutter网页按钮样式插件flutter_web_buttons的使用

Flutter网页按钮样式插件flutter_web_buttons的使用

插件简介

特性

安装

基本使用

示例

动画按钮

背景颜色变化

背景填充

按钮放大

文字上升动画

文本滚动

简单按钮

社交图标按钮

社交图标

社交图标放大

图标放大

文本动画

文本颜色变化

下划线动画

移动文本

按钮自定义属性

动画属性

装饰属性

完整示例代码

1. 添加依赖项

2. 导入包

3. 使用 WebButton

基本使用

自定义样式

禁用按钮

其他样式

4. 处理按钮点击事件

5. 完整示例

3. 使用 `WebButton`