flutter 自定义弹窗

仿苹果底部弹窗模态框

_buildSheetView(BuildContext context) async {
    var result = await showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
              height: 200.0,
              child: Column(children: [
                ListTile(
                    title: Text('分享1'),
                    onTap: () {
                      Navigator.pop(context, '1');
                    }),
                Divider(),
                ListTile(
                    title: Text('分享2'),
                    onTap: () {
                      Navigator.pop(context, '2');
                    }),
                Divider(),
                ListTile(
                    title: Text('分享3'),
                    onTap: () {
                      Navigator.pop(context, '3');
                    }),
                Divider(),
              ]));
        });
    print(result);
  }

自定义弹窗

import 'package:flutter/material.dart';

class MyDialog extends Dialog {

  String title;
  String content;
  MyDialog({this.title = '', this.content = ''});

  @override
  Widget build(BuildContext context) {
    return Material(
        type: MaterialType.transparency,
        child: Center(
            child: Container(
                height: 300,
                width: 300,
                color: Colors.white,
                child: Column(children: [
                  Padding(
                      padding: EdgeInsets.all(20),
                      child: Stack(
                        children: [
                          Align(
                              alignment: Alignment.center, child: Text(this.title)),
                          Align(
                            alignment: Alignment.centerRight,
                            child: InkWell(
                              child: Icon(Icons.close),
                              onTap: ()=> { Navigator.pop(context) },
                            ),
                          )
                        ],
                      )),
                  Divider(),
                  Container(
                    padding: EdgeInsets.all(10),
                    width: double.infinity,
                    child: Text('${this.content}', textAlign: TextAlign.left,),
                  )
                ]))));
  }
}

使用

_buildCustomDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (context) {
          return MyDialog(title: '标题', content: '内容');
        });
  }