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

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

安装

  1. 如果您还没有juneflow项目,请按照此指南创建一个。
  2. juneflow项目的根目录打开终端,并输入以下命令:
    june add insta_alert_bottom_sheet
    
  3. 启动项目,输入以下命令:
    flutter run lib/app/_/_/interaction/view.blueprint.popup/bottom_sheet/insta_bottom_sheet.error/usage.dart -d chrome
    

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('底部弹出菜单示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示底部弹出菜单
              showInstaAlertBottomSheet(
                context,
                title: '警告',
                message: '这是一条警告消息!',
                actions: [
                  InstaAlertAction(
                    text: '取消',
                    onPressed: () {
                      print('用户点击了取消按钮');
                    },
                  ),
                  InstaAlertAction(
                    text: '确定',
                    onPressed: () {
                      print('用户点击了确定按钮');
                    },
                  )
                ],
              );
            },
            child: Text('显示底部弹出菜单'),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter底部弹出菜单插件insta_alert_bottom_sheet的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部弹出菜单插件insta_alert_bottom_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


insta_alert_bottom_sheet 是一个 Flutter 插件,用于创建一个类似 Instagram 的底部弹出菜单。这个插件可以帮助你快速实现一个美观且功能丰富的底部弹出菜单,类似于 Instagram 中的分享、点赞等操作的底部弹出菜单。

安装插件

首先,你需要在 pubspec.yaml 文件中添加 insta_alert_bottom_sheet 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  insta_alert_bottom_sheet: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装插件。

使用插件

以下是一个简单的使用示例,展示如何在 Flutter 应用中使用 insta_alert_bottom_sheet 插件来创建一个底部弹出菜单。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Insta Alert Bottom Sheet Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示底部弹出菜单
              showInstaAlertBottomSheet(
                context: context,
                options: [
                  InstaAlertBottomSheetOption(
                    icon: Icons.share,
                    title: 'Share',
                    onTap: () {
                      print('Share tapped');
                      Navigator.pop(context);
                    },
                  ),
                  InstaAlertBottomSheetOption(
                    icon: Icons.favorite,
                    title: 'Like',
                    onTap: () {
                      print('Like tapped');
                      Navigator.pop(context);
                    },
                  ),
                  InstaAlertBottomSheetOption(
                    icon: Icons.delete,
                    title: 'Delete',
                    onTap: () {
                      print('Delete tapped');
                      Navigator.pop(context);
                    },
                  ),
                ],
              );
            },
            child: Text('Show Bottom Sheet'),
          ),
        ),
      ),
    );
  }
}
回到顶部