AI 助理
备案控制台
开发者社区 云计算 文章 正文

flutter:dialog (十一)

2024-10-17 25
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了 Flutter 中常用的弹窗组件和方法，包括 `AlertDialog`、`SimpleDialog`、`showModalBottomSheet` 和 `toast`。每个组件的使用方法和示例代码都进行了详细说明，帮助开发者快速理解和应用这些弹窗功能。例如，`AlertDialog` 用于显示带有标题、内容和按钮的对话框；`SimpleDialog` 用于显示多个选项供用户选择；`showModalBottomSheet` 用于从屏幕底部弹出模态对话框；而 `toast` 则用于显示短暂的消息提示。文中还提供了如何处理点击事件、取消弹窗等常见操作的代码示例。

前言

在现代应用中，弹窗是与用户互动的重要形式，能够有效地传达信息、提示操作或收集反馈。Flutter提供了一系列强大的弹窗组件，开发者可以根据需求选择合适的组件来提升用户体验。本文将聚焦于Flutter中常用的弹窗组件，包括AlertDialog、SimpleDialog、showModalBottomSheet和Toast。每个组件将附带详细的使用方法和示例代码，确保开发者能够快速理解和应用这些功能。

AlertDialog

属性

barrierDismissible: false, //  点击 背景 不消失  默认 为 true

定义一个 按钮

AlertDialog

ElevatedButton(
                //   按钮 点击 方法  不 带 括号
                onPressed: _alertDialog,
                child: Text("dialog test"),
              )

方法 如下

//  异步 改为 同步  得到  返回 值
  void _alertDialog() async {
    var res = await showDialog(
        builder: (context) {
          return AlertDialog(
            title: Text("title"),
            content: Text("content"),
            actions: [
              TextButton(
                onPressed: () {
                  // pop   为  返回值  可以 用 res  接收
                  Navigator.of(context).pop("cancel");
                },
                child: Text("cancel"),
              ),
              TextButton(
                  onPressed: () {
                    //            返回
                    Navigator.of(context).pop("confirm");
                  },
                  child: Text("confirm")),
            ],
          );
        }, context: this.context);
    print(res);
  }
shape: ShapeBorder.lerp(
      RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
      CircleBorder(),
      1,
    ),
    icon: Icon(Icons.add),


SimpleDialog

void _simpleDialog() async {
 var res2=  await showDialog(
      barrierDismissible: false, //  点击 背景 不消失  默认 为 true
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text("switch language"),
            children: [
              SimpleDialogOption(
                onPressed: () {
              //  设置 pop 返回的值 
                  Navigator.of(context).pop("chinese");
                },
                child: Text("chinese"),
              ),
              SimpleDialogOption(
                onPressed: () {
                  Navigator.of(context).pop("english");
                },
                child: Text("english"),
              ),
              SimpleDialogOption(
                onPressed: () {
                  Navigator.of(context).pop("japan");
                },
                child: Text("japan"),
              ),
            ],
          );
        });


showModelBottomSheet


底部 出现  弹窗

void _modelBottomSheet(){
      showModalBottomSheet(context: context, builder: (context){
        return  SizedBox(
          height: 300,
          child: Column(
            children: [
              ListTile(title: Text("share"),),
              ListTile(title: Text("collect"),),
              ListTile(title: Text("cancel"),),
            ],
          ),
        );
      });
  }


toast

在dependcies  下面  添加

fluttertoast: ^8.0.9
在 需要用 到 的 页面 进行 
import 'package:fluttertoast/fluttertoast.dart';

使用

void _toast(){
     Fluttertoast.showToast(msg: "this is toast",
     toastLength: Toast.LENGTH_LONG,
       backgroundColor: Colors.red,
       textColor: Colors.white,
       fontSize: 16.0,
       gravity: ToastGravity.CENTER,
     );
  }

弹框

简单使用

simpleDialog

