Flutter加载动画插件bubble_loader的使用

Flutter加载动画插件bubble_loader的使用

展示一个美观且带有动画效果的加载指示器。

Bubble Loader Demo

使用

以下是一个简单的示例代码，展示了如何在应用中使用 BubbleLoader：

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      body: const BubbleLoader(
        color1: Colors.deepPurple,
        color2: Colors.deepOrange,
        bubbleGap: 10,
        bubbleScalingFactor: 1,
        duration: Duration(milliseconds: 1500),
      ),
    ),
  );
}

使用场景

  • 作为启动屏幕：在应用启动时显示。
  • 数据从服务器加载时显示：在数据加载完成前显示。

完整示例代码

以下是一个完整的示例代码，展示了如何在应用中使用 BubbleLoader 并控制其显示与隐藏：

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

void main() {
  runApp(const App());
}

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

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  bool loading = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Bubble Loader Example App'),
          centerTitle: true,
        ),
        body: loading ? const BubbleLoader(
          color1: Colors.deepPurple,
          color2: Colors.deepOrange,
          bubbleGap: 10,
          bubbleScalingFactor: 1,
          duration: Duration(milliseconds: 1500),
        ) :
        Center(child: Column(
            mainAxisAlignment: MainAxisAlignment.center ,
            children: [
              const Text('Hello Flutter Devs',style: TextStyle(fontSize: 25),),
              const SizedBox(height: 25),
              ElevatedButton(
                onPressed: showBubbleLoader,
                child: const Text('Press to see Bubble Loader'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> showBubbleLoader() async {
    setState(() {
      loading = true;
    });
    await Future.delayed(const Duration(seconds: 5));
    setState(() {
      loading = false;
    });
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter中使用bubble_loader插件来实现加载动画的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  bubble_loader: ^x.y.z  # 请将x.y.z替换为当前最新版本号

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

接下来，在你的Flutter应用中，你可以使用以下代码来显示一个Bubble Loader加载动画：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bubble Loader Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BubbleLoaderScreen(),
    );
  }
}

class BubbleLoaderScreen extends StatefulWidget {
  @override
  _BubbleLoaderScreenState createState() => _BubbleLoaderScreenState();
}

class _BubbleLoaderScreenState extends State<BubbleLoaderScreen> with SingleTickerProviderStateMixin {
  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('Bubble Loader Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: startLoading,
              child: Text('Start Loading'),
            ),
            SizedBox(height: 20),
            if (isLoading)
              BubbleLoader(
                bubbleColor: Colors.blue,
                numberOfBubbles: 5,
                bubbleSize: 20.0,
                duration: Duration(milliseconds: 1000),
                distanceBetweenBubbles: 15.0,
              )
            else
              Text('Loading complete!'),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮和一个用于显示Bubble Loader加载动画的区域。当点击按钮时，isLoading状态会变为true，Bubble Loader动画开始播放。3秒后，isLoading状态会变为false，加载动画停止，并显示"Loading complete!"文本。

你可以根据需要调整Bubble Loader的参数，例如bubbleColor、numberOfBubbles、bubbleSize、duration和distanceBetweenBubbles，以实现不同的视觉效果。

回到顶部