Flutter对话框加载动画插件dialog_loader的使用

dialog_loader

一个简单的加载器创建方式，你可以轻松地将加载器与流行的状态管理结合使用。

新功能 💥

• barrierDismissible 默认在加载时设置为 false，并在加载完成时自动设置为 true。
• 加载器支持资源文件和网络图像。

安装

在你的 pubspec.yaml 文件中包含 dialog_loader：

dependencies:
  flutter:
    sdk: flutter
  dialog_loader: version

现在可以在 Dart 代码中使用：

import 'package:dialog_loader/dialog_loader.dart';

预览

LoaderTheme.dialogDefault	LoaderTheme.dialogCircle

LoaderTheme.dialogDefault (左图标和右图标)	LoaderTheme.dialogCircle (网络图像)

使用 dialog_loader 包，你可以轻松地将加载器与流行的状态管理结合在一起处理状态更新，如加载、错误和成功状态。

使用

你可以在 GitHub 仓库中查看使用的示例：

https://github.com/sud0su/dialog_loader/tree/main/example/

创建一个新的实例，并传递上下文作为参数。

[@override](/user/override)
Widget build(BuildContext context) {
  DialogLoader dialogLoader = DialogLoader(context: context);
}

创建默认选项的加载器：

_dialogLoader(context) async {
  dialogLoader.show(
    theme: LoaderTheme.dialogCircle,
    title: Text("Loading"),
    leftIcon: SizedBox(
      child: CircularProgressIndicator(),
      height: 25.0,
      width: 25.0,
    ),
  );
}

你不需要更新状态，只需传递值：

void _update() {
  _dialogLoader(context);
  Future.delayed(const Duration(seconds: 4), () {
    dialogLoader.update(
      title: Text("Done"),
      leftIcon: Icon(Icons.done),
      autoClose: false,
      barrierDismissible: true,
    );
  });
}

构造函数

属性

捐赠

如果你喜欢这个包？请买杯咖啡支持我 :)

示例代码

import 'dart:async';

import 'package:dialog_loader/dialog_loader.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class ShowLoader {
  static late DialogLoader _dialogLoader;

  Future<void> show(BuildContext context) async {
    _dialogLoader = DialogLoader(context: context);
    _dialogLoader.show(
      theme: LoaderTheme.dialogCircle,
      title: Text("Loading"),
      leftIcon: CircularProgressIndicator(),
    );
  }

  void update(String title, IconData leftIcon, {Color colors: Colors.black87}) {
    _dialogLoader.update(
      title: Text(
        title,
        style: TextStyle(color: colors),
      ),
      leftIcon: Icon(
        leftIcon,
        color: colors,
      ),
      autoClose: false,
      barrierDismissible: true,
    );
  }
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool show = false;

  TextEditingController form1 = TextEditingController();
  TextEditingController form2 = TextEditingController();
  final ShowLoader showLoader = ShowLoader();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(20.0),
        child: ListView(
          children: [
            TextField(
              controller: form1,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Email',
              ),
            ),
            TextField(
              controller: form2,
              obscureText: true,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Password',
              ),
            ),
            ElevatedButton(
              child: Text("Sign In"),
              onPressed: () async {
                form1.clear();
                form2.clear();

                // 调用加载器
                showLoader.show(context);

                // 更改加载器
                Future.delayed(const Duration(seconds: 4), () {
                  // 你不需要添加延迟时间，这只是为了演示
                  showLoader.update(
                    "There is no user record corresponding to this identifier. The user may have been deleted.",
                    Icons.error,
                    colors: Colors.red,
                  );
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}