关于flutter:Flutter-让你的Dialog脱胎换骨吧AttachDialogLoadingToast

48次阅读

共计 20176 个字符，预计需要花费 51 分钟才能阅读完成。

前言

Q：你毕生中闻过最臭的货色，是什么？

A：我那早已腐烂的梦。

兄弟萌！！！我又来了！

这次，我能自信的对大家说：我终于给大家带了一个，能真正帮忙大家解决诸多坑比场景的 pub 包！

将之前的 flutter_smart_dialog，在放弃 api 稳固的根底上，进行了各种抓头重构，解决了一系列问题

当初，我终于能够说：它当初是一个 简洁，弱小，侵入性极低 的 pub 包！

对于侵入性问题

  • 之前为了解决返回敞开弹窗，应用了一个很不优雅的解决办法，导致侵入性有点高
  • 这真是让我坐立不安，如芒刺背，如鲠在喉，这个问题终于搞定了！

同时，我在 pub 包外部设计了一个弹窗栈，能主动移除栈顶弹窗，也能够定点移除栈内标记的弹窗。

存在的问题

应用零碎弹窗存在一系列坑，来和各位探讨探讨

  • 必须传 BuildContext

    • 在一些场景必须多做一些传参工作，蛋痛但不难的问题

  • loading 弹窗

    • 应用零碎弹窗做 loading 弹窗，必定遇到过这个坑比问题

      • loading 封装在网络库外面：申请网络时加载 loading，手贱按了返回按钮，敞开了 loading
      • 而后申请完结后发现：特么我的页面怎么被关了！！！

    • 零碎弹窗就是一个路由页面，关闭系统就是用 pop 办法，这很容易误关失常页面

      • 当然必定有解决办法，路由监听的中央解决，此处就不细表了

  • 某页面弹出了多个零碎 Dialog，很难定点敞开某个非栈顶弹窗

    • 蛋蛋，这是路由入栈出栈机制导致的，了解的同时也一样要吐槽

  • 零碎 Dialog，点击事件无奈穿透暗色背景

    • 这个坑比问题，我是真没辙

相干思考

下面列举了一些比拟常见的问题，最重大的问题，应该就是 loading 的问题

  • loading 是个超高频应用的弹窗，敞开 loading 弹窗的办法，同时也能敞开失常应用的页面，自身就是一个隐患
  • 穿透 dialog 遮罩是个十分重要的性能，基于该性能，可能在理论业务中，实现很多骚操作
  • 既然在零碎 dialog 难以解决各种痛点，加上零碎 dialog 也是基于 overlay 去实现的，这样的话，咱们也能够去高度定制 overlay！

这次，我要一次性帮各位解决：toast 音讯，loading 弹窗，以及更弱小的自定义 dialog！

疾速上手

初始化

  • 引入（最新版本请点击 pub 查看）：pub，github，web effect
dependencies:
  flutter_smart_dialog: ^3.2.0
  • 接入形式更加简洁😊
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(),);
  }
}

极简应用

  • toast 应用💬
SmartDialog.showToast('test toast');

  • loading 应用⏳
SmartDialog.showLoading();
await Future.delayed(Duration(seconds: 2));
SmartDialog.dismiss();

  • dialog 应用🎨
var custom = Container(
    height: 80,
    width: 180,
    decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(20),
    ),
    alignment: Alignment.center,
    child: Text('easy custom dialog', style: TextStyle(color: Colors.white)),
);
// here
SmartDialog.show(widget: custom, isLoadingTemp: false);

OK，下面展现了，只须要极少的代码，就能够调用相应的性能

当然，外部还有不少中央做了非凡优化，接下来，我会具体的向大家形容下

你可能会有的疑难

初始化框架的时候，相比以前，竟然让大家多写了一个参数，心田非常愧疚😩

敞开页面实质上是一个比较复杂的状况，波及到

  • 物理返回按键
  • AppBar 的 back 按钮
  • 手动 pop

为了监控这些状况，不得已减少了一个路由监控参数

