Spinkit en Flutter con ejemplo

Spinkit es una colección de indicadores de carga animados con aleteo. Tiene enormes indicadores de carga animados que se usan básicamente cuando estamos cargando algo. Al igual que cargar una aplicación, la descarga de video está en progreso para indicar que estamos usando indicadores para esa acción en particular, cargando datos de la base de datos, guardando datos en la base de datos, etc. Entonces, en este artículo, veremos cómo implementar Spinkit. Espero que entiendas lo que vamos a hacer. Si no sigue a continuación, se muestra lo que vamos a hacer.

Nota : No te los vamos a mostrar todos. Aprenderemos Cómo implementar Spinkit. 

Proyecto de ejemplo

Agregar dependencia:

dependencies:
  flutter_spinkit: ^5.1.0

Nota : cuando lea esto, la versión del complemento puede cambiar.

Importar el paquete:

import 'package:flutter_spinkit/flutter_spinkit.dart';

Cómo utilizar:

Es bastante simple de usar.

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

Cree un widget sin estado de clase MyApp . Devuelva MaterialApp, llame a SpinHome Class en la propiedad de la casa.

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(),
    );
  }
}

Haga que debugShowCheckedModeBanner sea falso porque personalmente no me gusta. Ahora tenemos que crear la clase SpinHome o el widget sin estado.

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:
    );
  }
}

Devuelve el andamio y dale el título como quieras. En la propiedad del cuerpo, usamos el widget GridView . Y use el widget Spinkit.

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 hace todo el spinkit en vista de cuadrícula. al igual que la página de inicio de su teléfono.

Código de ejemplo completo:

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,
          ),
        ],
      ),
    );
  }
}

Tenemos enormes indicadores Spinkit como se muestra en el video de arriba. pero, en este ejemplo, solo le mostramos cómo implementarlos. 

Producción