Flutter径向按钮工具插件flutter_radial_button_tool的使用

Flutter径向按钮工具插件flutter_radial_button_tool的使用

开始使用

在你的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  flutter_radial_button_tool: ^版本号

然后运行 flutter pub get

注意:请确保在 ScaffoldMaterial 中使用该插件以实现模糊效果。

Web 问题

当前在 Web 上存在剪辑问题,欢迎提交 PR 修复。

功能

动态径向按钮工具插件适用于 Flutter 应用程序。

示例动图

使用方法

以下是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:flutter_radial_button_tool/flutter_radial_button_tool.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: 'Radial Button Tool Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple, brightness: Brightness.dark),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Radial Button Tool Demo'),
    );
  }
}

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> {
  List<Color> backgroundColors = [
    const Color(0xFF5CED81), // 绿色
    const Color(0xFF62D5E4), // 蓝色
    const Color(0xFFBB8EF5), // 紫色
    const Color(0xFFE874B4), // 粉色
  ];

  List<Color> foregroundColors = [
    const Color(0xFF2A2E31), // 深灰色
  ];

  double _spacing = 8;
  double _thickness = 0.5;
  bool _glow = true;
  bool _rotate = false;
  double _outerBorder = 10;

  void reset() {
    setState(() {
      _spacing = 8;
      _thickness = 0.5;
      _glow = true;
      _rotate = false;
      _outerBorder = 10;
    });
  }

  late final List<RadialButton> _children = [
    RadialIconButton(
        icon: Icons.add,
        onPressed: (_) {
          setState(() {
            _spacing += 4;
          });
        }).rotatedRadialButton,
    RadialIconButton(
        icon: Icons.remove,
        onPressed: (_) {
          setState(() {
            _spacing -= 4;
          });
        }).rotatedRadialButton,
    RadialIconButton(
        icon: Icons.rotate_left,
        onPressed: (_) {
          setState(() {
            _rotate = true;
          });
        }).rotatedRadialButton,
    RadialIconButton(
        icon: Icons.toggle_off,
        onPressed: (_) {
          setState(() {
            _glow = !_glow;
            _outerBorder = _glow ? 8 : 2;
          });
        }).rotatedRadialButton,
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    final exampleGradient = RadialGradient(
      colors: [
        Colors.transparent,
        Colors.black.withOpacity(.2),
      ],
      radius: .5,
    );
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SizedBox(
          width: 200,
          height: 200,
          child: RadialButtonTool(
            thickness: _thickness,
            innerBorder: 2,
            outerBorder: _outerBorder,
            sideBorder: 2,
            clipChildren: true,
            clampCenterButton: true,
            rotateChildren: false,
            foregroundGradient: exampleGradient,
            glow: _glow ? 8 : 0,
            spacing: _spacing,
            foregroundColors: foregroundColors,
            backgroundColors: backgroundColors,
            centerButton: MaterialButton(
              onPressed: () {
                reset();
              },
              color: const Color(0xFF2A2E31),
              child: const Icon(
                Icons.close,
                color: Colors.white,
              ),
            ),
            children: _children,
          ).animate(
            target: _rotate ? 1 : 0,
            onComplete: (_) {
              setState(() {
                _rotate = false;
              });
            }
          ).rotate(begin: 0, end: -1),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中集成和使用flutter_radial_button_tool插件的示例代码。请注意,由于flutter_radial_button_tool并不是Flutter官方或广泛认知的插件,我将假设其API和功能类似于常见的径向按钮插件,并提供一个自定义实现的示例代码,你可以根据具体插件的文档进行调整。

首先,确保你的Flutter项目已经创建并配置好。如果还没有,可以通过以下命令创建:

flutter create my_radial_button_app
cd my_radial_button_app

1. 添加依赖

在你的pubspec.yaml文件中添加flutter_radial_button_tool(或相应的插件名称,如果实际存在)作为依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_radial_button_tool: ^latest_version  # 替换为实际版本号

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

2. 导入插件

在你的Dart文件中导入插件:

import 'package:flutter_radial_button_tool/flutter_radial_button_tool.dart';  // 假设插件名正确

3. 使用插件

下面是一个简单的示例,展示如何在Flutter应用中使用径向按钮:

import 'package:flutter/material.dart';
import 'package:flutter_radial_button_tool/flutter_radial_button_tool.dart';  // 假设插件名正确

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Radial Button Demo'),
      ),
      body: Center(
        child: RadialButtonTool(
          onItemSelected: (index) {
            setState(() {
              selectedIndex = index;
            });
            // 根据需要处理按钮点击事件
            print("Button at index $index selected");
          },
          buttons: [
            RadialButton(
              icon: Icons.home,
              label: 'Home',
            ),
            RadialButton(
              icon: Icons.search,
              label: 'Search',
            ),
            RadialButton(
              icon: Icons.settings,
              label: 'Settings',
            ),
            // 添加更多按钮...
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 示例:打开一个新页面或执行其他操作
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SecondPage()),
          );
        },
        tooltip: 'Next Page',
        child: Icon(Icons.navigate_next),
      ),
    );
  }
}

// 假设的RadialButton和RadialButtonTool类,如果插件提供则无需定义
class RadialButton {
  final IconData icon;
  final String label;

  RadialButton({required this.icon, required this.label});
}

class RadialButtonTool extends StatefulWidget {
  final List<RadialButton> buttons;
  final ValueChanged<int> onItemSelected;

  RadialButtonTool({required this.buttons, required this.onItemSelected});

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

class _RadialButtonToolState extends State<RadialButtonTool> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(
        widget.buttons.length,
        (index) => RadialButtonWidget(
          button: widget.buttons[index],
          isSelected: index == selectedIndex,
          onTap: () {
            setState(() {
              selectedIndex = index;
            });
            widget.onItemSelected(index);
          },
        ),
      ),
    );
  }
}

class RadialButtonWidget extends StatelessWidget {
  final RadialButton button;
  final bool isSelected;
  final VoidCallback onTap;

  RadialButtonWidget({required this.button, required this.isSelected, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        decoration: BoxDecoration(
          color: isSelected ? Colors.blue : Colors.grey[300],
          shape: BoxShape.circle,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(button.icon, color: isSelected ? Colors.white : Colors.black),
            SizedBox(height: 8),
            Text(button.label, style: TextStyle(color: isSelected ? Colors.white : Colors.black)),
          ],
        ),
        padding: EdgeInsets.all(16),
        margin: EdgeInsets.all(8),
      ),
    );
  }
}

// 示例的第二页
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('You have navigated to the second page!'),
      ),
    );
  }
}

注意事项

  1. 插件实际存在性:上述代码假设flutter_radial_button_tool插件存在并提供了类似的功能。如果插件实际不存在,你需要根据具体插件的API文档进行调整。
  2. 样式和布局:你可以根据需要自定义按钮的样式和布局。
  3. 错误处理:确保在实际项目中添加必要的错误处理。

希望这能帮助你集成和使用径向按钮插件!

回到顶部