实体返回键

对返回按钮的监控，是十分重要的，根本能笼罩大多数状况

pop 路由

尽管对返回按钮的监控能笼罩大多数场景，然而一些手动 pop 的场景就须要新增参数监控

  • 不加FlutterSmartDialog.observer

    • 如果关上了穿透参数（就能够和弹窗后的页面交互），而后手动敞开页面
    • 就会呈现这种很难堪的状况

  • 加了FlutterSmartDialog.observer，就能比拟正当的解决了

    • 当然，这里的过渡动画，也提供了参数管制是否开启 😉

对于 FlutterSmartDialog.init()

本办法不会占用你的 builder 参数，init 外部回调进去了 builder，你能够大胆释怀的持续套

  • 例如：持续套 Bloc 全局实例😄
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage,
      navigatorObservers: [FlutterSmartDialog.observer],
      builder: FlutterSmartDialog.init(builder: _builder),
    );
  }
}

Widget _builder(BuildContext context, Widget? child) {
  return MultiBlocProvider(
    providers: [BlocProvider.value(value: BlocSpanOneCubit()),
    ],
    child: child!,
  );
}

超实用的参数：backDismiss

  • 这个参数是默认设置为 true，返回的时候会默认敞开弹窗；如果设置为 false，将不会敞开页面

    • 这样就能够非常轻松的做一个紧急弹窗，禁止用户的下一步操作
  • 咱们来看一个场景：假设某开源作者决定弃坑软件，不容许用户再应用该软件的弹窗
SmartDialog.show(
  // here
  backDismiss: false,
  clickBgDismissTemp: false,
  isLoadingTemp: false,
  widget: Container(
    height: 480,
    width: 500,
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
      color: Colors.white,
    ),
    alignment: Alignment.topCenter,
    child: SingleChildScrollView(
      child: Wrap(
        direction: Axis.vertical,
        crossAxisAlignment: WrapCrossAlignment.center,
        spacing: 10,
        children: [
          // title
          Text(
            '特大布告',
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
          ),
          // content
          Text('鄙人日夜钻研上面秘籍，终于胜利钓到富婆'),
          Image.network(
            'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211102213746.jpeg',
            height: 200,
            width: 400,
          ),
          Text('鄙人思考了三秒钟，怀着 \' 惨重 \'的情绪，决定弃坑本开源软件'),
          Text('自己今后的生存是富婆和远方，已无 \' 精力 \'再保护本开源软件了'),
          Text('各位叼毛，有缘江湖再见！'),
          // button (only method of close the dialog)
          ElevatedButton(onPressed: () => SmartDialog.dismiss(),
            child: Text('再会！'),
          )
        ],
      ),
    ),
  ),
);

从下面的效果图能够看进去

  • 点击遮罩，无奈敞开弹窗
  • 点击返回按钮无奈敞开弹窗
  • 只能点咱们本人的按钮，能力敞开弹窗，点击按钮的逻辑能够间接写成敞开 app 之类

只须要俩个简略的参数设置，就能实现这样一个很棒的应急弹窗

设置全局参数

SmartDialog 的全局参数都有着一个比拟正当的默认值

为了应酬多变的场景，你能够批改合乎你本人要求的全局参数

  • 设置合乎你的要求的数据，放在 app 入口就行初始化就行

    • 注：如果没有特殊要求，能够不必初始化全局参数（外部皆有默认值）
SmartDialog.config
  ..alignment = Alignment.center
  ..isPenetrate = false
  ..clickBgDismiss = true
  ..maskColor = Colors.black.withOpacity(0.35)
  ..maskWidget = null
  ..animationDuration = Duration(milliseconds: 260)
  ..isUseAnimation = true
  ..isLoading = true
  ..antiShake = false
  ..antiShakeTime = Duration(milliseconds: 300);
  • 代码的正文写的很欠缺，某个参数不明确的，点进去看看就行了

Attach 篇

