Flutter加载提示插件loading的使用

Flutter加载提示插件loading的使用

loading 是一个用于 Flutter 的加载进度指示器小部件。它易于使用，也易于扩展。

安装

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

dependencies:
  ...
  loading: ^1.0.2

然后在终端运行以下命令来获取依赖包：

flutter packages get

示例

下面是一个简单的示例，展示了如何在应用中使用 loading 插件：

import 'package:flutter/material.dart';
import 'package:loading/loading.dart';
import 'package:loading/indicator/ball_pulse_indicator.dart';

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

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

class ShowLoading extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text('加载视图'),
        ),
        body: Center(
          child: Loading(indicator: BallPulseIndicator(), size: 100.0),
        ));
  }
}

解释

  • 导入必要的包：

    import 'package:flutter/material.dart';
import 'package:loading/loading.dart';
import 'package:loading/indicator/ball_pulse_indicator.dart';

  • 定义主应用类：

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

  • 创建 MyApp 类：

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

  • 创建 ShowLoading 类：

    class ShowLoading extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text('加载视图'),
        ),
        body: Center(
          child: Loading(indicator: BallPulseIndicator(), size: 100.0),
        ));
  }
}

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

1 回复

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


在 Flutter 中，loading 插件是一个常用的库，用于显示加载指示器（如旋转的圆圈或其他动画），以提示用户正在执行某些异步操作。以下是 loading 插件的基本使用方法。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 loading 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  loading: ^2.0.0  # 请使用最新版本

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

2. 导入库

在需要使用 loading 的 Dart 文件中导入库：

import 'package:loading/loading.dart';

3. 使用 Loading 组件

loading 插件提供了一个 Loading 组件，你可以直接将其添加到你的 UI 中。以下是一个简单的示例：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _startLoading() {
    setState(() {
      _isLoading = true;
    });

    // 模拟一个异步操作
    Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _isLoading
                ? Loading(
                    indicator: BallBeatIndicator(),
                    size: 100.0,
                    color: Colors.blue,
                  )
                : Text('Press the button to start loading'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _startLoading,
              child: Text('Start Loading'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyHomePage(),
));

4. 自定义加载指示器

loading 插件提供了多种内置的加载指示器，你可以通过 indicator 参数来选择不同的指示器。例如：

  • BallBeatIndicator()
  • BallClipRotateIndicator()
  • BallGridBeatIndicator()
  • BallGridPulseIndicator()
  • BallPulseIndicator()
  • BallPulseSyncIndicator()
  • BallRotateIndicator()
  • BallScaleIndicator()
  • BallScaleMultipleIndicator()
  • BallScaleRippleIndicator()
  • BallScaleRippleMultipleIndicator()
  • BallSpinFadeLoaderIndicator()
  • BallTrianglePathIndicator()
  • BallZigZagIndicator()
  • BallZigZagDeflectIndicator()
  • CircleBorderSpinIndicator()
  • CubeTransitionIndicator()
  • DoubleBounceIndicator()
  • FadingCircleIndicator()
  • FadingCubeIndicator()
  • FoldingCubeIndicator()
  • LineScaleIndicator()
  • LineScalePartyIndicator()
  • LineScalePulseOutIndicator()
  • LineScalePulseOutRapidIndicator()
  • LineSpinFadeLoaderIndicator()
  • PacmanIndicator()
  • PulseIndicator()
  • RotatingCircleIndicator()
  • RotatingPlainIndicator()
  • SquareSpinIndicator()
  • TriangleSkewSpinIndicator()
  • WaveIndicator()

你可以根据需要选择不同的指示器。

5. 自定义颜色和大小

你可以通过 color 和 size 参数来自定义指示器的颜色和大小：

Loading(
  indicator: BallBeatIndicator(),
  size: 50.0,
  color: Colors.red,
)
回到顶部