Cómo agregar dinámicamente a los elementos secundarios de un widget de columna en Flutter
Flutter es un marco bastante reciente y, como tal, no hay mucha ayuda disponible para tareas simples. Lo que pregunto específicamente es cómo agrego widgets de tarjeta a un widget de columna. El código fuente se proporciona a continuación para ayudar a explicar lo que quiero decir.
Digamos que tengo una función que crea una nueva Tarjeta como se muestra a continuación:
buildRow(barcode, letter, name, price) {
return new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new ListTile(
leading: new CircleAvatar(
child: new Text(letter),
),
title: new Text(name),
subtitle: new Text("\$" + price),
trailing: new Text(
"x1",
style: new TextStyle(color: Colors.lightBlue),
textScaleFactor: 1.2,
),
),
],
),
);
}
var snack = buildRow("091918229292", "C", "Crackers", "\$4.00");
var fruit = buildRow("091928229292", "P", "Pomegranate", "\$2.00");
var juice = buildRow("091948229292", "K", "Kiwi Juice", "\$20.00");
Y tengo la siguiente pantalla/página:
class Home extends StatefulWidget {
@override
HomePage createState() => new HomePage();
}
class HomePage extends State<Home> {
@override
Widget build(BuildContext context) {
return new Column(children: <Widget>[
]);
}
}
Digamos que todo el código proporcionado está dentro del mismo archivo. ¿Cómo hago para agregar 'refrigerio', 'fruta' y 'jugo' dentro de los elementos secundarios del widget de columna en la pantalla de inicio?
Este es un ejemplo básico si actualiza manualmente su fuente.
Column(
children: _createChildren(),
)
///////
Este es el método que crea una lista de widgets que alimentas a tu columna.
List<int> someList = [1, 2, 3, 4, 5];
List<Widget> _createChildren() {
return new List<Widget>.generate(someList.length, (int index) {
return Text(someList[index].toString());
});
}
//////
Entonces, cuando actualices tu lista, hazlo ensetState
void _somethingHappens() {
setState(() {
someList.add(6);
});
}
Ahora, si recibes tus datos de una transmisión, puedes verificarlos StreamBuilder, o si provienen de un Future, puedes usarlos FutureBuilder.
Este ejemplo también se puede hacer de forma regular.Builder
Ok ya resolví mi problema, lo que hice fue crear una nueva lista así:
List<Widget> v = [];
e hizo esta lista los hijos del cuerpo así:
class HomePage extends State<Home> {
@override
Widget build(BuildContext context) {
return new Column(children: v);
}
}
Después de lo cual creé una función para agregarla así:
buildRow(barcode, letter, name, price) {
v.add(new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new ListTile(
leading: new CircleAvatar(
child: new Text(letter),
),
title: new Text(name),
subtitle: new Text("\$" + price),
trailing: new Text(
"x1",
style: new TextStyle(color: Colors.lightBlue),
textScaleFactor: 1.2,
),
),
],
),
));
}
y finalmente utilicé la función setState para aplicar los cambios a la pantalla.
En la columna puedes agregar niños a través de un mapa como este:
Column(
children: List<Widget>.generate(length, (index) {
return Container(
child: Text('$index')
);
})
)