import 'package:flutter/material.dart';
class test extends StatefulWidget {
  const test({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() => _test();
}
class _test extends State<test> {
  @override
  Widget build(BuildContext context) {
    void showSimpleFn() async {
      bool? isSelect = await showDialog<bool>(
          context: context,
          builder: (context) {
            return SimpleDialog(
              title: Text('title'),
              children: [
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop(false);
                  },
                  child: Text('select one'),
                ),
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop(false);
                  },
                  child: Text('select one'),
                ),
              ],
            );
          });
      print("close $isSelect");
    }
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showSimpleFn();
          },
          child: Text('click me'),
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: test(),
  ));
}

底部弹窗

import 'package:flutter/material.dart';
class test extends StatefulWidget {
  const test({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() => _test();
}
class _test extends State<test> {
  void showBottomSheetFn(BuildContext context) {
    showBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return buildContainer(context);
        });
  }
  Container buildContainer(BuildContext context) {
    return Container(
      //  背景  颜色
      color: Colors.white,
      height: 180,
      width: double.infinity,
      child: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            height: 44,
            child: const Text("title"),
          ),
          const Expanded(child: Text("content")),
          //     分割上下
          //给一点线 分割
          Container(
            height: 1,
            color: Colors.grey[200],
          ),
          SizedBox(
            height: 64,
            child: Row(
              children: [
                Expanded(
                    child: TextButton(
                  child: const Text("cancel"),
                  onPressed: () {
                    Navigator.of(context).pop(false);
                  },
                )),
                Container(
                  // 给一个 宽
                  width: 1,
                  color: Colors.grey[200],
                ),
                Expanded(
                    child: TextButton(
                        child: const Text("confirm"),
                           onPressed: () {
                    Navigator.of(context).pop(false);
                  },
                )),
              ],
            ),
          )
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Builder(
          builder: (BuildContext context) {
            return ElevatedButton(
              onPressed: () {
                showBottomSheetFn(context);
              },
              child: const Text('click me'),
            );
          },
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: test(),
  ));
}

注意点

定义一个方法

void showBottomSheetFn(BuildContext context) {
    showBottomSheet(context: context, builder: (BuildContext context){
      return buildContainer(context);
    });

点击取消

Navigator.of(context).pop(false);

点击背景 弹窗取消

barrierDismissible:rue

使用builder 封装   来获得 context

return Scaffold(
      body:Center(
      child: Builder(
        builder: (BuildContext context){
        return  ElevatedButton(onPressed: () { showBottomSheetFn(context); }, child: const Text('click me'),);
        },
      ),
      ),
    );

showModalBottomSheet

void showDemo(BuildContext context) async{
    showModalBottomSheet(context: context,
    backgroundColor: Colors.grey,
        // 模糊背景颜色
        barrierColor: Colors.grey,
      // 点击背景消失
      isDismissible: true,
      // 下滑消失
      enableDrag: true,
      builder: (BuildContext context){
      return buildContainer(context);
      }
    );
  }
import 'package:flutter/material.dart';
class test extends StatefulWidget{
  const test({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() =>_test();
}
class _test extends State<test> {
  void showDemo(BuildContext context) async{
    showModalBottomSheet(context: context,
    backgroundColor: Colors.grey,
        // 模糊背景颜色
        barrierColor: Colors.grey,
      // 点击背景消失
      isDismissible: true,
      // 下滑消失
      enableDrag: true,
      builder: (BuildContext context){
      return buildContainer(context);
      }
    );
  }
  Container buildContainer(BuildContext context){
    return Container(
      //  背景  颜色
      color: Colors.white,
      height: 180,
      width: double.infinity,
      child: Column(
        children:<Widget> [
          Container(alignment: Alignment.center,
            height: 44,
            child: const Text(
                "title"
            ),
          ),
          const Expanded(child: Text("content")),
          //给一点线 分割
          Container(height: 1,
            color: Colors.grey[200],),
          SizedBox(
            height: 64,
            child: Row(
              children: [
                Expanded(child: TextButton(child: const Text("cancel"),onPressed: (){
                  Navigator.of(context).pop(false);
                },)),
                Container(
                  width: 1,
                  color: Colors.grey[200],
                ),Expanded(child: TextButton(child: const Text("confirm"),onPressed: (){Navigator.of(context).pop(false);},)),
              ],
            ),
          )
        ],
      ),
    );
  }
  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Builder(
          builder: (BuildContext context){
            return ElevatedButton(onPressed:(){ showDemo(context);}, child: Text('click me'));
          },
        ),
      ),
    );
  }
}
void  main(){
  runApp(MaterialApp(
    home:test(),
  ));
}
import 'package:flutter/material.dart';
class test extends StatefulWidget{
  const test({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() =>_test();
}
class _test extends State<test> {
  void showDemo(BuildContext context) async{
    showModalBottomSheet(context: context,
    backgroundColor: Colors.grey,
        // 模糊背景颜色
        barrierColor: Colors.grey,
      // 点击背景消失
      isDismissible: true,
      // 下滑消失
      enableDrag: true,
      builder: (BuildContext context){
      return buildContainer(context);
      }
    );
  }
  Container buildContainer(BuildContext context){
    return Container(
      //  背景  颜色
      color: Colors.white,
      height: 180,
      width: double.infinity,
      child: Column(
        children:<Widget> [
          Container(alignment: Alignment.center,
            height: 44,
            child: const Text(
                "title"
            ),
          ),
          const Expanded(child: Text("content")),
          //给一点线 分割
          Container(height: 1,
            color: Colors.grey[200],),
          SizedBox(
            height: 64,
            child: Row(
              children: [
                Expanded(child: TextButton(child: const Text("cancel"),onPressed: (){
                  Navigator.of(context).pop(false);
                },)),
                Container(
                  width: 1,
                  color: Colors.grey[200],
                ),Expanded(child: TextButton(child: const Text("confirm"),onPressed: (){Navigator.of(context).pop(false);},)),
              ],
            ),
          )
        ],
      ),
    );
  }
  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Builder(
          builder: (BuildContext context){
            return ElevatedButton(onPressed:(){ showDemo(context);}, child: Text('click me'));
          },
        ),
      ),
    );
  }
}
void  main(){
  runApp(MaterialApp(
    home:test(),
  ));
}


