zhiying_base_widget/lib/widgets/share/share_alert.dart

import 'dart:ui';

import 'package:flutter/material.dart';

class ShareAlert extends StatelessWidget {
  final Widget child;

  const ShareAlert({Key key, this.child}) : super(key: key); // 中间视图

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), //背景
          child: Container(
            child: Column(
              children: <Widget>[
                Expanded(
                  child: Center(child: child ?? Container()),
                ),
                _ShareAlertContent(),
              ],
            ),
          ), // 模糊化
        ),
      ),
      onTap: () {
        Navigator.of(context).pop();
      },
    );
  }
}

class _ShareAlertContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(12),
            topRight: Radius.circular(12),
          ),
        ),
        child: SafeArea(
          top: false,
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(top: 8, bottom: 8),
                width: 62,
                height: 4,
                decoration: BoxDecoration(
                    color: Color(0xffd8d8d8),
                    borderRadius: BorderRadius.circular(2)),
              ),
              Text(
                '分享至',
                style: TextStyle(
                    fontSize: 15,
                    color: Color(0xff333333),
                    fontWeight: FontWeight.bold),
              ),
              Container(
                margin:
                    EdgeInsets.only(left: 12, right: 12, top: 10, bottom: 10),
                child: _createIcons(),
              ),
              GestureDetector(
                child: Container(
                  margin: EdgeInsets.only(left: 12, right: 12, bottom: 10),
                  padding: EdgeInsets.all(12),
                  decoration: BoxDecoration(
                      color: Color(0xfff3f3f3),
                      borderRadius: BorderRadius.circular(8)),
                  child: Center(
                    child: Text(
                      '取消',
                      style: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                          color: Color(0xff999999)),
                    ),
                  ),
                ),
                onTap: () {
                  Navigator.of(context).pop();
                },
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _createIcons() {
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      children: List.generate(6, (index) {
        return _createIcon();
      }),
    );
  }

  Widget _createIcon() {
    return Container(
      width: 60,
      child: Column(
        children: <Widget>[
          Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.redAccent),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 2, bottom: 2),
            child: Text(
              '分享平台',
              style: TextStyle(
                  fontSize: 12,
                  color: Color(0xff333333),
                  fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),
    );
  }
}