Flutter加载动画插件excellent_loading的使用

Flutter加载动画插件excellent_loading的使用

本README描述了如何使用excellent_loading插件。如果你将此包发布到pub.dev，此README的内容将出现在你的包的首页。

特性

• 提供多种加载动画样式。
• 支持自定义背景颜色和遮罩颜色。
• 可以设置加载指示器的颜色和类型。

开始使用

要开始使用excellent_loading插件，你需要在pubspec.yaml文件中添加以下依赖：

dependencies:
  excellent_loading: ^版本号

然后运行flutter pub get来获取最新的依赖项。

使用方法

首先，初始化excellent_loading实例并进行配置。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: ExcellentLoading.init(),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<Album> albums = [];

  Future<void> init() async {
    ExcellentLoading.show();
    final response = await Dio().get('https://jsonplaceholder.typicode.com/albums/');
    if (response.statusCode == 200) {
      for (var element in response.data) {
        Album album = Album.fromJson(element);
        albums.add(album);
      }
      setState(() {});
      ExcellentLoading.dismiss();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          ...albums.map((e) => ListTile(
            title: Text(e.title),
            onTap: () async {
              ExcellentLoading.show();
              final response = await Dio().get('https://jsonplaceholder.typicode.com/albums/${e.id}');
              if (response.statusCode == 200) {
                ExcellentLoading.dismiss();
                final Album album = Album.fromJson(response.data);
                if (mounted) {
                  Navigator.push(context, MaterialPageRoute(builder: (_) => Detail(album: album)));
                }
              }
            },
          ))
        ],
      ),
    );
  }
}

class Detail extends StatelessWidget {
  final Album album;
  const Detail({super.key, required this.album});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListTile(
        leading: Text(album.id.toString()),
        title: Text(album.title),
        trailing: Text('userId: ${album.userId}'),
      ),
    );
  }
}

class Album {
  final int userId;
  final int id;
  final String title;

  const Album({
    required this.userId,
    required this.id,
    required this.title,
  });

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
    );
  }
}

高级配置

你还可以通过配置更多的参数来自定义加载动画的外观和行为。例如：

ExcellentLoading.instance
  ..maskType = ExcellentLoadingMaskType.custom
  ..indicatorType = ExcellentLoadingIndicatorType.ios
  ..backgroundColor = Colors.white
  ..loadingStyle = ExcellentLoadingStyle.custom
  ..maskType = ExcellentLoadingMaskType.black
  ..maskColor = Colors.black
  ..indicatorColor = Colors.black
  ..textColor = Colors.black
  ..boxShadow = []
  // ..contentPadding = EdgeInsets.all(10)
  // ..status = 'Please wait'
  ..indicatorWidget = SpinKitFadingCube(
    color: Colors.purple,
  )
  ..maskColor = Colors.white.withOpacity(0.1);