这是一个很重要的性能，原本早就想加进去了，然而比较忙，始终搁置了；除夕（2022.1.1）开了头，就花了一些工夫，实现了这个性能和相干 demo

定位

定位指标 widget 的坐标，这个做起来并不难；然而必须要拿到咱们传入的自定义 widget 大小，这样能力将自定义 widget 叠放到一个比拟适合的地位（通过一些计算，获取中心点）

  • 实际上 Flutter 提供一个十分适合的组件CustomSingleChildLayout，这个组件还提供偏移坐标性能，按理来说十分适合
  • 然而，CustomSingleChildLayout 和 SizeTransition 动画控件，存在占位面积抵触，只能应用 AnimatedOpacity 渐隐动画
  • 位移动画不能用，这我没法忍，摈弃 CustomSingleChildLayout；应用了各种骚操作，终于拿到自定义 widget 的大小，比拟完满实现了成果

定位 dialog，应用 showAttach 办法，参数正文写的相当具体，不明确用法的看看正文就行了

弱小的定位性能

  • 必须传指标 widget 的 BuildContext，须要通过它计算出指标 widget 的坐标和大小
var attach = (BuildContext context, AlignmentGeometry alignment) async {
  SmartDialog.showAttach(
    targetContext: context,
    isPenetrateTemp: true,
    alignmentTemp: alignment,
    clickBgDismissTemp: false,
    widget: Container(width: 100, height: 100, color: randomColor()),
  );
  await Future.delayed(Duration(milliseconds: 350));
};

//target widget
List<BuildContext> contextList = [];
List<Future Function()> funList = [() async => await attach(contextList[0], Alignment.topLeft),
  () async => await attach(contextList[1], Alignment.topCenter),
  () async => await attach(contextList[2], Alignment.topRight),
  () async => await attach(contextList[3], Alignment.centerLeft),
  () async => await attach(contextList[4], Alignment.center),
  () async => await attach(contextList[5], Alignment.centerRight),
  () async => await attach(contextList[6], Alignment.bottomLeft),
  () async => await attach(contextList[7], Alignment.bottomCenter),
  () async => await attach(contextList[8], Alignment.bottomRight),
];
var btn = ({
  required String title,
  required Function(BuildContext context) onTap,
}) {return Builder(builder: (context) {Color? color = title.contains('all') ? randomColor() : null;
    contextList.add(context);
    return Container(
      width: 130,
      child: ElevatedButton(
        style: ButtonStyle(backgroundColor: ButtonStyleButton.allOrNull<Color>(color),
        ),
        onPressed: () => onTap(context),
        child: Text('$title'),
      ),
    );
  });
};

SmartDialog.show(
  isLoadingTemp: false,
  widget: Container(
    width: 700,
    padding: EdgeInsets.all(70),
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
      color: Colors.white,
    ),
    child: Wrap(
      spacing: 50,
      runSpacing: 50,
      alignment: WrapAlignment.spaceEvenly,
      children: [btn(title: 'topLeft', onTap: (context) => funList[0]()),
        btn(title: 'topCenter', onTap: (context) => funList[1]()),
        btn(title: 'topRight', onTap: (context) => funList[2]()),
        btn(title: 'centerLeft', onTap: (context) => funList[3]()),
        btn(title: 'center', onTap: (context) => funList[4]()),
        btn(title: 'centerRight', onTap: (context) => funList[5]()),
        btn(title: 'bottomLeft', onTap: (context) => funList[6]()),
        btn(title: 'bottomCenter', onTap: (context) => funList[7]()),
        btn(title: 'bottomRight', onTap: (context) => funList[8]()),
        btn(
          title: 'allOpen',
          onTap: (_) async {for (var item in funList) {await item();
            }
          },
        ),
        btn(
          title: 'allClose',
          onTap: (_) => SmartDialog.dismiss(status: SmartStatus.allAttach),
        ),
      ],
    ),
  ),
);

动画成果和 show 办法简直是统一的，为了这个统一的体验，外部做了相当多的针对性优化

