Flutter 交互组件

目录

• 前言
• fluttertoast 8.2.5
• flutter_smart_dialog
  • 快速开始
• Flutter 原生组件
• 总结

前言

现在主流的交互方式是Toast和Dialog。细分下来就是

• message
  • info
  • success
  • error
  • warning
• loading
• confrim
• input
• select

这么多组件，纯自己手写肯定是不可能的，我个人的学习逻辑是能用框架就用框架。

fluttertoast 8.2.5

fluttertoast 8.2.5：https://pub.dev/packages/fluttertoast

FlutterToast只是一个简单的消息提示，实现的功能实在是太少了

flutter_smart_dialog

flutter_smart_dialog：https://pub.dev/packages/flutter_smart_dialog

flutter_smart_dialog是一个国人开发的组件，文档还是挺详细的

这一次，解决Flutter Dialog的各种痛点！：https://juejin.cn/post/7026150456673959943

flutter_smart_dialog 文档:https://xdd666t.github.io/flutter_use/web/index.html#/smartDialog

但是我用的时候不知道为什么，不能自动导包，重启了好几次都不行，很奇怪

快速开始

引入

dependencies:
  flutter_smart_dialog: ^4.9.3+2

初始化

import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage,
      // here
      navigatorObservers: [FlutterSmartDialog.observer],
      // here
      builder: FlutterSmartDialog.init(),
    );
  }
}

使用

      SmartDialog.showToast('test toast');

但是我用了一下，发现它没有把Confrim，Select,Input这三个常用的进行封装，所以我们还得用一下别的组件

Flutter 原生组件

Flutter-Dialog组件详解：https://juejin.cn/post/7036915754607837192
这部分我就之间上代码了，我这里用了异步封装了一下

import 'package:flutter/material.dart';

class MessageHelper {
  static Future<bool> Confrim(
      BuildContext context, String title, String message) async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text(title),
            content: Text(message),
            actions: <Widget>[
              TextButton(
                  child: Text(
                    '取消',
                    style: TextStyle(color: Colors.grey),
                  ),
                  onPressed: () {
                    Navigator.pop(context, false);
                  }),
              TextButton(
                child: Text(
                  '确定',
                  style: TextStyle(color: Colors.blue),
                ),
                onPressed: () {
                  Navigator.pop(context, true);
                },
              ),
            ],
          );
        });
    result ??= false;
    return result as bool;
  }

  static Future<int> Select(
      BuildContext context, String title, List<String> choices) async {
    var children = <Widget>[];
    for(var i = 0;i < choices.length;i++){
      children.add(
        SimpleDialogOption(
          child: Text(choices[i]),
          onPressed: () {
            Navigator.pop(context, i);
          },
        ),
      );
      if(i != choices.length -1){
        children.add(Divider());
      }
    }
    var result = await showDialog(
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text(title),
            children:children,
          );
        });
    result ??= -1;
    return result as int;
  }
}

总结

Flutter 的生态还是很多的，感觉还行，写代码的时候，编译通过了，一般不会出现什么异常的错误，还能接受。