1877: 【入门】烤面包_扑烤面包机-CSDN博客

1877: 【入门】烤面包

This tutorial, We are going to make out own toast utility without using any third-party library.I shall be sharing the gist. Gist can modify based on your requirements.

在本教程中，我们将在不使用任何第三方库的情况下制作自己的toast实用程序。我将分享要点。要点可以根据您的要求进行修改。

Requirements:

要求：

A Utility Method to Show/Hide and Position the toast.
一种显示/隐藏和定位烤面包的实用方法。
A decorator, which can help update custom borders and corners.
装饰器，可以帮助更新自定义边框和角。
A widget to show as Toast.
显示为Toast的小部件。

A Utility Method to Show/Hide the toast:

显示/隐藏吐司的实用方法：

This method will require the position, context and duration of a widget, also the widget itself. We will also need a singleton class. This class will take hold of the Widget. So that we can remove the widget in the Future.

此方法将需要小部件的位置，上下文和持续时间，以及小部件本身。我们还将需要一个单例课程。此类将掌握Widget。这样我们就可以在将来删除小部件。

//Positionenum ToastGravity {bottom,center,top}//public method:class ToastUtil {static void show(Widget widget, BuildContext context,
      {int duration = 2,
        ToastGravity gravity = ToastGravity.bottom,
        }) {
        // hide older tost 
        //show new toast
    }
}//singleton view - privateclass _ToastView {static final _ToastView _singleton = new _ToastView._internal(); factory _ToastView() {return _singleton;
  }
  _ToastView._internal();
}

We going to show a widget on the overlay as an overlay entity. Our _ToastView needs to hold overlay state and overlayEntry. We shall also need one flag to check if older overlay been removed or not.

我们将在叠加层上显示一个小部件作为叠加层实体。我们的_ToastView需要保留overlay状态和overlayEntry 。我们还需要一个标志来检查是否删除了较旧的覆盖层。

class _ToastView {static OverlayState overlayState;static OverlayEntry _overlayEntry;static bool _isVisible = false;
}

Show/Hide widget to overlay:

显示/隐藏小部件以覆盖：

static void createViewToast(
    BuildContext context,
    int duration,
    ToastGravity gravity,
    Widget widget,
    ) async {overlayState = Overlay.of(context);_overlayEntry = OverlayEntry(
      //_ToastWidget => we shall be implementing this widget later
      builder: (BuildContext context) => _ToastWidget( 
        widget: widget,
        gravity: gravity,
    )
  );_isVisible = true;overlayState.insert(_overlayEntry);//wait for given duration before closing.await new Future.delayed(Duration(
      seconds: duration));dismiss();
}

In the above code, we can see a private wrapper widget ‘_ToastWidget’. this widget is to position widget based on gravity.

在上面的代码中，我们可以看到私有包装窗口小部件“ _ToastWidget”。此小部件将基于重力定位小部件。

class _ToastWidget extends StatelessWidget {
  _ToastWidget({
    Key key,
    @required this.widget,
    @required this.gravity,
  }) : super(key: key);final Widget widget;final ToastGravity gravity;
  @override
  Widget build(BuildContext context) {return new Positioned(
        top: gravity == ToastGravity.top ? MediaQuery.of(context).viewInsets.top + 50 : null,
        bottom:gravity == ToastGravity.bottom ? MediaQuery.of(context).viewInsets.bottom + 50 : null,
        child: Material(
          color: Colors.transparent, //use the widget color
          child: widget,
        ));
  }
}

A decorator, which can help update custom borders and corners:

装饰器，可以帮助更新自定义边框和角：

The Decorator accepts widget with decorative parameters like margin padding etc. You can pass your widget directly to ToastUtil or wrapt in ToastDecorator so that you can avoid repetitive decoration code.

Decorator接受带有装饰性参数(如边距填充等)的小部件。您可以将小部件直接传递到ToastUtil或包装在ToastDecorator中，以便避免重复的装饰代码。

class ToastDecorator extends StatelessWidget {final Widget widget;final Color backgroundColor;final Border border;final EdgeInsets margin;final EdgeInsets padding;final BorderRadius borderRadius;
  ToastDecorator({
    @required this.widget,this.backgroundColor = Colors.black,this.border = const Border(),this.margin = const EdgeInsets.symmetric(horizontal: 20),this.padding = const EdgeInsets.fromLTRB(16, 10, 16, 10),this.borderRadius = const BorderRadius.all(Radius.circular(20.0))
  }) {}
  @override
  Widget build(BuildContext context) {return Container(
         width: MediaQuery.of(context).size.width,
         child: Container(
          alignment: Alignment.center,
          width: MediaQuery.of(context).size.width,
          child: Container(
              decoration: BoxDecoration(
              color: backgroundColor,
              borderRadius: this.borderRadius,
              border: this.border,
           ),
           margin: margin,
           padding: padding,
           child: widget,
         )
        )
     );
  }
}

Showing Toast:

显示吐司：

//Show warning Toast on top of view ToastUtil.show(
      ToastDecorator(
        widget: Text("warning message",
            style: TextStyle(color: Colors.white)
        ),
        backgroundColor: Colors.red,
      ),
      context,
      gravity: ToastGravity.top);
},//Show information Toast on bottom of viewToastUtil.show(
    ToastDecorator(
      widget: Text("info message",
          style: TextStyle(color: Colors.white)
      ),
      backgroundColor: Colors.black,
    ),
    context,
    gravity: ToastGravity.bottom);//Show Custom viewToastDecorator(
  widget:  Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[const ListTile(
        leading: Icon(Icons.album, size: 50),
        title: Text('Heart Shaker', style: TextStyle(color: Colors.white)),
        subtitle: Text('TWICE', style: TextStyle(color: Colors.white)),
      ),
    ],
  ),
  backgroundColor: Colors.greenAccent,
),
context,
gravity: ToastGravity.top);