Flutter中的 Spinkit 示例

Spinkit是一组使用flutter动画的加载指示器。它有巨大的动画加载指示器，基本上在我们加载某些东西时使用。就像加载应用程序一样，正在下载视频以表明这一点，我们正在为该特定操作使用指标，从数据库加载数据，在数据库中保存数据等。因此，在本文中，我们将了解如何实现旋转套件。希望你明白我们要做什么。如果不遵循以下说明我们将要做什么。

Note: We are not going to show you all. We will learn How to implement Spinkit. 

示例项目

添加依赖：

dependencies:
  flutter_spinkit: ^5.1.0

Note: When you read this, the version of the plugin may change.

导入包：

import 'package:flutter_spinkit/flutter_spinkit.dart';

如何使用：

使用它非常简单。

const spinkit = SpinKitRotatingCircle(
     color: Colors.white,
     size: 50.0,
);

创建一个类无状态小部件MyApp 。返回 MaterialApp，调用 home 属性的 SpinHome 类。

Dart

import 'package:flutter/material.dart';
import 'package:spinkit/myHome.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner:  false,
      home:  SpinHome(),
    );
  }
}

将debugShowCheckedModeBanner设为 false，因为我个人不喜欢它。现在我们必须创建SpinHome类或无状态小部件。

Dart

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
  
class SpinHome extends StatelessWidget {
  const SpinHome({Key? key}) : super(key: key);
  
@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Spinkit flutter")),
      body:
    );
  }
}

返回脚手架并根据需要给出标题。在 body 属性中，我们使用GridView小部件。并使用 Spinkit 小部件。

Dart

GridView.count(
        crossAxisSpacing: 5,
        mainAxisSpacing: 3,
        crossAxisCount: 3,
        children: [
          SpinKitChasingDots(
            color: Colors.indigo,
          ),
          SpinKitCircle(
            color: Colors.amber,
          ),
          SpinKitDancingSquare(
            color: Colors.blueAccent,
          ),
          SpinKitDoubleBounce(
            color: Colors.pink,
          ),
          SpinKitFadingGrid(
            color: Colors.orange,
          ),
          SpinKitWanderingCubes(
            color: Colors.teal,
          ),
          SpinKitHourGlass(color: Colors.lightGreenAccent),
          SpinKitDualRing(
            color: Colors.cyan,
          ),
        ],
      ),

GridView 使所有 spinkit 在网格视图中。就像您的手机主页一样。

完整的示例代码：

Dart

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
  
class SpinHome extends StatelessWidget {
  const SpinHome({Key? key}) : super(key: key);
  
@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Spinkit flutter")),
      body: GridView.count(
        crossAxisSpacing: 5,
        mainAxisSpacing: 3,
        crossAxisCount: 3,
        children: [
          const SpinKitChasingDots(
            color: Colors.indigo,
          ),
          const SpinKitCircle(
            color: Colors.amber,
          ),
          const SpinKitDancingSquare(
            color: Colors.blueAccent,
          ),
          SpinKitDoubleBounce(
            color: Colors.pink,
          ),
          SpinKitFadingGrid(
            color: Colors.orange,
          ),
          SpinKitWanderingCubes(
            color: Colors.teal,
          ),
          SpinKitHourGlass(color: Colors.lightGreenAccent),
          SpinKitDualRing(
            color: Colors.cyan,
          ),
        ],
      ),
    );
  }
}

如上面的视频所示，我们有巨大的 Spinkit 指标。但是，在这个例子中，我们只是向您展示如何实现它们。

输出