Flutter加载状态显示插件widget_loading的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter加载状态显示插件widget_loading的使用

widget_loading 是一个Flutter插件，它提供了简单的组件来展示加载中的内容。这个插件可以很容易地隐藏在没有东西需要展示时的组件，并同时提供加载动画。

example1 example2

插件特性

  • 简单易用且高度可定制。
  • 支持两种主要类型的加载组件：WiperLoading 和 CircularWidgetLoading。

安装

在您的pubspec.yaml文件中添加依赖：

dependencies:
  widget_loading: ^latest_version # 替换为最新版本号

然后执行命令安装依赖：

flutter pub get

使用方法

WiperLoading

WiperLoading 是一个用于展示加载状态的组件，它可以通过设置参数来自定义其外观和行为。以下是一个基本的例子：

WiperLoading(
  loading: loading, // 控制是否显示加载状态
  interval: interval, // 设置间隔时间
  wiperDeformingFactor: deformingFactor, // 设置变形因子
  curve: curve, // 设置动画曲线
  wiperBuilder: builder, // 自定义wiper构造器
  wiperWidth: wiperWidth, // 设置wiper宽度
  wiperColor: wiperColor, // 设置wiper颜色
  sizeCurve: sizeCurve, // 设置大小变化曲线
  sizeDuration: sizeDuration, // 设置大小变化持续时间
  direction: wiperDirection, // 设置wiper方向
  child: Padding(
    padding: const EdgeInsets.all(15.0),
    child: yourChild, // 加载完成后的子组件
  ),
)

或者直接通过future来控制加载状态：

WiperLoading.future(
  future: futureOfYourWidget, // 需要等待的Future对象
  // 其他配置项...
)

CircularWidgetLoading

CircularWidgetLoading 是另一个用于展示加载状态的组件，它以圆形的形式展示加载进度。以下是一个基本的例子：

CircularWidgetLoading(
  loading: loading, // 控制是否显示加载状态
  child: yourChild, // 加载完成后的子组件
  // 其他配置项...
)

示例代码

下面是一个完整的示例应用，展示了如何使用widget_loading插件：

import 'dart:async';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Widget Loading',
      home: Example(),
    );
  }
}

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  int counter = 0;
  bool loading = true;

  late Future<Widget> future;
  late StreamSubscription _subscription;

  @override
  void initState() {
    super.initState();

    _subscription = Stream.periodic(Duration(seconds: 4)).listen((i) {
      setState(() {
        loading = !loading;
        counter++;
      });
    });

    future = Future.delayed(
      Duration(seconds: 4),
      () => Padding(
        padding: EdgeInsets.all(15.0),
        child: ListTile(
          leading: Text(
            'Loaded!',
            style: Theme.of(context).textTheme.titleMedium,
          ),
          trailing: Icon(
            Icons.account_circle,
            size: 50,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _subscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example'),
      ),
      body: Center(
        child: ConstrainedBox(
          constraints: BoxConstraints.loose(Size.fromWidth(750.0)),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Card(
                    elevation: 5.0,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: WiperLoading.future(
                        minWidth: double.infinity,
                        future: future,
                      ),
                    ),
                  ),
                  counterCard(Curves.easeInOutCirc),
                  counterCard(Curves.easeInOutCirc,
                      builder: (width, height) => Container(
                          width: width,
                          height: height,
                          decoration: BoxDecoration(
                              color: Colors.purple,
                              borderRadius: BorderRadius.circular(5.0))),
                      wiperWidth: 50),
                  counterCard(
                    Curves.linear,
                    builder: (width, height) => Container(
                        width: width,
                        height: height,
                        decoration: BoxDecoration(
                            color: Colors.purple,
                            borderRadius: BorderRadius.circular(5.0))),
                    wiperWidth: 10,
                    deformingFactor: 0.2,
                    direction: WiperDirection.up,
                  ),
                  counterCard(Curves.easeInOutCirc,
                      padding: EdgeInsets.symmetric(
                          horizontal: 15.0, vertical: 30.0)),
                  counterCard(Curves.easeOutSine,
                      builder: (width, height) => Container(
                            width: width,
                            height: height,
                            decoration: BoxDecoration(
                                color: Colors.red, shape: BoxShape.circle),
                          ),
                      wiperWidth: 20),
                  counterCard(Curves.easeOutSine,
                      builder: (width, height) => Container(
                          width: width,
                          height: height,
                          decoration: BoxDecoration(
                              color: Colors.purple,
                              borderRadius: BorderRadius.circular(5.0))),
                      wiperWidth: 20,
                      direction: WiperDirection.left),
                  counterCardCircle(Curves.linear),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget counterCard(Curve curve,
          {WiperBuilder? builder,
          double wiperWidth = 15,
          double deformingFactor = 0.5,
          WiperDirection direction = WiperDirection.right,
          EdgeInsetsGeometry padding = const EdgeInsets.all(15.0)}) =>
      Card(
        elevation: 5.0,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: WiperLoading(
            wiperDeformingFactor: deformingFactor,
            curve: curve,
            wiperBuilder: builder,
            wiperWidth: wiperWidth,
            direction: direction,
            loading: loading,
            child: Padding(
              padding: padding,
              child: ListTile(
                leading: Text(
                  'Counter',
                  style: Theme.of(context).textTheme.titleMedium,
                ),
                trailing: Text(
                  '$counter',
                  style: Theme.of(context).textTheme.titleMedium,
                ),
              ),
            ),
          ),
        ),
      );

  Widget counterCardCircle(Curve curve, {WiperBuilder? builder}) => InkWell(
        onTap: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (c) => LoadingScaffold())),
        child: Card(
          elevation: 5.0,
          child: CircularWidgetLoading(
            dotColor: Colors.red,
            dotCount: 10,
            rollingFactor: 0.8,
            loading: loading,
            child: Padding(
                padding: const EdgeInsets.symmetric(
                    horizontal: 15.0, vertical: 50.0),
                child: ListTile(
                  leading: Text(
                    'Counter',
                    style: Theme.of(context).textTheme.titleMedium,
                  ),
                  trailing: Text(
                    '$counter',
                    style: Theme.of(context).textTheme.titleMedium,
                  ),
                )),
          ),
        ),
      );
}

class LoadingScaffold extends StatefulWidget {
  @override
  _LoadingScaffoldState createState() => _LoadingScaffoldState();
}

class _LoadingScaffoldState extends State<LoadingScaffold> {
  Future future = Future.delayed(Duration(seconds: 3));

  late StreamSubscription _subscription;
  bool loading = true;

  @override
  void initState() {
    super.initState();

    _subscription = Stream.periodic(Duration(seconds: 4)).listen((i) {
      setState(() {
        loading = !loading;
      });
    });
  }

  @override
  void dispose() {
    _subscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: CircularWidgetLoading(
        padding: EdgeInsets.zero,
        child: Scaffold(
          appBar: AppBar(title: Text('Example')),
          body: Center(child: Text('Loaded!')),
        ),
        loading: loading,
      ),
    );
  }
}