自定义坐标点

  • 大多数状况根本都是应用 targetContext
SmartDialog.showAttach(
  targetContext: context,
  widget: Container(width: 100, height: 100, color: Colors.red),
);

  • 当然还有多数状况，须要应用自定义坐标，此处也提供 target 参数：设置了 target 参数，targetContext 将主动生效

    • targetContext 是非常常见到场景，所以，这边设置为必传参数，然而你能够给它设置为 null
SmartDialog.showAttach(
  targetContext: null,
  target: Offset(100, 100);,
  widget: Container(width: 100, height: 100, color: Colors.red),
);
  • 看来下自定义坐标点成果
var attach = (Offset offset) {var random = Random().nextInt(100) % 5;
  var alignment = Alignment.topCenter;
  if (random == 0) alignment = Alignment.topCenter;
  if (random == 1) alignment = Alignment.centerLeft;
  if (random == 2) alignment = Alignment.center;
  if (random == 3) alignment = Alignment.centerRight;
  if (random == 4) alignment = Alignment.bottomCenter;
  SmartDialog.showAttach(
    targetContext: null,
    target: offset,
    isPenetrateTemp: true,
    clickBgDismissTemp: false,
    alignmentTemp: alignment,
    keepSingle: true,
    widget: ClipRRect(borderRadius: BorderRadius.circular(10),
      child: Container(width: 100, height: 100, color: randomColor()),
    ),
  );
};

SmartDialog.show(
  isLoadingTemp: false,
  widget: Container(
    width: 600,
    height: 400,
    alignment: Alignment.center,
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
      color: Colors.white,
    ),
    child: GestureDetector(onTapDown: (detail) => attach(detail.globalPosition),
      child: Container(
        width: 500,
        height: 300,
        color: Colors.grey,
        alignment: Alignment.center,
        child: Text('click me', style: TextStyle(color: Colors.white)),
      ),
    ),
  ),
);

模拟 DropdownButton

  • 实际上模拟 DropdownButton 挺不容易的

    • 首先要计算 DropdownButton 控件的地位，在其地位上显示点击后的折叠控件
    • 须要解决 DropdownButton 之外区域的点击事件（点击区域外敞开 DropdownButton）
    • 还须要监听返回事件，手动 pop 路由事件；是这类事件的，须要敞开 DropdownButton
  • 这玩意要自定义，挺让人头大的；然而，当初你能够应用SmartDialog.showAttach 轻松模拟一个，上述须要留神的事项都帮你解决好了
// 模拟 DropdownButton
var imitate = (BuildContext context) {var list = ['小呆呆', '小菲菲', '小猪猪'];
  SmartDialog.showAttach(
    targetContext: context,
    isPenetrateTemp: true,
    widget: Container(margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
        boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 8, spreadRadius: 0.2)
        ],
      ),
      child: Column(children: List.generate(list.length, (index) {
          return Material(
            color: Colors.white,
            child: InkWell(onTap: () => SmartDialog.dismiss(),
              child: Container(
                height: 50,
                width: 100,
                alignment: Alignment.center,
                child: Text('${list[index]}'),
              ),
            ),
          );
        }),
      ),
    ),
  );
};

//imitate widget
var dropdownButton = ({String title = 'Dropdown'}) {
  return DropdownButton<String>(
    value: '1',
    items: [DropdownMenuItem(value: '1', child: Text('$title：小呆呆')),
      DropdownMenuItem(value: '2', child: Text('小菲菲')),
      DropdownMenuItem(value: '3', child: Text('小猪猪'))
    ],
    onChanged: (value) {},);
};
var imitateDropdownButton = () {return Builder(builder: (context) {
    return Stack(children: [dropdownButton(title: 'Attach'),
      GestureDetector(onTap: () => imitate(context),
        child: Container(height: 50, width: 140, color: Colors.transparent),
      )
    ]);
  });
};
SmartDialog.show(
  isLoadingTemp: false,
  widget: Container(
    width: 600,
    height: 400,
    alignment: Alignment.center,
    padding: EdgeInsets.symmetric(horizontal: 100),
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
      color: Colors.white,
    ),
    child: MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [dropdownButton(), imitateDropdownButton()],
      ),
    ),
  ),
);

