En este artículo, aprenderemos sobre el widget Stepper en Flutter. Un widget paso a paso muestra el progreso a través de una secuencia de pasos. Stepper se usa generalmente para completar formularios en línea.
Por ejemplo, recuerda llenar un formulario en línea para aplicar a cualquier universidad o pasaporte o licencia de conducir . Rellenamos el formulario paso a paso como
- En el paso 1 hemos rellenado nuestros datos personales
- En el paso 2 hemos introducido nuestra dirección de residencia
- En el paso 3 hemos dado nuestros detalles de educación
- En el paso 4 hicimos el pago
- En el paso 5 nos registramos e imprimimos el recibo
Esto en realidad se llama Stepper . Realización de la tarea en un proceso paso a paso .
Ahora veamos la implementación práctica de nuestro widget paso a paso:
Paso 1: abre un nuevo proyecto flutter en tu editor.
Paso 2 : en scaffold, inicializamos Stepper() y dentro de stepper, creamos un método llamado stepList() . Este método se crea porque hemos creado la lista de pasos que se requieren en el formulario.
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.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// Here we have created list of steps that
// are required to complete the form
List<Step> stepList() => [
const Step(title: Text('Account'), content: Center(child: Text('Account'),)),
const Step(title: Text('Address'), content: Center(child: Text('Address'),)),
const Step(title: Text('Confirm'), content: Center(child: Text('Confirm'),))
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.green,
title: const Text('GeeksforGeeks',style: TextStyle(color: Colors.white), ),
),
// Here we have initialized the stepper widget
body: Stepper(
steps: stepList(),
)
);
}
}
Producción:
Nota: Ahora, este es el widget paso a paso básico. Si queremos podemos cambiar el paso a paso en forma horizontal también. Simplemente escriba el comando en la imagen de abajo
Producción:
Paso 3: ahora agreguemos propiedades a este widget paso a paso como:
- currentStep: Hemos creado un entero. Su valor inicial es 0. En realidad, muestra el contenido del paso en el que se encuentra ese índice en particular.
- onStepContinue: es la devolución de llamada llamada cuando se presiona el botón continuar. Cuando hacemos clic en el botón continuar, nos lleva al siguiente paso. Si es nulo, el botón ‘continuar’ estará deshabilitado
- onStepCancel: es la devolución de llamada llamada cuando se presiona el botón cancelar. Cuando hacemos clic en el botón cancelar, volvemos al paso anterior. Si es nulo, el botón ‘cancelar’ estará deshabilitado.
- onStepTapped: Devolución de llamada llamada cuando se toca el paso. Podemos ir directamente a cualquier paso simplemente haciendo clic en ese paso en particular. por ejemplo, si desea ir directamente al paso 2, simplemente haga clic en él y estará allí.
Paso 4: en este paso, creamos un formulario agregando campos de texto para que el usuario pueda ingresar datos. Entonces, básicamente se parece más a una estructura similar a una forma.
- En el primer paso Cuenta , habíamos agregado campos de texto: nombre completo, correo electrónico, contraseña
- En el segundo paso , Dirección , habíamos creado un campo de texto: Dirección completa, Código PIN .
- En el tercer paso Confirmar estamos mostrando datos que el usuario ha ingresado.
Código fuente completo:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}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.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// we have initialized active step to 0 so that
// our stepper widget will start from first step
int _activeCurrentStep = 0;
TextEditingController name = TextEditingController();
TextEditingController email = TextEditingController();
TextEditingController pass = TextEditingController();
TextEditingController address = TextEditingController();
TextEditingController pincode = TextEditingController();
// Here we have created list of steps
// that are required to complete the form
List<Step> stepList() => [
// This is step1 which is called Account.
// Here we will fill our personal details
Step(
state: _activeCurrentStep <= 0 ? StepState.editing : StepState.complete,
isActive: _activeCurrentStep >= 0,
title: const Text('Account'),
content: Container(
child: Column(
children: [
TextField(
controller: name,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Full Name',
),
),
const SizedBox(
height: 8,
),
TextField(
controller: email,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
),
),
const SizedBox(
height: 8,
),
TextField(
controller: pass,
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
),
],
),
),
),
// This is Step2 here we will enter our address
Step(
state:
_activeCurrentStep <= 1 ? StepState.editing : StepState.complete,
isActive: _activeCurrentStep >= 1,
title: const Text('Address'),
content: Container(
child: Column(
children: [
const SizedBox(
height: 8,
),
TextField(
controller: address,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Full House Address',
),
),
const SizedBox(
height: 8,
),
TextField(
controller: pincode,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Pin Code',
),
),
],
),
)),
// This is Step3 here we will display all the details
// that are entered by the user
Step(
state: StepState.complete,
isActive: _activeCurrentStep >= 2,
title: const Text('Confirm'),
content: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text('Name: ${name.text}'),
Text('Email: ${email.text}'),
Text('Password: ${pass.text}'),
Text('Address : ${address.text}'),
Text('PinCode : ${pincode.text}'),
],
)))
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.green,
title: const Text('GeeksforGeeks',style: TextStyle(color: Colors.white), ),
),
// Here we have initialized the stepper widget
body: Stepper(
type: StepperType.horizontal,
currentStep: _activeCurrentStep,
steps: stepList(),
// onStepContinue takes us to the next step
onStepContinue: () {
if (_activeCurrentStep < (stepList().length - 1)) {
setState(() {
_activeCurrentStep += 1;
});
}
},
// onStepCancel takes us to the previous step
onStepCancel: () {
if (_activeCurrentStep == 0) {
return;
}
setState(() {
_activeCurrentStep -= 1;
});
},
// onStepTap allows to directly click on the particular step we want
onStepTapped: (int index) {
setState(() {
_activeCurrentStep = index;
});
},
),
);
}
}
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.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _activeCurrentStep = 0;
TextEditingController name = TextEditingController();
TextEditingController email = TextEditingController();
TextEditingController pass = TextEditingController();
TextEditingController address = TextEditingController();
TextEditingController pincode = TextEditingController();
List<Step> stepList() => [
Step(
state: _activeCurrentStep <= 0 ? StepState.editing : StepState.complete,
isActive: _activeCurrentStep >= 0,
title: const Text('Account'),
content: Container(
child: Column(
children: [
TextField(
controller: name,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Full Name',
),
),
const SizedBox(
height: 8,
),
TextField(
controller: email,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
),
),
const SizedBox(
height: 8,
),
TextField(
controller: pass,
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
),
],
),
),
),
Step(
state:
_activeCurrentStep <= 1 ? StepState.editing : StepState.complete,
isActive: _activeCurrentStep >= 1,
title: const Text('Address'),
content: Container(
child: Column(
children: [
const SizedBox(
height: 8,
),
TextField(
controller: address,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Full House Address',
),
),
const SizedBox(
height: 8,
),
TextField(
controller: pincode,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Pin Code',
),
),
],
),
)),
Step(
state: StepState.complete,
isActive: _activeCurrentStep >= 2,
title: const Text('Confirm'),
content: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text('Name: ${name.text}'),
Text('Email: ${email.text}'),
Text('Password: ${pass.text}'),
Text('Address : ${address.text}'),
Text('PinCode : ${pincode.text}'),
],
)))
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Stepper'),
),
body: Stepper(
type: StepperType.horizontal,
currentStep: _activeCurrentStep,
steps: stepList(),
onStepContinue: () {
if (_activeCurrentStep < (stepList().length - 1)) {
setState(() {
_activeCurrentStep += 1;
});
}
},
onStepCancel: () {
if (_activeCurrentStep == 0) {
return;
}
setState(() {
_activeCurrentStep -= 1;
});
},
onStepTapped: (int index) {
setState(() {
_activeCurrentStep = index;
});
},
),
);
}
}
Producción:
Explicación – En este video, podemos ver que:
- Cuando hacemos clic en el botón continuar, nos dirigimos hacia el siguiente paso, lo que significa que nuestra propiedad onStepContinue está funcionando.
- Cuando hacemos clic en el botón cancelar , regresamos al paso anterior, lo que significa que nuestra propiedad onStepCancel está funcionando.
- Cuando tocamos un paso en particular, vamos directamente a ese paso en particular, lo que significa que nuestra propiedad onStepTapped está funcionando.
Publicación traducida automáticamente
Artículo escrito por ayurishchandnacs18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA