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

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

简介

loading_indicator_view_plus 是一个用于Flutter应用中的加载动画集合。该库是从 Hitomis/loading_indicator_view 演化而来的。

示例效果

使用方法

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

   dependencies:
     loading_indicator_view_plus: ^2.0.0
   

2. 运行 flutter pub get 更新依赖包。

动画类型

以下是可用的动画类型：

完整示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Loading indicator view plus Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _orderNum = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 185, 63, 81),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          childAspectRatio: 1.0,
        ),
        children: [
          wrapOrder(Center(child: LineSpinFadeLoaderIndicator())),
          wrapOrder(Center(child: BallBeatIndicator())),
          wrapOrder(Center(child: BallClipRotateMultipleIndicator())),
          wrapOrder(Center(child: BallGridPulseIndicator())),
          wrapOrder(Center(child: LineScaleIndicator())),
          wrapOrder(Center(child: BallPulseRiseIndicator())),
          wrapOrder(Center(child: BallScaleRippleMultipleIndicator())),
          wrapOrder(Center(child: BallZigZagIndicator())),
          wrapOrder(Center(child: BallScaleIndicator())),
          wrapOrder(Center(child: BallPulseSyncIndicator())),
          wrapOrder(Center(child: BallScaleMultipleIndicator())),
          wrapOrder(Center(child: BallPulseIndicator())),
          wrapOrder(Center(child: BallClipRotatePulseIndicator())),
          wrapOrder(Center(child: BallGridBeatIndicator())),
          wrapOrder(Center(child: SquareSpinIndicator())),
          wrapOrder(Center(child: BallSpinFadeLoaderIndicator())),
          wrapOrder(Center(child: BallScaleRippleIndicator())),
          wrapOrder(Center(child: SemiCircleSpinIndicator())),
          wrapOrder(Center(child: LineScalePulseOutIndicator())),
          wrapOrder(Center(child: BallClipRotateIndicator())),
          wrapOrder(Center(child: PacmanIndicator())),
          wrapOrder(Center(child: BallRotateIndicator())),
          wrapOrder(Center(child: CubeTransitionIndicator())),
          wrapOrder(Center(child: TriangleSkewSpinIndicator())),
        ],
      ),
    );
  }

  @override
  void didUpdateWidget(MyHomePage oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget != widget) {
      _orderNum = 1;
    }
  }

  Widget wrapContainer(Widget child, [Color backgroundColor = Colors.green]) =>
      Container(color: backgroundColor, child: child);

  Widget wrapOrder(Widget child) => Stack(children: [
        child,
        Positioned(
          left: 8,
          bottom: 0,
          child: Text("${_orderNum++}",
              style: const TextStyle(color: Colors.white, fontSize: 18)),
        ),
      ]);
}

许可证

Copyright 2019 Hitomis, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.