高亮

这次把遮罩特定区域高亮的性能加上了，这是一个十分实用的性能！

  • 你只须要设置 highlight 参数即可

    • 定义高亮的区域，他必须是个不通透的 Widget，例如是 Contaienr，必须设置一个色彩（色值无要求）

      • 应用各种奇形怪状的图片也行，这样就能显示各种简单图形的高亮区域
    • highlight 类型是 Positioned，你能够在屏幕上定位任何须要高亮的区域
SmartDialog.showAttach(
  targetContext: context,
  alignmentTemp: Alignment.bottomCenter,
  highlight: Positioned(
    right: 190,
    bottom: 190,
    child: Container(
      height: 120,
      width: 120,
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),
        color: Colors.white,
      ),
    ),
  ),
  widget: Container(width: 100, height: 100, color: Colors.red),
);

理论的业务场景

  • 这边举俩个常见的例子，代码有一点点多，就不贴了，感兴趣的请查看：flutter_use

下面俩个业务场景十分常见，有时候，咱们须要指标 widget 下面或上面或特定的区域，不被遮罩笼罩

本人去做的话，能够做进去，然而会很麻烦；当初你能够应用 showAttach 中的 highlight 参数轻松实现这个需要

疏导操作

疏导操作在 app 上还是十分常见的，须要指定区域高亮，而后介绍其性能

  • 应用 showAttach 中的 highlight 参数，也能够轻松实现这个需要，来看下成果

    • 代码同样有一点点多，感兴趣的请查看：flutter_use

Dialog 篇

花里胡哨

弹窗从不同地位弹出，动画是有区别的

  • alignmentTemp：该参数设置不同，动画成果会有所区别
var location = ({
  double width = double.infinity,
  double height = double.infinity,
}) {return Container(width: width, height: height, color: randomColor());
};

//left
SmartDialog.show(widget: location(width: 70),
  alignmentTemp: Alignment.centerLeft,
);
await Future.delayed(Duration(milliseconds: 500));
//top
SmartDialog.show(widget: location(height: 70),
  alignmentTemp: Alignment.topCenter,
);
await Future.delayed(Duration(milliseconds: 500));
//right
SmartDialog.show(widget: location(width: 70),
  alignmentTemp: Alignment.centerRight,
);
await Future.delayed(Duration(milliseconds: 500));
//bottom
SmartDialog.show(widget: location(height: 70),
  alignmentTemp: Alignment.bottomCenter,
);
await Future.delayed(Duration(milliseconds: 500));
//center
SmartDialog.show(widget: location(height: 100, width: 100),
  alignmentTemp: Alignment.center,
  isLoadingTemp: false,
);

  • isPenetrateTemp：交互事件穿透遮罩
SmartDialog.show(
    alignmentTemp: Alignment.centerRight,
    isPenetrateTemp: true,
    clickBgDismissTemp: false,
    widget: Container(
        width: 80,
        height: double.infinity,
        color: randomColor(),),
);

dialog 栈

  • 这是一个弱小且实用的性能！

    • 能够很轻松的定点敞开某个弹窗
var stack = ({
  double width = double.infinity,
  double height = double.infinity,
  String? msg,
}) {
  return Container(
    width: width,
    height: height,
    color: randomColor(),
    alignment: Alignment.center,
    child: Text('dialog $msg', style: TextStyle(color: Colors.white)),
  );
};

