Flutter底部弹出菜单插件icon_bottomsheet的使用

Flutter底部弹出菜单插件icon_bottomsheet的使用

icon_bottomsheet 是一个自定义的底部弹出菜单类，其顶部带有动态图标（widget），并且支持多种形状。它使用了从 package:flutter/material.dart 导入的默认底部弹出菜单。IconBottomSheet 类创建了一个透明边框的图标小部件。图标小部件的边距大小由 iconPadding 定义，图标的大小由 iconSize 定义，而图标的形状则由 iconShape 定义。图标的形状可以是 circle（圆形）、square（方形）、circleTop（上半圆）或 circleBottom（下半圆）。以下是不同 iconShape 的图标展示。

参数

位置

图标形状

开始使用

在 pubspec.yaml 文件中添加 icon_bottomsheet 包，并执行 pub get。

dependencies:
  icon_bottomsheet: ^x.x.x

然后，在你的 MaterialApp 中更改画布颜色以使底部弹出菜单具有透明背景。

MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
    canvasColor: Colors.transparent,
    ),
    home: const MyHomePage(title: 'Icon BottomSheet'),
);

接下来，导入 showModalBottomSheet 从 material.dart 并导入 IconBottomSheet 从 package:icon_bottomsheet/icon_bottomsheet.dart，并传入上述描述的参数。

showModalBottomSheet<int>(
    context: context,
    builder: (context) {
    return const IconBottomSheet(
        iconWidget: Icon(
        Icons.cancel_outlined,
        color: Colors.white,
        size: 100,
        ),
        iconShape: IconShape.square,
        position: Position.right,
        iconBackgroundColor: Colors.redAccent,
        //childBackgroundColor: Colors.grey,
        iconSize: 120,
        iconPadding: 20,
        child: PaymentFailed(),
    );
    },
);

示例代码

以下是一个完整的示例代码，展示了如何使用 icon_bottomsheet 插件：

import 'package:example/kid.dart';
import 'package:example/payment_failed.dart';
import 'package:example/payment_success.dart';
import 'package:example/success.dart';
import 'package:flutter/material.dart';
import 'package:icon_bottomsheet/icon_bottomsheet.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: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Colors.transparent,
      ),
      home: const MyHomePage(title: 'Icon BottomSheet'),
    );
  }
}

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> {
  void _showBottomSheet() {
    showModalBottomSheet<int>(
      context: context,
      builder: (context) {
        return const IconBottomSheet(
          iconWidget: Icon(
            Icons.cancel_outlined,
            color: Colors.redAccent,
            size: 100,
          ),
          position: Position.right,
          iconShape: IconShape.circle,
          iconSize: 120,
          iconPadding: 20,
          child: Success(),
        );
      },
    );
  }

  void _showKidsBottomSheet() {
    showModalBottomSheet<int>(
      context: context,
      builder: (context) {
        return IconBottomSheet(
          iconWidget: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Image.asset('assets/duckling.png'),
          ),
          //iconBackgroundColor: Colors.transparent,
          //childBackgroundColor: Colors.blue,
          iconShape: IconShape.circle,
          iconSize: 120,
          iconPadding: 20,
          child: const Kid(),
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              onPressed: _showBottomSheet,
              child: const Text(
                'Show BottomSheet',
              ),
            )
          ],
        ),
      ),
    );
  }
}