Flutter自定义悬浮按钮插件custom_fab的使用

Flutter自定义悬浮按钮插件custom_fab的使用

custom_fab 是一个可以自定义的悬浮按钮插件，允许使用来自资源目录的自定义图像或图标。

特性

  • 可以使用来自资源目录的自定义图像或图标来显示 FloatingActionButton
  • 可以使用默认的图标来实现标准的 FloatingActionButton

使用方法

使用自定义图像资源

CustomFab(
  size: 94,
  assetPath: 'assets/images/controls.png',
  shadowColor: Colors.red,
  elevation: 20,
  onTap: () {
    _incrementCounter();
  },
)

使用图标

CustomFab(
  icon: const Icon(Icons.filter_alt_outlined),
  elevation: 12,
  onTap: () {
    _incrementCounter();
  },
)

示例界面

以下是一个完整的示例，展示了如何在应用中使用 custom_fab 插件。

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

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

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

  // 这个小部件是你的应用程序的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经点击了按钮多少次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: CustomFab(
        size: 94,
        assetPath: 'assets/images/controls.png',
        shadowColor: Colors.red,
        elevation: 20,
        onTap: () {
          _incrementCounter();
        },
      ),
    );
  }
}

更多关于Flutter自定义悬浮按钮插件custom_fab的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义悬浮按钮插件custom_fab的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，您可以使用自定义悬浮按钮插件 custom_fab 来创建和定制悬浮按钮 (Floating Action Button, FAB)。以下是如何使用 custom_fab 插件的基本步骤：

1. 添加依赖

首先，您需要在 pubspec.yaml 文件中添加 custom_fab 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_fab: ^1.0.0  # 请根据最新版本号进行替换

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

2. 导入包

在您的 Dart 文件中导入 custom_fab 包：

import 'package:custom_fab/custom_fab.dart';

3. 使用 CustomFAB

您可以在 Scaffold 的 floatingActionButton 属性中使用 CustomFAB。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom FAB Example'),
        ),
        body: Center(
          child: Text('Hello, Custom FAB!'),
        ),
        floatingActionButton: CustomFAB(
          icon: Icons.add,
          onPressed: () {
            // 在这里处理按钮点击事件
            print('Custom FAB Pressed!');
          },
          backgroundColor: Colors.blue,
          elevation: 6.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16.0),
          ),
        ),
      ),
    );
  }
}
回到顶部