Cuando queremos expandir y contraer cosas, podemos hacerlo con la ayuda de un panel de expansión. Esta lista de paneles de expansión se usa principalmente en las aplicaciones y proporciona funciones adicionales a la aplicación. Podemos crear una lista de elementos secundarios y envolverla con una lista de paneles de expansión. También podemos crear más de un panel de expansión en nuestra aplicación. Podemos controlar si el panel está abierto o no mediante la propiedad isExpanded.
Siga los pasos a continuación para implementar el Panel de expansión en Flutter:
Constructor de ExpansionPanel:
ExpansionPanel(
{required ExpansionPanelHeaderBuilder headerBuilder,
required Widget body,
bool isExpanded: false,
bool canTapOnHeader: false,
Color? backgroundColor}
)
Propiedades:
- headerBuilder : es el generador de widgets para construir el panel de expansión.
- body : El cuerpo del panel de expansión.
- isExpanded : Es el valor booleano para verificar si el panel de expansión está expandido o no.
- canTapOnHeader : es un valor booleano que puede expandir el panel si se da como verdadero.
- backgroundColor : el color de fondo del panel de expansión.
Ejemplo:
El archivo homePage.dart
Dart
import 'package:flutter/material.dart';
import 'package:sports_app/items.dart';
import 'package:velocity_x/velocity_x.dart';
class Homepage extends StatefulWidget {
@override
_HomepageState createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
bool active = false;
String exTitle = "Sport Categories";
@override
Widget build(BuildContext context) {
return Column(
children: [
ExpansionPanelList(
expansionCallback: (panelIndex, isExpanded) {
active = !active;
if(exTitle=="Sport Categories")
exTitle="Contract";
else
exTitle="Sport Categories";
setState(() {
});
},
children: <ExpansionPanel>[
ExpansionPanel(
headerBuilder: (context, isExpanded) {
return exTitle.text.gray500.make().centered();
},
body: Wrap(
alignment: WrapAlignment.spaceBetween,
spacing: 7,
children: [
ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed))
return Colors.red;
// Use the component's default.
return Colors.black;
},
),
),
onPressed: () => null,
child: "All".text.make(),
),
ElevatedButton(
onPressed: null,
child: "Basketball".text.black.make(),
),
ElevatedButton(
onPressed: null, child: "Football".text.black.make()),
ElevatedButton(
onPressed: null, child: "Tennis".text.black.make()),
ElevatedButton(
onPressed: null, child: "Fencing".text.black.make()),
ElevatedButton(
onPressed: null, child: "Swimming".text.black.make()),
ElevatedButton(
onPressed: null, child: "Hockey".text.black.make()),
ElevatedButton(
onPressed: null, child: "Karate".text.black.make()),
],
),
isExpanded: active,
canTapOnHeader: true
)
],
),
for (int i = 0; i < items.length; i++) items[i]
],
);
}
}
Explicación:
- El panel de expansión se crea utilizando el generador de encabezados para crear un encabezado del panel de expansión.
- El panel de expansión está envuelto con una lista de paneles de expansión para crear una lista de paneles de expansión.
- En el Panel de expansión, el cuerpo está hecho con algunos botones elevados .
- La propiedad isExpaned se usa para administrar el panel de expansión.
- canTapOnHeader se establece en True para que el Panel de expansión se pueda abrir tocando el encabezado.
Producción:
- Si tocamos el botón desplegable o el encabezado , el Panel de expansión se abrirá como se muestra:
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA