Flutter – Texto esquelético

En Flutter, la biblioteca skeleton_text se usa para implementar fácilmente la animación de carga de texto de esqueleto. Su aplicación principal en una aplicación flutter es asegurar a sus usuarios que los servidores están funcionando pero lentos, pero que el contenido eventualmente se cargará. También mejora la interfaz de usuario si la conexión del usuario también es lenta.

En este artículo, analizaremos el proceso de implementación del texto esqueleto en una aplicación de aleteo mediante la creación de una aplicación de aleteo simple. Para construir el mismo, siga los siguientes pasos:

• Agregue la dependencia skeleton_text al archivo pubspec.yaml
• Importe la dependencia al archivo main.dart
• Cree una estructura de aplicación simple para implementar la dependencia
• Llame al método SkeletoAnimation en el cuerpo de la aplicación

Ahora, veamos los pasos en detalle:

Agregar la dependencia:

Agregue la dependencia skeleton_text a la sección de dependencias del archivo pubspec.yaml como se muestra a continuación:

Importación de la dependencia:

Utilice el siguiente código para importar la dependencia de skeleton_text al archivo main.dart:

import 'package:skeleton_text/skeleton_text.dart';

Estructuración de la aplicación:

Para darle a una aplicación Flutter una estructura simple con una barra de aplicaciones y un cuerpo , extienda un StatelessWidget formando una clase como se muestra a continuación:

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Skeleton Text',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
      backgroundColor: Colors.green,
    ),
        body:
      ),
    );
  }
}

Llamando al método:

Utilice el método SkeletonAnimation proporcionado por el paquete skeleton_text para mostrar el texto del esqueleto para un objeto de lista como se muestra a continuación:

children: <Widget>[
                        SkeletonAnimation(
                          child: Container(
                            width: 70.0,
                            height: 70.0,
                            decoration: BoxDecoration(
                              color: Colors.grey[300],
                            ),
                          ),
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.only(
                                  left: 15.0, bottom: 5.0),
                              child: SkeletonAnimation(
                                child: Container(
                                  height: 15,
                                  width:
                                  MediaQuery.of(context).size.width * 0.6,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10.0),
                                      color: Colors.grey[300]),
                                ),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(left: 15.0),
                              child: Padding(
                                padding: const EdgeInsets.only(right: 5.0),
                                child: SkeletonAnimation(
                                  child: Container(
                                    width: 60,
                                    height: 13,
                                    decoration: BoxDecoration(
                                        borderRadius:
                                        BorderRadius.circular(10.0),
                                        color: Colors.grey[300]),
                                  ),
                                ),
                              ),
                            ),
                          ],

Código fuente completo:

import 'package:flutter/material.dart';
import 'package:skeleton_text/skeleton_text.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
 // root of the application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Skeleton Text',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
      backgroundColor: Colors.green,
    ),
        // list of items in body
        body: ListView.builder(
            scrollDirection: Axis.vertical,
            physics: BouncingScrollPhysics(),
            itemCount: 5,
            itemBuilder: (BuildContext context, int index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      color: Colors.white70),
                  child: Container(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.start,
                        
                      // SkeletonAnimation method
                      children: <Widget>[
                        SkeletonAnimation(
                          child: Container(
                            width: 70.0,
                            height: 70.0,
                            decoration: BoxDecoration(
                              color: Colors.grey[300],
                            ),
                          ),
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.only(
                                  left: 15.0, bottom: 5.0),
                              child: SkeletonAnimation(
                                child: Container(
                                  height: 15,
                                  width:
                                  MediaQuery.of(context).size.width * 0.6,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10.0),
                                      color: Colors.grey[300]),
                                ),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(left: 15.0),
                              child: Padding(
                                padding: const EdgeInsets.only(right: 5.0),
                                child: SkeletonAnimation(
                                  child: Container(
                                    width: 60,
                                    height: 13,
                                    decoration: BoxDecoration(
                                        borderRadius:
                                        BorderRadius.circular(10.0),
                                        color: Colors.grey[300]),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              );
            }),
      ),
    );
  }
}

Producción: