flutter:dialog (十一)-阿里云开发者社区

前言

在现代应用中，弹窗是与用户互动的重要形式，能够有效地传达信息、提示操作或收集反馈。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(),
  ));
}

flutter:dialog (十一)

前言

AlertDialog

SimpleDialog

showModelBottomSheet

toast

弹框

简单使用

底部弹窗

showModalBottomSheet

页面显示

第二个

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

flutter:dialog (十一)

前言

AlertDialog

SimpleDialog

showModelBottomSheet

toast

弹框

简单使用

底部弹窗

showModalBottomSheet

页面 显示

第二个

热门文章

最新文章

相关电子书

页面显示