//left
SmartDialog.show(
  tag: 'A',
  widget: stack(msg: 'A', width: 70),
  alignmentTemp: Alignment.centerLeft,
);
await Future.delayed(Duration(milliseconds: 500));
//top
SmartDialog.show(
  tag: 'B',
  widget: stack(msg: 'B', height: 70),
  alignmentTemp: Alignment.topCenter,
);
await Future.delayed(Duration(milliseconds: 500));
//right
SmartDialog.show(
  tag: 'C',
  widget: stack(msg: 'C', width: 70),
  alignmentTemp: Alignment.centerRight,
);
await Future.delayed(Duration(milliseconds: 500));
//bottom
SmartDialog.show(
  tag: 'D',
  widget: stack(msg: 'D', height: 70),
  alignmentTemp: Alignment.bottomCenter,
);
await Future.delayed(Duration(milliseconds: 500));

//center：the stack handler
SmartDialog.show(
  alignmentTemp: Alignment.center,
  isLoadingTemp: false,
  widget: Container(
    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(15)),
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
    child: Wrap(spacing: 20, children: [
      ElevatedButton(child: Text('close dialog A'),
        onPressed: () => SmartDialog.dismiss(tag: 'A'),
      ),
      ElevatedButton(child: Text('close dialog B'),
        onPressed: () => SmartDialog.dismiss(tag: 'B'),
      ),
      ElevatedButton(child: Text('close dialog C'),
        onPressed: () => SmartDialog.dismiss(tag: 'C'),
      ),
      ElevatedButton(child: Text('close dialog D'),
        onPressed: () => SmartDialog.dismiss(tag: 'D'),
      ),
    ]),
  ),
);

Loading 篇

避坑指南

  • 开启 loading 后，能够应用以下形式敞开

    • SmartDialog.dismiss()：能够敞开 loading 和 dialog
    • status 设置为 SmartStatus.loading：仅仅敞开 loading
// easy close
SmartDialog.dismiss();
// exact close
SmartDialog.dismiss(status: SmartStatus.loading);

  • 一般来说，loading 弹窗是封装在网络库外面的，随着申请状态的主动开启和敞开

    • 基于这种场景，我倡议：应用 dismiss 时，加上 status 参数，将其设置为：SmartStatus.loading

  • 坑比场景

    • 网络申请加载的时候，loading 也随之关上，这时很容易误触返回按钮，敞开 loading
    • 当网络申请完结时，会主动调用 dismiss 办法
    • 因为 loading 已被敞开，假如此时页面又有 SmartDialog 的弹窗，未设置 status 的 dismiss 就会敞开 SmartDialog 的弹窗
    • 当然，这种状况很容易解决，封装进网络库的 loading，应用：SmartDialog.dismiss(status: SmartStatus.loading); 敞开就行了

  • status参数，是为了准确敞开对应类型弹窗而设计的参数，在一些非凡场景能起到微小的作用

    • 如果大家了解这个参数的含意，那对于何时增加 status 参数，必能胸有成竹

参数阐明

参数在正文外面写的非常具体，就不赘述了，来看看成果

  • maskWidgetTemp：弱小的遮罩自定义性能😆，施展你的脑洞吧。。。
var maskWidget = Container(
  width: double.infinity,
  height: double.infinity,
  child: Opacity(
    opacity: 0.6,
    child: Image.network(
      'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101103911.jpeg',
      fit: BoxFit.fill,
    ),
  ),
);
SmartDialog.showLoading(maskWidgetTemp: maskWidget);

  • maskColorTemp：反对快捷自定义遮罩色彩
SmartDialog.showLoading(maskColorTemp: randomColor().withOpacity(0.3));

/// random color
Color randomColor() => Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1);

  • background：反对加载背景自定义
SmartDialog.showLoading(background: randomColor());

/// random color
Color randomColor() => Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1);

  • isLoadingTemp：动画成果切换
SmartDialog.showLoading(isLoadingTemp: false);

  • isPenetrateTemp：交互事件能够穿透遮罩，这是个非常有用的性能，对于一些非凡的需要场景非常要害
SmartDialog.showLoading(isPenetrateTemp: true);

自定义 Loading

应用 showLoading 能够轻松的自定义出弱小的 loading 弹窗；鄙人脑洞无限，就简略演示下

自定义一个 loading 布局

