flutter开发使用Overlay实现Toast功能

flutter使用Overlay实现Toast功能，代码如下：

void _showToast(BuildContext context) {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = OverlayEntry(
      builder: (context) {
        return Positioned(
          bottom: MediaQuery.of(context).size.height * 0.2,
          child: Material(
            color: Colors.transparent,
            child: Container(
              color: Colors.transparent,
              width: MediaQuery.of(context).size.width,
              alignment: Alignment.center,
              child: Container(
                child: Text('message'),
                padding: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.grey.withOpacity(0.6),
                ),
              ),
            ),
          ),
        );
      },
    );
    overlayState.insert(overlayEntry);
    Future.delayed(Duration(seconds: 2)).then((value) {
      overlayEntry.remove();
    });
  }

封装为工具类，并且项目里使用，代码如下：

• toast_utils.dart工具类

import 'package:flutter/material.dart';

class ToastUtils {
  static BuildContext _context;
  static OverlayEntry _overlayEntry;
  static Timer _timer;

  ToastUtils._();

  static void init(BuildContext context) {
    _context = context;
  }

  static void showToast(String message, {BuildContext context}) {
    _overlayEntry?.remove();
    _timer?.cancel();
    OverlayState overlayState = Overlay.of(context ?? _context);
    _overlayEntry = OverlayEntry(
      builder: (ctx) {
        return Positioned(
          bottom: MediaQuery.of(ctx).size.height * 0.2,
          child: Material(
            color: Colors.transparent,
            child: Container(
              color: Colors.transparent,
              width: MediaQuery.of(ctx).size.width,
              alignment: Alignment.center,
              child: Container(
                child: Text(message),
                padding: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.grey.withOpacity(0.6),
                ),
              ),
            ),
          ),
        );
      },
    );
    overlayState.insert(_overlayEntry);

    _timer = Timer.periodic(Duration(seconds: 2), (timer) {
      _overlayEntry?.remove();
      _overlayEntry = null;
      timer.cancel();
    });
  }
}

• 项目里配置和使用

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Builder(builder: (c) {
        ToastUtils.init(c);	//1. 配置全局context
        return MyHomePage(title: 'Flutter Demo Home Page');
      }),
    );
  }
}

ToastUtils.showToast('message');	//2. 配置了全局context使用时就不用传递context了。

• 代码地址

https://github.com/yongfengnice/flutter_circle_progress