这个例子展示了如何使用widget_loading插件来创建带有加载状态的UI组件。你可以根据自己的需求调整参数，以适应不同的应用场景。


更多关于Flutter加载状态显示插件widget_loading的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter加载状态显示插件widget_loading的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用widget_loading插件来显示加载状态的示例代码。widget_loading是一个流行的Flutter插件，用于在应用中显示加载指示器。

首先，确保你已经在你的pubspec.yaml文件中添加了widget_loading的依赖项：

dependencies:
  flutter:
    sdk: flutter
  widget_loading: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖项。

接下来，我们来看如何在Flutter应用中实际使用这个插件。

示例代码

  1. 导入必要的包

在你的Dart文件中（例如main.dart），首先导入widget_loading包：

import 'package:flutter/material.dart';
import 'package:widget_loading/widget_loading.dart';
  1. 创建主应用

接下来，创建一个简单的Flutter应用，并在其中使用LoadingWidget来显示加载状态。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Loading Widget Example'),
        ),
        body: Center(
          child: MyLoadingScreen(),
        ),
      ),
    );
  }
}

class MyLoadingScreen extends StatefulWidget {
  @override
  _MyLoadingScreenState createState() => _MyLoadingScreenState();
}

class _MyLoadingScreenState extends State<MyLoadingScreen> {
  bool isLoading = false;

  void simulateLoading() async {
    setState(() {
      isLoading = true;
    });

    // 模拟一个异步操作，例如从网络获取数据
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            simulateLoading();
          },
          child: Text('Start Loading'),
        ),
        if (isLoading)
          LoadingWidget(
            indicator: BallPulseIndicator(),
            loadingText: Text('Loading...'),
          ),
        if (!isLoading)
          Text('Data Loaded Successfully!'),
      ],
    );
  }
}

解释

  1. 导入包：我们导入了flutter/material.dart和widget_loading/widget_loading.dart。
  2. 创建主应用：我们创建了一个简单的Flutter应用，包含一个按钮和一个根据加载状态显示不同内容的区域。
  3. 模拟加载：simulateLoading函数模拟了一个异步操作（例如从网络获取数据），通过Future.delayed延迟2秒来模拟。
  4. 条件渲染：我们使用if语句根据isLoading状态来显示加载指示器或成功消息。

加载指示器

LoadingWidget接受一个indicator参数，你可以使用widget_loading提供的各种加载指示器，如BallPulseIndicator、BounceIndicator等。

注意事项

  • 确保你的Flutter环境已经正确设置，并且所有依赖项都已安装。
  • 你可以根据需要自定义加载指示器的样式和文本。
  • 在实际应用中，你可能会将simulateLoading函数替换为实际的网络请求或其他异步操作。

希望这个示例能帮你顺利地在Flutter项目中使用widget_loading插件来显示加载状态！

回到顶部