Flutter动画按钮插件bouncing

Flutter动画按钮插件bouncing_button的使用

特性

按钮的弹跳动画效果

开始使用

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

dependencies:
  bouncing_button: ^0.0.1

然后运行flutter pub get来获取该包。

使用方法

以下是一个简单的示例，展示如何在Flutter应用中使用bouncing_button插件。

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

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

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final double _scaleFactor = 1.0;

  _onPressed() {
    debugPrint("pressed!");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 第一个带有文本的按钮
            BouncingButton(
              scaleFactor: _scaleFactor,
              onPressed: () => _onPressed(),
              child: Container(
                height: 45,
                width: 270,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100.0),
                  color: Colors.white,
                ),
                child: const Center(
                  child: Text(
                    '点击我！',
                    style: TextStyle(
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.blueAccent,
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(
              height: 40,
            ),
            // 第二个带有图标按钮
            BouncingButton(
              scaleFactor: _scaleFactor,
              onPressed: () {
                _onPressed();
              },
              child: Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.circle,
                ),
                child: const Padding(
                  padding: EdgeInsets.all(12.0),
                  child: Icon(Icons.favorite, color: Colors.blueAccent),
                ),
              ),
            ),
            const SizedBox(
              height: 40,
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

导入必要的库：

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

创建主应用类：
```
void main() => runApp(const MyApp());
```

定义主应用类：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

定义主页面类：

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);
  
  @override
  _HomeState createState() => _HomeState();
}

定义状态类：

class _HomeState extends State<Home> {
  final double _scaleFactor = 1.0;
  
  _onPressed() {
    debugPrint("pressed!");
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 第一个带有文本的按钮
            BouncingButton(
              scaleFactor: _scaleFactor,
              onPressed: () => _onPressed(),
              child: Container(
                height: 45,
                width: 270,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100.0),
                  color: Colors.white,
                ),
                child: const Center(
                  child: Text(
                    '点击我！',
                    style: TextStyle(
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.blueAccent,
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(
              height: 40,
            ),
            // 第二个带有图标按钮
            BouncingButton(
              scaleFactor: _scaleFactor,
              onPressed: () {
                _onPressed();
              },
              child: Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.circle,
                ),
                child: const Padding(
                  padding: EdgeInsets.all(12.0),
                  child: Icon(Icons.favorite, color: Colors.blueAccent),
                ),
              ),
            ),
            const SizedBox(
              height: 40,
            ),
          ],
        ),
      ),
    );
  }
}

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

zlyuanteng 1楼•18 小时前

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

当然，下面是一个关于如何在Flutter项目中使用bouncing_button插件的示例代码。bouncing_button是一个提供带有动画效果的按钮的Flutter插件。

首先，确保你已经在pubspec.yaml文件中添加了bouncing_button依赖项：

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

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

接下来是一个简单的示例代码，展示如何使用BouncingButton：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bouncing 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('Bouncing Button Example'),
      ),
      body: Center(
        child: BouncingButton(
          onPressed: () {
            // 按钮点击事件处理
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Button pressed!')),
            );
          },
          child: Text(
            'Click Me!',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          color: Colors.blue,
          height: 50,
          width: 200,
          borderRadius: BorderRadius.circular(25),
          animationDuration: Duration(milliseconds: 300),
          elevation: 5,
        ),
      ),
    );
  }
}

代码解释：

导入必要的包：
- package:flutter/material.dart：Flutter的核心包。
- package:bouncing_button/bouncing_button.dart：bouncing_button插件。
创建应用入口：
- MyApp是一个无状态小部件，它定义了应用程序的主题和主页。
定义主页：
- MyHomePage是一个有状态小部件，它包含一个Scaffold，其中包含一个应用栏和一个居中的BouncingButton。
配置BouncingButton：
- onPressed：按钮点击时的事件处理函数。
- child：按钮上显示的文本，这里使用了Text小部件。
- color：按钮的背景颜色。
- height和width：按钮的高度和宽度。
- borderRadius：按钮的圆角半径。
- animationDuration：按钮动画的持续时间。
- elevation：按钮的阴影高度。

这个示例展示了如何在一个Flutter应用中集成和使用bouncing_button插件。你可以根据需要进一步自定义按钮的样式和行为。