OKToast 是一款 在 flutter 上 使用的 toast 插件,使用简单, 可定制性强, 纯 flutter, 调用不用 context.

Plugins :pub.dev/packages/ok…

One: Basic use

1. Add dependencies

Dependencies: oktoast: ^ 2.2.0Copy the code

2. Obtain dependency packages

flutter pub get
Copy the code

3. Import it to the required file

import 'package:oktoast/oktoast.dart';
Copy the code

In 4, the main dartThe MaterialApp is covered with a layer of OKToast components

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OKToast(
      dismissOtherOnShow: true,
      child: MaterialApp(
        title: 'FlutterUI learning',
        debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.red, ), home: DemoApp(), ), ); }}Copy the code

5. Add a button in the interface and click the button to test, as shown in the picture below



2. Customize Toast

1. Pop the custom message box and create a custom button on the interface to trigger the custom message box

class MyOkToast extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnContainer(margin: EdgeInsets. All (10.0), child: Column(children: <Widget>[RaisedButton(onPressed: (){showToast("hello"); },child: Text("showToast")), RaisedButton(onPressed: (){showToastWidget(CorrectToast()); },child: Text("Custom Toast")),,),); }}Copy the code

2. Create a custom message box componentCorrectToast 

class CorrectToast extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 140,
      height: 140,
      color: Colors.green,
      child: Image.asset("images/right.png")); }}Copy the code

3. Click the button to test




Three, other

A) Manually hide Toast

dismissAllToast();
Copy the code

B, hide all toasts previously displayed while displaying them

showToast("hello", dismissOtherToast: true);
Copy the code

C, hide the toast displayed before the global setting pops up

OKToast(
  dismissOtherOnShow: true,...).Copy the code

D) hide separate toasts

var future = showToast("hello"); future.dismiss(); // Hide the specified toastCopy the code

E, attribute annotation

Duration: delay hiding time onDismiss: callback when hiding Position: position of toast RADIUS: size of round corner textAlign: TextDirection: LTR or RTL textPadding: margin padding of text textStyle: style of textCopy the code