Flutter-dialog彈出框

flutter dialog 的三種彈出方式

• AlertDialog
• SimpleDialog
• CupertionDialogAction

1 AlertDialog

 

 

  void showAlertDialog() {
    showDialog<Null>(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('標題'),
            //可滑動
            content: SingleChildScrollView(
              child: ListBody(
                children: <Widget>[
                  Text('內容 1'),
                  Text('內容 2'),
                  Text('內容 1'),
                  Text('內容 2'),
                ],
              ),
            ),
            actions: <Widget>[
              FlatButton(
                child: Text('確定'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              FlatButton(
                child: Text('取消'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        });
  }

2 SimpleDialog

 

 

  void showSimpleDialog() {
    showDialog<Null>(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          title: Text('選擇'),
          children: <Widget>[
            SimpleDialogOption(
              child: Text('選項 1'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            SimpleDialogOption(
              child: Text('選項 2'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

3 CupertionDialogAction ios 風格

 

 

  void showCupertinoAlertDialog() {
    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),
                ),
              ],
            ),
            actions: <Widget>[
              CupertinoDialogAction(
                child: Text("取消"),
                onPressed: () {
                  Navigator.pop(context);
                  print("取消");
                },
              ),
              CupertinoDialogAction(
                child: Text("確定"),
                onPressed: () {
                  print("確定");
                },
              ),
            ],
          );
        });
  }