class CustomLoading extends StatefulWidget {const CustomLoading({Key? key, this.type = 0}) : super(key: key);

  final int type;

  @override
  _CustomLoadingState createState() => _CustomLoadingState();
}

class _CustomLoadingState extends State<CustomLoading>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    _controller.forward();
    _controller.addStatusListener((status) {if (status == AnimationStatus.completed) {_controller.reset();
        _controller.forward();}
    });
    super.initState();}

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      // smile
      Visibility(visible: widget.type == 0, child: _buildLoadingOne()),

      // icon
      Visibility(visible: widget.type == 1, child: _buildLoadingTwo()),

      // normal
      Visibility(visible: widget.type == 2, child: _buildLoadingThree()),
    ]);
  }

  Widget _buildLoadingOne() {
    return Stack(alignment: Alignment.center, children: [
      RotationTransition(
        alignment: Alignment.center,
        turns: _controller,
        child: Image.network(
          'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101174606.png',
          height: 110,
          width: 110,
        ),
      ),
      Image.network(
        'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101181404.png',
        height: 60,
        width: 60,
      ),
    ]);
  }

  Widget _buildLoadingTwo() {
    return Stack(alignment: Alignment.center, children: [
      Image.network(
        'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101162946.png',
        height: 50,
        width: 50,
      ),
      RotationTransition(
        alignment: Alignment.center,
        turns: _controller,
        child: Image.network(
          'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101173708.png',
          height: 80,
          width: 80,
        ),
      ),
    ]);
  }

  Widget _buildLoadingThree() {
    return Center(
      child: Container(
        height: 120,
        width: 180,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(15),
        ),
        alignment: Alignment.center,
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          RotationTransition(
            alignment: Alignment.center,
            turns: _controller,
            child: Image.network(
              'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101163010.png',
              height: 50,
              width: 50,
            ),
          ),
          Container(margin: EdgeInsets.only(top: 20),
            child: Text('loading...'),
          ),
        ]),
      ),
    );
  }

  @override
  void dispose() {_controller.dispose();
    super.dispose();}
}

来看看成果

  • 成果一
SmartDialog.showLoading(isLoadingTemp: false, widget: CustomLoading());
await Future.delayed(Duration(seconds: 2));
SmartDialog.dismiss();

  • 成果二
SmartDialog.showLoading(
    isLoadingTemp: false,
    widget: CustomLoading(type: 1),
);
await Future.delayed(Duration(seconds: 2));
SmartDialog.dismiss();

  • 成果三
SmartDialog.showLoading(widget: CustomLoading(type: 2));
await Future.delayed(Duration(seconds: 2));
SmartDialog.dismiss();

Toast 篇

toast 的特殊性

严格来说，toast 是一个十分非凡的弹窗，我感觉理当具备下述的特色

toast 音讯理当一个个展现，后续音讯不应该顶掉后面的 toast

  • 这是一个坑点，如果框架外部不做解决，很容易呈现前面 toast 会间接顶掉后面 toast 的状况

    • 当然，外部提供了 type 参数，你能够抉择你想要的显示逻辑

展现在页面最上层，不应该被一些弹窗之类遮挡

  • 能够发现 loading 和 dialog 的遮罩等布局，均未遮挡 toast 信息

对键盘遮挡状况做解决

  • 键盘这玩意有点坑，会间接遮挡所有布局，只能曲线救国

    • 在这里做了一个非凡解决，当唤起键盘的时候，toast 本人会动静的调整本人和屏幕底部的间隔
    • 这样就能起到一个，键盘不会遮挡 toast 的成果

自定义 Toast

参数阐明

