Flutter: indicadores de progreso circulares y lineales

El indicador de progreso en cualquier aplicación muestra el tiempo que se necesita para que se completen algunas tareas, como la descarga, la instalación, la carga, la transferencia de archivos, etc. Esto muestra el progreso de una tarea o el tiempo para mostrar la duración de los procesos.

En Flutter, el progreso se puede mostrar de dos maneras:

1. CircularProgressIndicator: un CircularProgressIndicator es un widget que muestra el progreso a lo largo de un círculo. Es una barra de progreso circular que gira para indicar que la aplicación está ocupada o en espera.
2. Indicador de progreso lineal: un indicador de progreso lineal , también conocido como barra de progreso, es un widget que muestra el progreso en una dirección lineal o a lo largo de una línea para indicar que la aplicación está en progreso.

Hay dos tipos de indicadores de progreso:

1. Indeterminado: el indicador de progreso indeterminado es un indicador que no muestra un valor específico en ningún momento y solo indica que se está progresando. No indica cuánto progreso queda por hacer. Para crear una barra de progreso indeterminada, establecemos la propiedad de valor como nula.
2. Determinado: El indicador de progreso determinado es un indicador que tiene un valor específico en cada instancia de tiempo. También indica cuánto progreso se ha completado. El valor en el indicador de progreso determinado aumenta monótonamente de 0 a 1, donde 0 indica que el progreso acaba de comenzar y 1 indica que el progreso se completa.

Los siguientes son los pasos a seguir para implementar los Indicadores de progreso en la aplicación Flutter.

Paso 1: importa el paquete material.dart para mostrar el widget Indicador de progreso de Flutter que implementa Material Design.

import 'package:flutter/material.dart';

Paso 2: A continuación, se debe implementar el siguiente código en el archivo main.dart respectivo.

import 'package:flutter/material.dart';
  
void main(){
  runApp(
    MyApp()
  );
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Loader(),
      );
  }
}
  
class Loader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Color(0xFF4CAF50),
        centerTitle: true,
        ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(),
            SizedBox(
              height: 15,
              ),
            LinearProgressIndicator(),
            ],
          ),
        ),
      );
  }
}

Producción:

Indicador de progreso predeterminado

Paso 3: ahora, para mejorar la interfaz de usuario de esta aplicación, debemos implementar algunas propiedades significativas de la barra de progreso.

import 'package:flutter/material.dart';
  
void main(){
  runApp(
    MyApp()
  );
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Loader(),
      );
  }
}
  
class Loader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Color(0xFF4CAF50),
        centerTitle: true,
        ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(
              backgroundColor: Colors.redAccent,
              valueColor: AlwaysStoppedAnimation(Colors.green),
              strokeWidth: 10,
            ),
            SizedBox(
              height: 15,
              ),
            LinearProgressIndicator(
              backgroundColor: Colors.redAccent,
              valueColor: AlwaysStoppedAnimation(Colors.green),
              minHeight: 20,
              )
            ],
          ),
        ),
      );
  }
}

Producción:

Indicador de progreso de la interfaz de usuario mejorado

Explicación: 

A continuación se muestra la explicación del código mencionado anteriormente para implementar los indicadores de progreso en Flutter:

1. backgroundColor: esta propiedad se usa para establecer el color de fondo de un cargador lineal y un cargador giratorio circular en la barra de progreso.
2. strokeWidth: esta propiedad especifica el ancho de la línea que se usa para dibujar un círculo en un CircularProgressIndicator .
3. minHeight: Es la altura mínima de la línea que se usa para dibujar el indicador en un LinearProgressIndicator o, en otras palabras, se usa para definir qué tan gruesa se ve la línea en un indicador.
4. valueColor: Se utiliza para definir el valor del indicador de progreso como un valor animado. La propiedad valueColor cubre los aspectos más destacados de la tarea completada valorada.
5. AlwaysStoppedAnimation: Se utiliza para especificar un color constante en la propiedad valueColor .
6. valor: la propiedad de valor se utiliza para diferenciar entre la barra de progreso determinada e indeterminada. Si la propiedad value se establece como nula, el indicador de progreso es indeterminado, lo que significa que mostrará la animación predefinida en el indicador con su movimiento que no indica cuánto progreso se completó. Si se establece como no nulo, muestra cuánto progreso se está realizando en un instante determinado. Un valor de 0,0 indica que el progreso acaba de comenzar y un valor de 1,0 indica que el progreso se ha completado.