页面 显示

import 'package:flutter/material.dart';
class test extends StatefulWidget {
  late final Function(int value) callBack;
  test({required this.callBack});
  @override
  State<StatefulWidget> createState() {
    return _test();
  }
}
class _test extends State<test> {
  int _groupValue=0;
  @override
  Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: TextButton(onPressed:
            //  方法
            showDialogFn
          ,child: Text("click me"),)
        ),
      );
  }
  Widget hello(){
    return Scaffold(
        body: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            RadioListTile(
                value: 0,
                title: Text('test A'),
                groupValue: _groupValue,
                onChanged: (value){
                  setState(() {
                    _groupValue=value as int;
                  });
                  widget.callBack(_groupValue);
                }
            ),
            RadioListTile(
                value: 1,
                title: Text('test B'),
                groupValue: _groupValue,
                onChanged: (value){
                  setState(() {
                    _groupValue=value as int;
                  });
                  widget.callBack(_groupValue);
                }
            ),
          ],
        ),
    );
  }
  void showDialogFn()async{
 await showDialog<bool>(
        context: context,
        builder: (context){
          return AlertDialog(
              title: Text("this is title"),
              //   将显示的内容单独封装
              // content:
              content: hello(),
              //   底部按钮
              actions:<Widget>[
                TextButton(onPressed: (){
                  Navigator.of(context).pop(false);
                }, child: Text('Cancel')
                ),
                TextButton(onPressed: (){
                  Navigator.of(context).pop(false);
                }, child:Text('Ok') )
              ]
          );
        }
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: test(callBack: (int value) {}),
  ));
}

第二个

import 'package:flutter/material.dart';
class test extends StatefulWidget{
  const test({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() =>_test();
}
class _test extends State<test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
  mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            ElevatedButton(onPressed: (){
              NavigatorUtils.openPageByFade(
                context,
                CustomDialogWidget(
                  callBack:(int value){}
                ),
                opaque:false,
              ),
            }, child: Text('show dialog'))
          ],
        ),
      ),
    );
  }
}
void  main(){
  runApp(MaterialApp(
    home:test(),
  ));
}
import 'package:flutter/material.dart';
class test extends StatefulWidget{
  const test({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() =>_test();
}
class _test extends State<test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
  mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            ElevatedButton(onPressed: (){
              NavigatorUtils.openPageByFade(
                context,
                CustomDialogWidget(
                  callBack:(int value){}
                ),
                opaque:false,
              ),
            }, child: Text('show dialog'))
          ],
        ),
      ),
    );
  }
}
void  main(){
  runApp(MaterialApp(
    home:test(),
  ));
}









