Flutter加载指示器插件newtons_cradle_loading_indicator的使用

Flutter 加载指示器插件 newtons_cradle_loading_indicator 的使用

一个加载动画类似于牛顿摆，非常适合用于教育类应用。

特性

  • ⭐ 非常响应并且在每个屏幕上看起来都很棒
  • ⭐ 非常可定制且有很多属性
  • ⭐ 使用非常简单

示例

TODO

  • ❌ 允许用户手动设置摆动球和固定球的数量
  • ❌ 让球更漂亮并具有3D效果

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Newton\'s Cradle Loading Indicator'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用 NewtonCradleLoadingIndicator 构建加载指示器
              NewtonCradleLoadingIndicator(
                // 设置球的大小
                ballSize: 20.0,
                // 设置摆动的速度
                speed: 0.03,
                // 设置摆动的角度范围
                swingAngle: 10.0,
                // 设置背景颜色
                backgroundColor: Colors.grey[200],
                // 设置加载指示器的颜色
                ballColor: Colors.blue,
              ),
              SizedBox(height: 20),
              // 按钮触发加载指示器
              ElevatedButton(
                onPressed: () {
                  // 触发加载指示器的逻辑
                },
                child: Text('Start Loading'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


newtons_cradle_loading_indicator 是一个 Flutter 插件，提供了一个类似于牛顿摆（Newton’s Cradle）的加载指示器。这个插件可以用于在应用程序加载数据或执行耗时操作时显示一个美观的加载动画。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 newtons_cradle_loading_indicator 依赖：

dependencies:
  flutter:
    sdk: flutter
  newtons_cradle_loading_indicator: ^1.0.0  # 请使用最新版本

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

使用插件

在需要使用加载指示器的地方，你可以导入 newtons_cradle_loading_indicator 并使用 NewtonsCradle 小部件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Newton\'s Cradle Loading Indicator'),
        ),
        body: Center(
          child: NewtonsCradle(
            size: 100.0, // 设置加载指示器的大小
            color: Colors.blue, // 设置加载指示器的颜色
          ),
        ),
      ),
    );
  }
}

参数说明

NewtonsCradle 小部件支持以下参数：

  • size: 加载指示器的大小，通常是一个 double 值。
  • color: 加载指示器的颜色，通常是一个 Color 值。
  • duration: 动画的持续时间，通常是一个 Duration 值。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 newtons_cradle_loading_indicator 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Newton\'s Cradle Loading Indicator'),
        ),
        body: Center(
          child: NewtonsCradle(
            size: 100.0,
            color: Colors.blue,
            duration: Duration(milliseconds: 1000),
          ),
        ),
      ),
    );
  }
}
回到顶部