Futter基礎第21篇： 實作普通對話框、清單對話框、單選對話框、Toast提示

效果圖：

Dialog.dart

這裡我把所有的代碼都寫在了一個類裡，不過要想實作Toast的功能，我們必須要引入第三方庫，可參考：https://pub.dev/packages/fluttertoast

配置：pubspec.yaml

引入包名：import ‘package:fluttertoast/fluttertoast.dart’;

Dialog.dart

import 'package:flutter/material.dart';

import 'package:fluttertoast/fluttertoast.dart';

class DialogPage extends StatefulWidget {
  @override
  _DialogPageState createState() => _DialogPageState();
}

class _DialogPageState extends State<DialogPage> {

  _alertDialog() async{
     var result = await showDialog(       //通過異步在外面擷取值
         context:context,
       builder: (context){
           return AlertDialog(      //系統自帶： 普通對話框
             title: Text('提示資訊！'),
             content: Text('您确定要删除嗎？'),
             actions: <Widget>[     //監聽器
               FlatButton(              //确定監聽
                 child: Text('取消'),
                 onPressed: (){
                   print('取消');
                   Navigator.pop(context,'Cancle');
                 },
               ),
               FlatButton(              //取消監聽
                 child: Text('确定'),
                 onPressed: (){
                   print('确定');
                   Navigator.pop(context,'OK');
                 },
               )
             ],
           );
       }
     );

     print(result);   //在外部擷取資料并列印
  }

  _simpleDialog() async{
   var result = await showDialog(
        context: context,
        builder: (context){
          return SimpleDialog(
            title: Text('選擇内容'),
            children: <Widget>[
              SimpleDialogOption(
                child: Text('Option A'),
                onPressed: (){
                  print('Option A');
                  Navigator.pop(context,'A');
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text('Option B'),
                onPressed: (){
                  print('Option B');
                  Navigator.pop(context,'B');
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text('Option C'),
                onPressed: (){
                  print('Option C');
                  Navigator.pop(context,'C');
                },
              ),
              Divider(),
            ],

          );
      }
    );

   print(result);
  }

  _modelBottomSheet() async{
    var result = await showModalBottomSheet(
        context: context,
        builder: (context){
          return Container(
            height: 250,  //配置底部彈出框高度
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text('分享 A'),
                  onTap: (){
                    Navigator.pop(context,'分享A');
                  },
                ),
                Divider(),
                ListTile(
                  title: Text('分享 B'),
                  onTap: (){
                    Navigator.pop(context,'分享B');
                  },
                ),
                Divider(),
                ListTile(
                  title: Text('分享 C'),
                  onTap: (){
                    Navigator.pop(context,'分享C');
                  },
                ),
              ],
            ),
          );
        }
    );

    print(result);
  }

  _toast(){

    Fluttertoast.showToast(
        msg: "提示資訊",
        toastLength: Toast.LENGTH_SHORT,    //跟Android一樣，短時間提示
        gravity: ToastGravity.CENTER,       //居中
        timeInSecForIos: 1,               //Android無效果，ios有效果文檔上已經說明：timeInSecForIos	int (only for ios)
        backgroundColor: Colors.red,      //背景顔色
        textColor: Colors.white,          //字型顔色
        fontSize: 16.0                    //字型大小
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DialogDemo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('alert彈出框-AlerDialog'),
              onPressed: _alertDialog,
            ),
            SizedBox(height: 20,),
            RaisedButton(
              child: Text('select彈出框-SimpleDialog'),
              onPressed: _simpleDialog,
            ),
            SizedBox(height: 20,),
            RaisedButton(
              child: Text('ActionSheet底部彈出框-showModalBottomSheet'),
              onPressed: _modelBottomSheet,
            ),
            SizedBox(height: 20,),
            RaisedButton(
              child: Text('toast-fluttertoast第三方庫'),
              onPressed: _toast,
            )
          ],
        ),
      ),
    );
  }
}