Flutter自定义分享Dialog

效果图

控件代码

图片自己换下图片就不贴了!

import 'package:flutter/material.dart';

/// 底部分享Dialog
class ShareBottomDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _ItemWidget('assets/images/share_wx_friend.png', '微信朋友圈', () {
                Navigator.of(context).pop();
              }),
              _ItemWidget('assets/images/share_wx.png', '微信', () {
                Navigator.of(context).pop();
              }),
            ],
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            height: 1,
            color: Colors.black12,
          ),
          _cancelWidget((){
            Navigator.of(context).pop();
          }),
        ],
      ),
      color: Colors.white,
      height: 140,
    );
  }

  Widget _ItemWidget(String imageName, String text, VoidCallback callback) {
    return GestureDetector(
      onTap: callback,
      child: Container(
        constraints: BoxConstraints(
            minWidth: 80.0
            ),
        child: Column(
          children: [
            Image.asset(imageName, width: 40, height: 40),
            SizedBox(
              height: 10,
            ),
            Text(text)
          ],
        ),
      ),
    );
  }

  Widget _cancelWidget(VoidCallback callback){
    return GestureDetector(
      onTap: callback,
      child: Container(
        color: Colors.white,
        constraints: BoxConstraints(
          minWidth: double.infinity,
        ),
        child: Center(
          child: Text(
            '取消',
            style: TextStyle(fontSize: 16),
          ),
        ),
        height: 44,
      ),
    );
  }

}

弹出方法

class XJDialogManager{
  /// 分享弹窗
  static void showShareDialog(){
    showModalBottomSheet(
        context: G.getCurrentContext(),
        builder: (BuildContext context) {
          return ShareBottomDialog();
        });
  }
}

调用

XJDialogManager.showShareDialog();