文章标签：
开发者
UED
关键词：
Flutter dialog
明弟有理想
目录
相关文章
Zhujiang
Flutter自定义Dialog
Flutter自定义Dialog
Zhujiang
176 0
Flutter自定义Dialog
IAM17
【交互 widget】Flutter Dialog
【交互 widget】Flutter Dialog
IAM17
295 0
【交互 widget】Flutter Dialog
BennuC
|
Web App开发 Android开发 iOS开发
Flutter入门：自定义dialog
自定义dialog
BennuC
387 0
阿策～
|
网络架构
Flutter 124: 日常问题小结 (三) 自定义 Dialog 二三事
0 基础学习 Flutter，第一百二十四步：继续整理日常遇到的小问题！
阿策～
470 0
Flutter 124: 日常问题小结 (三) 自定义 Dialog 二三事
老孟_
|
Dart iOS开发 容器
Flutter Widgets 对话框-Dialog
老孟_
901 0
阿策～
|
容器
Flutter 60: 图解基本 Dialog 对话框小结
0 基础学习 Flutter，第六十步：学习一下 Flutter 基础对话框！
阿策～
2762 0
阿策～
|
C++ C语言
Flutter 24: 图解自定义 Dialog 对话框
0 基础学习 Flutter，第二十四步：自定义对话框了解下～
阿策～
4782 0
游客zi3qmblbcdexu
|
2月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
游客zi3qmblbcdexu
134 2
东方睿赢
|
8天前
|
传感器 前端开发 Android开发
在 Flutter 开发中，插件开发与集成至关重要，它能扩展应用功能，满足复杂业务需求
在 Flutter 开发中，插件开发与集成至关重要，它能扩展应用功能，满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例，如相机插件的开发步骤，同时强调了版本兼容性、性能优化等注意事项，并展望了插件开发的未来趋势。
东方睿赢
22 2
zacksleo
|
2月前
|
开发者
鸿蒙Flutter实战：07-混合开发
鸿蒙Flutter混合开发支持两种模式：1) 基于har包，便于主项目开发者无需关心Flutter细节，但不支持热重载；2) 基于源码依赖，利于代码维护与热重载，需配置Flutter环境。项目结构包括AppScope、flutter_module等目录，适用于不同开发需求。
zacksleo
80 3

热门文章

最新文章

  • 1
    Flutter 61: 图解基本 Button 按钮小结 (一)
  • 2
    打通前后端逻辑，客户端Flutter代码一天上线
  • 3
    Flutter新锐专家之路：混合开发篇
  • 4
    Flutter Plugin调用Native APIs
  • 5
    从零开始，一起学习开发个 Flutter App 吧
  • 6
    Flutter笔记： 在Flutter应用中使用SQLite数据库
  • 7
    Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
  • 8
    如何在 Flutter 中使用 MemoryImage【Flutter 专题 23】
  • 9
    Flutter报错Building with plugins requires symlink support的解决方法
  • 10
    【Flutter】Dart 面向对象 ( get 方法 | set 方法 | 静态方法
  • 1
    flutter 引用图片资源遇到的问题
    88
  • 2
    移动应用开发的未来：Flutter与Android的深度融合
    79
  • 3
    Flutter 弃用 WillPopScope 使用 PopScope 替代方法
    279
  • 4
    【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
    82
  • 5
    【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
    279
  • 6
    【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
    215
  • 7
    【Flutter前端技术开发专栏】Flutter中的图片加载与缓存优化
    624
  • 8
    【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
    223
  • 9
    【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
    340
  • 10
    【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
    96

    • 相关课程

    更多
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 基于flutter的产品应用实践
  • 《Flutter in action》
  • 闲鱼《Flutter 技术解析与实战》
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月