En este artículo, aprenderemos sobre el botón indicador de progreso de carga en Flutter.
¿Qué es el botón indicador de progreso de carga?
El indicador de progreso informa a los clientes y usuarios que utilizan la aplicación sobre el proceso en curso, como cargar una aplicación , enviar un formulario o cargar un documento en línea. A medida que la carga se completa con éxito, obtenemos un estado de éxito.
Implementemos el botón indicador de progreso de carga:
Implementación:
Siga los siguientes pasos para implementar el botón indicador de progreso de carga en Flutter:
Paso 1: creamos un nuevo proyecto y luego creamos un widget con estado. Habíamos creado un widget con estado porque nuestra aplicación no es estática y cada vez que construimos o ejecutamos la aplicación tendrá lugar una nueva actividad.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
Paso 2: En este paso, hemos creado una Appbar con color de fondo verde y texto de color blanco. Entonces habíamos inicializado una variable del tipo bool .
Dart
class _MyHomePageState extends State<MyHomePage> {
bool isLoading = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text('GeeksforGeeks',style: TextStyle(color: Colors.white),),
centerTitle: true,
),
Paso 3 : en el cuerpo de nuestra aplicación, habíamos creado un botón elevado . El botón elevado está dentro del contenedor y le hemos dado padding , width y height a nuestro botón elevado. También le habíamos dado la propiedad de color a nuestro botón. Ahora, al hacer clic en este botón, veremos que el valor de isLoading se vuelve verdadero. En el texto del botón «Cargando…» aparece un indicador de progreso circular y con la ayuda de future.delayed , la carga se detendrá después de 3 segundos y luego el valor de isLoading se cambiará a falso. nosotros habíamos usadoalineación del eje principal al centro, para mantener nuestro botón de carga en el centro. A medida que la carga se completa en 3 segundos, veremos el texto «Enviar» en la pantalla.
Dart
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.only(left: 10, right: 10),
width: MediaQuery.of(context).size.width,
height: 60,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green
),
onPressed: () {
setState(() {
isLoading = true;
});
Future.delayed(const Duration(seconds: 3), (){
setState(() {
isLoading = false;
});
}
);
}, child: isLoading? Row(
mainAxisAlignment: MainAxisAlignment.center,
// ignore: prefer_const_literals_to_create_immutables
children: [
const Text('Loading...', style: TextStyle(fontSize: 20),),
const SizedBox(width: 10,),
const CircularProgressIndicator(color: Colors.white,),
],
) : const Text('Submit'),
)
)
],
),
),
);
}
}
Código fuente completo:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isLoading = false;
@override
Widget build(BuildContext context) {
return Scaffold(
// created an Appbar with GeeksforGeeks written on it.
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text('GeeksforGeeks',style: TextStyle(color: Colors.white),),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.only(left: 10, right: 10),
width: MediaQuery.of(context).size.width,
height: 60,
// elevated button created and given style
// and decoration properties
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green
),
onPressed: () {
setState(() {
isLoading = true;
});
// we had used future delayed to stop loading after
// 3 seconds and show text "submit" on the screen.
Future.delayed(const Duration(seconds: 3), (){
setState(() {
isLoading = false;
});
}
);
}, child: isLoading? Row(
mainAxisAlignment: MainAxisAlignment.center,
// as elevated button gets clicked we will see text"Loading..."
// on the screen with circular progress indicator white in color.
//as loading gets stopped "Submit" will be displayed
children: const [
Text('Loading...', style: TextStyle(fontSize: 20),),
SizedBox(width: 10,),
CircularProgressIndicator(color: Colors.white,),
],
) : const Text('Submit'),
)
)
],
),
),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por ayurishchandnacs18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA