短视频平台搭建，收到通知后弹出相关提示的弹窗

短视频平台搭建，收到通知后弹出相关提示的弹窗实现的相关代码

一.Flutter toast库配置,可参考fluttertoast配置引用

 

1.在pubspec.yaml中配置fluttertoast库，通过Pub get 获取fluttertoast的版本，通过Pub upgrade更新，eg:

 

 # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  provider: ^5.0.0
  fluttertoast: ^8.0.8

​

2.在需要显示toast的dart文件中，import fluttertoast.dart,eg:

 

import 'package:fluttertoast/fluttertoast.dart';

 

3.fluttertoast.dart源码查看

 

/// Summons the platform's showToast which will display the message
  ///
  /// Wraps the platform's native Toast for android.
  /// Wraps the Plugin https://github.com/scalessec/Toast for iOS
  /// Wraps the https://github.com/apvarun/toastify-js for Web
  ///
  /// Parameter [msg] is required and all remaining are optional
  static Future<bool?> showToast({
    required String msg,
    Toast? toastLength,
    int timeInSecForIosWeb = 1,
    double? fontSize,
    ToastGravity? gravity,
    Color? backgroundColor,
    Color? textColor,
    bool webShowClose = false,
    webBgColor: "linear-gradient(to right, #00b09b, #96c93d)",
    webPosition: "right",
  }) async {
    String toast = "short";
    if (toastLength == Toast.LENGTH_LONG) {
      toast = "long";
    }
 
    String gravityToast = "bottom";
    if (gravity == ToastGravity.TOP) {
      gravityToast = "top";
    } else if (gravity == ToastGravity.CENTER) {
      gravityToast = "center";
    } else {
      gravityToast = "bottom";
    }
 
//lines from 78 to 97 have been changed in order to solve issue #328
    if (backgroundColor == null) {
      backgroundColor = Colors.black;
    }
    if (textColor == null) {
      textColor = Colors.white;
    }
    final Map<String, dynamic> params = <String, dynamic>{
      'msg': msg,
      'length': toast,
      'time': timeInSecForIosWeb,
      'gravity': gravityToast,
      'bgcolor': backgroundColor != null ? backgroundColor.value : null,
      'iosBgcolor': backgroundColor != null ? backgroundColor.value : null,
      'textcolor': textColor != null ? textColor.value : null,
      'iosTextcolor': textColor != null ? textColor.value : null,
      'fontSize': fontSize,
      'webShowClose': webShowClose,
      'webBgColor': webBgColor,
      'webPosition': webPosition
    };
 
    bool? res = await _channel.invokeMethod('showToast', params);
    return res;
  }
}

 

二.自定义fluttertoast

 

1.定义FToast字段,eg:

 

FToast fToast;

 

2.初始化定义的FToast，eg:

 

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    fToast=FToast();
    fToast.init(context);
  }

 

3.定义FToast显示的方法,包括内容,布局,和显示时长，eg:

 

_showToast() {
    Widget toast = Container(
      padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
      alignment: Alignment.center,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: const [
          SizedBox(
            width: 50.0,
          ),
          Text(
            "Dividend cannot be zero",
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              color: Colors.black,
              backgroundColor: Colors.white,
              fontSize: 18,
            ),
          )
        ],
      ),
    );
 
 
    fToast.showToast(
      child: toast,
      gravity: ToastGravity.BOTTOM,
      toastDuration: const Duration(seconds: 1),
    );
 
    // Custom Toast Position
    fToast.showToast(
        child: toast,
        toastDuration: const Duration(seconds: 3),
        positionedToastBuilder: (context, child) {
          return Positioned(
            child: child,
            top: 15.0,
            left: 15.0,
          );
        });
  }

 

以上就是短视频平台搭建，收到通知后弹出相关提示的弹窗实现的相关代码， 更多内容欢迎关注之后的文章