Flutter动画按钮栏插件animated_button_bar的使用

animated_button_bar 是一个Flutter库，允许你创建一组带有选择动画效果的按钮。

入门指南

要在项目中使用 animated_button_bar ，你需要先在项目的 pubspec.yaml 文件中添加依赖：

dependencies:  
  animated_button_bar: ^0.0.2

然后，在你的Dart文件中导入此包：

import 'package:animated_button_bar/animated_button_bar.dart';

使用方法

以下是一个完整的示例代码，展示了如何使用 AnimatedButtonBar 创建动画按钮栏：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AnimatedButtonBar',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue, brightness: Brightness.dark),
      home: SampleView(),
    );
  }
}

class SampleView extends StatefulWidget {
  @override
  _SampleViewState createState() => _SampleViewState();
}

class _SampleViewState extends State<SampleView> {
  AnimatedButtonController _controller = AnimatedButtonController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey.shade900,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //inverted selection button bar
          AnimatedButtonBar(
            radius: 8.0,
            padding: const EdgeInsets.all(16.0),
            invertedSelection: true,
            children: [
              ButtonBarEntry(
                  onTap: () => print('First item tapped'), child: Text('Day')),
              ButtonBarEntry(
                  onTap: () => print('Second item tapped'),
                  child: Text('Week')),
              ButtonBarEntry(
                  onTap: () => print('Third item tapped'),
                  child: Text('Month')),
              ButtonBarEntry(
                  onTap: () => print('Fourth item tapped'), child: Text('Year'))
            ],
          ),
          //You can populate it with different types of widgets like Icon
          AnimatedButtonBar(
            radius: 32.0,
            padding: const EdgeInsets.all(16.0),
            backgroundColor: Colors.blueGrey.shade800,
            foregroundColor: Colors.blueGrey.shade300,
            elevation: 24,
            borderColor: Colors.white,
            borderWidth: 2,
            innerVerticalPadding: 16,
            children: [
              ButtonBarEntry(
                  onTap: () => print('First item tapped'),
                  child: Icon(Icons.person)),
              ButtonBarEntry(
                  onTap: () => print('Second item tapped'),
                  child: Icon(Icons.people)),
            ],
          ),
          AnimatedButtonBar(
            controller: _controller,
            radius: 32.0,
            padding: const EdgeInsets.all(16.0),
            backgroundColor: Colors.blueGrey.shade800,
            foregroundColor: Colors.blueGrey.shade300,
            elevation: 24,
            borderColor: Colors.white,
            borderWidth: 2,
            innerVerticalPadding: 16,
            children: [
              ButtonBarEntry(
                  onTap: () => print('First item tapped'),
                  child: Icon(Icons.sunny)),
              ButtonBarEntry(
                  onTap: () => print('Second item tapped'),
                  child: Icon(Icons.nightlight_round)),
            ],
          ),
          ElevatedButton(
              onPressed: () {
                _controller.setIndex(_controller.index == 0 ? 1 : 0);
              },
              child: Text('Set index'))
        ],
      ),
    );
  }
}

参数说明

以下是 AnimatedButtonBar 的参数及其默认值：

参数	描述	默认值
animationDuration	点击时的动画持续时间	const Duration(milliseconds: 200)
backgroundColor	组件的主要颜色	Theme.of(context).backgroundColor
borderColor	边框颜色	null
borderWidth	边框宽度	borderColor != null ? 1.0 : 0.0;
children	要显示的 `ButtonBarEntry` 列表	required
curve	动画曲线	Curves.fastOutSlowIn
elevation	阴影高度	0
foregroundColor	选中的颜色	Theme.of(context).accentColor
invertedSelection	是否反转选择样式	false
radius	圆角半径	0.0
verticalPadding	内边距的高度	8.0

通过这些参数，你可以自定义 AnimatedButtonBar 的外观和行为，以满足你的应用需求。

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

itying888 1楼•2 天前

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

当然，下面是一个关于如何在Flutter中使用animated_button_bar插件的示例代码。这个插件允许你创建一个带有动画效果的按钮栏。为了演示这个插件的使用，你需要首先在你的pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_button_bar: ^x.y.z  # 请将x.y.z替换为最新版本号

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

接下来，你可以在你的Flutter应用中使用AnimatedButtonBar。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:animated_button_bar/animated_button_bar.dart'; // 导入插件

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

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;

  void _onTabSelected(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedButtonBar Demo'),
      ),
      body: Center(
        child: AnimatedButtonBar(
          alignment: MainAxisAlignment.center,
          onTabSelected: _onTabSelected,
          selectedIndex: _selectedIndex,
          buttons: [
            AnimatedButtonBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            AnimatedButtonBarItem(
              icon: Icon(Icons.star),
              title: Text('Favorites'),
            ),
            AnimatedButtonBarItem(
              icon: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个带有动画效果的按钮栏。以下是代码的关键部分：

导入插件：

import 'package:animated_button_bar/animated_button_bar.dart';

定义按钮栏：

AnimatedButtonBar(
  alignment: MainAxisAlignment.center,
  onTabSelected: _onTabSelected,
  selectedIndex: _selectedIndex,
  buttons: [
    AnimatedButtonBarItem(
      icon: Icon(Icons.home),
      title: Text('Home'),
    ),
    AnimatedButtonBarItem(
      icon: Icon(Icons.star),
      title: Text('Favorites'),
    ),
    AnimatedButtonBarItem(
      icon: Icon(Icons.settings),
      title: Text('Settings'),
    ),
  ],
)

处理按钮点击事件：

void _onTabSelected(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

这个示例展示了如何使用animated_button_bar插件来创建一个具有动画效果的按钮栏，并在用户点击按钮时更新当前选中的按钮。你可以根据需要进一步自定义按钮的样式和行为。