Flutter的对话框(AlertDialog , sheet

AlertDialog

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class AlertDialogDemo extends StatefulWidget {
  @override
  _AlertDialogDemoState createState() => _AlertDialogDemoState();
}

enum Action { Cancel, OK }

class _AlertDialogDemoState extends State<AlertDialogDemo> {
  String _choice = 'Nothing';
  Future _openAlertDialog() async {
    final action = await showDialog(
        context: context,
        barrierDismissible: false, //   点击提示框外围不消失
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('AlertDialog'),
            content: Text('Are you sure about this ?'),
            actions: <Widget>[
              FlatButton(
                child: Text('Cancel'),
                onPressed: () {
                  Navigator.pop(context, Action.Cancel);
                },
              ),
              FlatButton(
                child: Text('OK'),
                onPressed: () {
                  Navigator.pop(context, Action.OK);
                },
              ),
            ],
          );
        });
    switch (action) {
      case Action.OK:
        setState(() {
          _choice = 'OK';
        });
        break;
      case Action.Cancel:
        setState(() {
          _choice = 'Cancel';
        });
        break;
      default:
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AlertDialogDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
                Text('Your choice is : $_choice'),
                SizedBox(height: 16.0),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    RaisedButton(
                      child: Text('Open AlertDialog'),
                      onPressed: _openAlertDialog,
                    ),
                  ],
                )
          ],
        ),
      ),
    );
  }
}

弹出的底部sheet，有模态和非模态两种

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class BottomSheetDemo extends StatefulWidget {
  @override
  _BottomSheetDemoState createState() => _BottomSheetDemoState();
}

class _BottomSheetDemoState extends State<BottomSheetDemo> {
  final _BottomSheetScaffoldKey = GlobalKey<ScaffoldState>();
  Future _openModelBottomSheet() async {
    final option = await showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: 200,
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text('Option A'),
                  onTap: () {
                    Navigator.pop(context, 'A');
                  },
                ),
                ListTile(
                  title: Text('Option B'),
                  onTap: () {
                    Navigator.pop(context, 'B');
                  },
                ),
                ListTile(
                  title: Text('Option C'),
                  onTap: () {
                    Navigator.pop(context, 'C');
                  },
                ),
              ],
            ),
          );
        });
    print(option);
  }

  _openBottomSheet() {
    _BottomSheetScaffoldKey.currentState
        .showBottomSheet((BuildContext context) {
      return BottomAppBar(
        child: Container(
          height: 90.0,
          width: double.infinity,
          padding: EdgeInsets.all(16),
          child: Row(
            children: <Widget>[
              Icon(Icons.pause_circle_outline),
              SizedBox(width: 16.0),
              Text('01:30/03:30'),
              Expanded(
                child: Text('Fix you - Coldplay', textAlign: TextAlign.right),
              )
            ],
          ),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomSheetDemo'),
        elevation: 0.0,
      ),
      key: _BottomSheetScaffoldKey,
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            
                FlatButton(
                  child: Text('Open BottomSheet'),
                  onPressed: _openBottomSheet,
                ),
                FlatButton(
                  child: Text('Open ModelBottomSheet'),
                  onPressed: _openModelBottomSheet,
                )
              ],
            ),
      ),
    );
  }
}

SimpleDialog

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class DialogDemo extends StatefulWidget {
  @override
  _DialogDemoState createState() => _DialogDemoState();
}

enum Option { A, B, C }

class _DialogDemoState extends State<DialogDemo> {
  String _choice = 'Nothing';
  @override
  Widget build(BuildContext context) {
    _openSimpleDialog() async {
      final option = await showDialog(
        context: context,
        builder: (BuildContext context) {
          return SimpleDialog(
            title: Text('SimpleDialog'),
            children: <Widget>[
              SimpleDialogOption(
                child: Text('Option A'),
                onPressed: () {
                  Navigator.pop(context, Option.A);
                },
              ),
              SimpleDialogOption(
                child: Text('Option B'),
                onPressed: () {
                  Navigator.pop(context, Option.B);
                },
              ),
              SimpleDialogOption(
                child: Text('Option C'),
                onPressed: () {
                  Navigator.pop(context, Option.C);
                },
              ),
            ],
          );
        },
      );
      switch (option) {
        case Option.A:
          setState(() {
            _choice = 'A';
          });
          break;
        case Option.B:
          setState(() {
            _choice = 'B';
          });
          break;
        case Option.C:
          setState(() {
            _choice = 'C';
          });
          break;
        default:
      }
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('ShowDialog'),
        elevation: 0.0,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.format_list_numbered),
        onPressed: _openSimpleDialog,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Your choice is : $_choice'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

过一会自动消失的SnackBar

import 'package:flutter/material.dart';

class SnackBarDemo extends StatefulWidget {
  @override
  _SnackBarDemoState createState() => _SnackBarDemoState();
}

class _SnackBarDemoState extends State<SnackBarDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SnackBarDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SnackbarButton(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class SnackbarButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FlatButton(
        child: Text('Open SnackBa'),
        onPressed: () {
          Scaffold.of(context).showSnackBar(SnackBar(
            content: Text('Processing'),
            action: SnackBarAction(
              label: 'OK',
              onPressed: () {},
            ),
          ));
        });
  }
}

Tooltip不打断用户操作,停顿时间比较少的提示,长按显示提示

Tooltip(
          message: '不要碰我,我怕痒',
          child: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560316081080&di=de32c1eff5ca4ad78e8387d132d9109c&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015e475725bd5432f875a399743555.png%401280w_1l_2o_100sh.png',
              fit:BoxFit.cover,
              scale: 2.0,
          ),
      )