Flutter圆形按钮组件插件 radial_button 的使用

radial_button 是一个用于生成浮动操作按钮（Floating Action Button）和其他部分的Flutter插件。它支持iOS和Android平台，可以创建圆形按钮，并且具有动画效果。

开始

这是一个用于生成径向按钮的Flutter插件，适用于浮动操作按钮及其他场景。

安装

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  radial_button: ^0.1.1

使用示例

首先，导入 circle_floating_button.dart 文件：

import 'package:radial_button/widget/circle_floating_button.dart';

接下来，我们可以通过以下几种方式来使用这个插件：

示例代码

定义一些浮动按钮项：

var itemsActionBar = [
  FloatingActionButton(
    backgroundColor: Colors.greenAccent,
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  FloatingActionButton(
    backgroundColor: Colors.indigoAccent,
    onPressed: () {},
    child: Icon(Icons.camera),
  ),
  FloatingActionButton(
    backgroundColor: Colors.orangeAccent,
    onPressed: () {},
    child: Icon(Icons.card_giftcard),
  ),
];

圆形浮动按钮

CircleFloatingButton.floatingActionButton(
  items: itemsActionBar,
  color: Colors.redAccent,
  icon: Icons.ac_unit,
  duration: Duration(milliseconds: 1000),
  curveAnim: Curves.ease,
)

完整圆圈按钮

CircleFloatingButton.completeCircle(
  items: itemsActionBar,
  color: Colors.red,
  duration: Duration(milliseconds: 1000),
  curveAnim: Curves.elasticOut,
)

半圆按钮

CircleFloatingButton.semiCircle(
  items: itemsActionBar,
  color: Colors.red,
  duration: Duration(milliseconds: 1000),
  curveAnim: Curves.elasticOut,
)

完整示例 Demo

以下是完整的示例代码，展示如何在一个简单的应用中集成 radial_button 插件：

import 'package:flutter/material.dart';
import 'package:radial_button/widget/circle_floating_button.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutterando Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

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

class _HomePageState extends State<HomePage> {
  var itemsActionBar = [
    FloatingActionButton(
      backgroundColor: Colors.greenAccent,
      onPressed: () {},
      child: Icon(Icons.add),
    ),
    FloatingActionButton(
      backgroundColor: Colors.indigoAccent,
      onPressed: () {},
      child: Icon(Icons.camera),
    ),
    FloatingActionButton(
      backgroundColor: Colors.orangeAccent,
      onPressed: () {},
      child: Icon(Icons.card_giftcard),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radial Button Example'),
      ),
      body: Center(
        child: Text('Hello World!'),
      ),
      floatingActionButton: CircleFloatingButton.floatingActionButton(
        items: itemsActionBar,
        color: Colors.redAccent,
        icon: Icons.ac_unit,
        duration: Duration(milliseconds: 1000),
        curveAnim: Curves.ease,
      ),
    );
  }
}

通过上述代码，你可以在你的Flutter项目中轻松实现带有动画效果的圆形按钮。记得根据实际需求调整颜色、图标及动画曲线等参数。