Flutter 組件之AlertDialog、SimpleDialog、showModalBottomSheet、showToast、自定義Dialog

AlertDialog dialog彈框

在 showDialog中 定義 AlertDialog

 _alertDialog () async {
    var result =  showDialog<void>(
      context: context,
      barrierDismissible: true,
      // false = user must tap button, true = tap outside dialog
      builder: (BuildContext dialogContext) {
        return AlertDialog(//定義AlertDialog
          title: Text('標題'),
          content: Text('dialog內容'),
          actions: <Widget>[
            FlatButton(
              child: Text('取消'),
              onPressed: () {
                Navigator.of(dialogContext).pop(); // 就像前面的抽屜一樣來關閉彈框
              },
            ),FlatButton(
              child: Text('確認'),
              onPressed: () {
                Navigator.of(dialogContext).pop(); // Dismiss alert dialog
              },
            ),
          ],
        );
      },
    );
  }

SimpleDialog 下拉選框

  _simpleDialog() async{
    showDialog<void>(
      context: context,
      barrierDismissible: true,
      // false = user must tap button, true = tap outside dialog
      builder: (BuildContext dialogContext) {
        return SimpleDialog(//定義SimpleDialog
          title:Text("選擇內容"),
          children: <Widget>[
            SimpleDialogOption(//選框子元素
              child: Text("option A"),
              onPressed: (){
                Navigator.of(dialogContext).pop();
                print("option A");
              },
            ),
            Divider(),//分割線
            SimpleDialogOption(
              child: Text("option b"),
              onPressed: (){
                Navigator.of(dialogContext).pop();
                print("option b");
              },
            ),
            Divider(),//分割線
            SimpleDialogOption(
              child: Text("option c"),
              onPressed: (){
                Navigator.of(dialogContext).pop();
                print("option c");
              },
            ),
          ],
        );
      },
    );
  }

showModalBottomSheet

 _showModalBottomSheet() async{
    showModalBottomSheet(
        context: context,
        builder:(context) {
          return Container(
            height: 200,
           child: Column(
             children: <Widget>[
               ListTile(
                 title: Text("分享 A"),
                 onTap: (){
                   print("分享 A");
                   Navigator.of(context).pop();
                 },
               ),
               Divider(),
               ListTile(
                 title: Text("分享 b"),
                 onTap: (){
                   print("分享 b");
                   Navigator.of(context).pop();
                 },
               ),
               Divider(),
               ListTile(
                 title: Text("分享 c"),
                 onTap: (){
                   print("分享 c");
                   Navigator.of(context).pop();
                 },
               ),

             ],
           ),
          );
        }
    );
  }
  

fluttertoast 第三方庫

import 'package:fluttertoast/fluttertoast.dart';

  _showToast() {
    Fluttertoast.showToast(
        msg: "吐司內容",
        toastLength: Toast.LENGTH_LONG,
        gravity: ToastGravity.BOTTOM,//顯示位置
        timeInSecForIosWeb: 1,//顯示時長蘋果
        backgroundColor: Colors.black,//背景顏色
        textColor: Colors.white,//文字顏色
        fontSize: 16.0//文字大小
    );
  }

 Column(
      children: <Widget>[
         RaisedButton(
           child: Text("alert彈出框-AlertDialog"),
           onPressed: _alertDialog,
         ),
         RaisedButton(
           child: Text("彈出框-SimpleDialog"),
           onPressed: _simpleDialog,
         ),
         RaisedButton(
           child: Text("底部彈出框-showModalBottomSheet"),
           onPressed: _showModalBottomSheet,
         ),
         RaisedButton(
           child: Text("吐司-showToast"),
           onPressed: _showToast,
         ),
         RaisedButton(
              child: Text("自定義Dialog"),
              onPressed: () {
                showDialog(
                    context: context,
                    builder: (context) {
                      return MyDialog();//必須先引入你的組件
                    });
              },
            ),
     ]
 )

自定義Dialog

創建 MyDialog組件

import 'package:flutter/material.dart';

/*
* Dialog Template
* 自定義dialog
*/
class MyDialog extends Dialog {
  @override
  Widget build(BuildContext context) {
    return Material(//定義全局大小的元素
      type: MaterialType.transparency, //設置整個元素是透明的
      child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,//居中顯示
        children: <Widget>[
          Padding(//邊距組件
            padding: EdgeInsets.all(10),//設置內邊距
            child: Container(//這裏就可以實現一些自定義功能
              height: 200,
              width: 200,
              color: Colors.white,
              child: RaisedButton(child: Text("關閉自定義Dialog"),onPressed: (){
                Navigator.of(context).pop();
              },),
            ),
          ),
        ],
      )),
    );
  }
}