toast 的一些参数并未向外裸露，仅仅裸露了 msg 和 alignment

  • 例如：toast 字体大小，字体色彩，toast 的背景色等等之类，都没提供参数

    • 一是感觉提供了这些参数，会让整体参数输出变的十分多，乱花渐入迷人眼
    • 二是感觉就算我提供了很多参数，也不肯定会满足那些奇奇怪怪的审美和需要

  • 基于上述的思考，我间接提供了大量的底层参数

    • 你能够得心应手的定制 toast

      • 留神喔，不仅仅能够定制 toast，例如：胜利提醒，失败提醒，正告提醒等等
      • Toast 做了很多的优化，type 参数，让你能领有多种显示逻辑，施展你的想象力吧
    • 留神：应用了 widget 参数，msg和 alignment 参数会生效

调整 toast 显示的地位

SmartDialog.showToast('the toast at the bottom');
SmartDialog.showToast('the toast at the center', alignment: Alignment.center);
SmartDialog.showToast('the toast at the top', alignment: Alignment.topCenter);

更弱小的自定义 toast

  • 首先，整一个自定义 toast
class CustomToast extends StatelessWidget {const CustomToast(this.msg, {Key? key}) : super(key: key);

  final String msg;

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(margin: EdgeInsets.only(bottom: 30),
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 7),
        decoration: BoxDecoration(color: _randomColor(),
          borderRadius: BorderRadius.circular(100),
        ),
        child: Row(mainAxisSize: MainAxisSize.min, children: [
          //icon
          Container(margin: EdgeInsets.only(right: 15),
            child: Icon(Icons.add_moderator, color: _randomColor()),
          ),

          //msg
          Text('$msg', style: TextStyle(color: Colors.white)),
        ]),
      ),
    );
  }

  Color _randomColor() {
    return Color.fromRGBO(Random().nextInt(256),
      Random().nextInt(256),
      Random().nextInt(256),
      1,
    );
  }
}
  • 应用
SmartDialog.showToast('', widget: CustomToast('custom toast'));
  • 成果

骚气的小技巧

有一种场景比拟蛋筒

  • 咱们应用 StatefulWidget 封装了一个小组件
  • 在某个非凡的状况，咱们须要在这个组件内部，去触发这个组件外部的一个办法
  • 对于这种场景，有不少实现办法，然而弄起来可能有点麻烦

这里提供一个简略的小思路，能够十分轻松的触发，组件外部的某个办法

  • 建设一个小组件
class OtherTrick extends StatefulWidget {const OtherTrick({Key? key, this.onUpdate}) : super(key: key);

  final Function(VoidCallback onInvoke)? onUpdate;

  @override
  _OtherTrickState createState() => _OtherTrickState();
}

class _OtherTrickState extends State<OtherTrick> {
  int _count = 0;

  @override
  void initState() {
    // here
    widget.onUpdate?.call(() {
      _count++;
      setState(() {});
    });

    super.initState();}

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text('Counter：$_count', style: TextStyle(fontSize: 30.0)),
      ),
    );
  }
}
  • 展现这个组件，而后内部触发它
VoidCallback? callback;

// display
SmartDialog.show(
  alignmentTemp: Alignment.center,
  widget: OtherTrick(onUpdate: (VoidCallback onInvoke) => callback = onInvoke,
  ),
);

await Future.delayed(Duration(milliseconds: 500));

// handler
SmartDialog.show(
  alignmentTemp: Alignment.centerRight,
  maskColorTemp: Colors.transparent,
  widget: Container(
    height: double.infinity,
    width: 150,
    color: Colors.white,
    alignment: Alignment.center,
    child: ElevatedButton(child: Text('add'),
      onPressed: () => callback?.call(),
    ),
  ),
);
  • 来看下成果

最初

相干地址

  • github：flutter_smart_dialog
  • 文中 demo 地址：flutter_use
  • demo 演示成果：在线体验

哎，人总是在一直的迷茫中前行。。。

正文完
flutter
发表至： flutter
2022-01-03
 0
关于flutter:Flutter-Cupertino-教程如何构建外观和感觉原生的-iOS-应用
关于flutter:flutter项目搭建-windows-新建项目
关于flutter:15-个-JavaScript-代码示例及其-Dart-对应代码
关于flutter:开发实战｜知晓云-Flutter-SDK-已发布助力-200-万开发者极速上云