flutter弹窗

一、iOS风格弹窗

风格一：

  void showCupertinoAlertDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return CupertinoAlertDialog(
            title: Text("这是一个iOS风格的对话框"),
            content: Column(
              children: <Widget>[
                SizedBox(
                  height: 10,
                ),
                Align(
                  child: Text("这是消息"),
                  alignment: Alignment(0, 0),
                ),
                Align(
                  child: Text("贼哈哈哈哈"),
                  alignment: Alignment(0, 0),
                ),
              ],
            ),
            actions: <Widget>[
              CupertinoDialogAction(
                child: Text("取消"),
                onPressed: () {
                  Navigator.pop(context);
                  print("取消");
                },
              ),
              CupertinoDialogAction(
                child: Text("确定"),
                onPressed: () {
                  Navigator.pop(context);
                  print("确定");
                },
              ),
            ],
          );
        });
  }

image.png

风格二：

  void showCupertinoAlertDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return CupertinoAlertDialog(
            title: Text("这是一个iOS风格的对话框"),
                actions: <Widget>[
                CupertinoDialogAction(
                  child: Text('非常好'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
                CupertinoDialogAction(
                  child: Text('一般'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
                CupertinoDialogAction(
                  child: Text('非常差'),
                  // isDestructiveAction: false,
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
           );
        });
  }

image.png

风格三：

  void showAlertDialog(BuildContext context){
    showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text('Dialog'),
          content: Text(('Dialog content..')),
          actions: <Widget>[
            Container(
              height: 40,
              decoration: BoxDecoration(
                color: Colors.orange,
                borderRadius: BorderRadius.circular(10),
              ),
              child: TextButton(
                child: Text("取 消"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ),
            Container(
              height: 40,
              decoration: BoxDecoration(
                color: Colors.orange,
                borderRadius: BorderRadius.circular(10),
              ),
              child: TextButton(
                child: Text("确 定"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ),
          ],
        ));
  }

image.png

风格四：底部

  // Future<int> _showBasicModalBottomSheet(context, List<String> options) async {
  void _showBasicModalBottomSheet(context, List<String> options) {
    showModalBottomSheet<int>(
      isScrollControlled: false,
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 300,
          child: ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage('https://img0.baidu.com/it/u=2663888674,2564213533&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500'),
                  ),
                  trailing: Icon(Icons.keyboard_arrow_right),
                  title: Text(options[index]),
                  subtitle: Text('美女'),
                  onTap: () {
                    Navigator.of(context).pop(index);
                  });
            },
            itemCount: options.length,
          ),
        );
      },
    );
  }

image.png

二、GetX的Dialog风格

1、自定义的

onTap: () => Get.defaultDialog(),

image.png

2、手动定义

onTap: () => Get.dialog(const RedJoinPopup()),

class RedJoinPopup extends StatelessWidget {
  const RedJoinPopup({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ctrl = Get.put(DialogExample());

    return Scaffold(
      backgroundColor: Colors.transparent,
      // backgroundColor : Colors.white,
      body: Stack(
        children: [
          // Center(
          //   child: Container(
          //     decoration: BoxDecoration(
          //       image: DecorationImage(
          //         fit: BoxFit.cover,
          //         image: new NetworkImage(
          //             'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F45%2Ffa%2Fb7%2F45fab71282dae578be117d2cb4e76eb1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661595959&t=5ae2dc20fdb9eb191eb0b06f6ea509cb'),
          //       ),
          //     ),
          //     width: 300,
          //     height: 600,
          //     child: Column(
          //       children: [
          //         const Text('datar112'),
          //         const Text('data23'),
          //         const Text('data1'),
          //         const Text('data12'),
          //       ],
          //     ),
          //   )
          // ),
          Positioned(
            top: 80,
            right: 50,
            width: 300,
            height: 600,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.orange,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                children: [
                  const Text('datar112'),
                  const Text('data23'),
                  const Text('data1'),
                  const Text('data12'),
                ],
              ),
            ),
          ),
          Positioned(
            top: 15,
            right: 50,
            child: IconButton(
              onPressed: () {
                Get.back();
                Get.toNamed(Routes.nextController,parameters: {'name':'zhang'});
              },
              icon: Icon(
                Icons.cancel_outlined,
                size: 28,
              ),
              color: Colors.white,
            ),
          )
        ],
      ),
    );
  }
}

image.png

3、设置背景图片

class DialogExample extends StatelessWidget {
  // DialogExample pageController = DialogExample();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX Title"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Center(
              child:  Container(
                width: 300,
                height: 300,
                decoration: BoxDecoration(
                    image: new DecorationImage(
                      fit: BoxFit.cover,
                      image: new NetworkImage(
                          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F45%2Ffa%2Fb7%2F45fab71282dae578be117d2cb4e76eb1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661595959&t=5ae2dc20fdb9eb191eb0b06f6ea509cb'),
                    ),
                ),
                child: Column(
                  children: [
                    ElevatedButton(
                        onPressed: () {
                          Get.dialog(RedJoinPopup(),useSafeArea: true);
                        },
                        child: Text("显示 Dialog"))
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

image.png