Add Text(Form)Field input to a list - list

Question

Got a question for my Flutter App:
I have a List:
List<Item> tags = <Item>[
Item(
"name",
Colors.red,
),
Item(
"Cooking",
Colors.red,
),
Item(
"Sport",
Colors.red,
),
];
and a TextFormField
TextFormField(
controller: tagController
how do I manage to add the Text I entered in the Formfield to the list?
They are in different StatefulWidgets.

Answer 1

Provider is a great stateManagement solution for flutter and I have solved you problem using provider. Follow these steps carefully to make sure you implement it correctly.
Start by adding Provider to pubspec.yaml
provider: ^4.3.3
Create a notifier class that extends ChangeNotifier
class ItemListNotifier extends ChangeNotifier{
List<Item> tags = <Item>[
Item(
"name",
Colors.red,
),
Item(
"Cooking",
Colors.red,
),
Item(
"Sport",
Colors.red,
),
];
void add(Item item){
tags.add(item);
notifyListeners(); //Rebuilds the Stateful widget on updating list
}
}
Wrap you MaterialApp inside ChangeNotifierProvider
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<ItemListNotifier>(
create: (context) => ItemListNotifier(),
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ScreenWithList(),
)
);
}
}
Inside you statefulWidget with list named tags access the notifier's value using a Consumer that rebuilds every time the list gets updated and prevents the whole screen from rebuilding.
class ScreenWithList extends StatefulWidget {
#override
_ScreenWithListState createState() => _ScreenWithListState();
}
class _ScreenWithListState extends State<ScreenWithList> {
List<Item> tags = <Item>[
Item(
"name",
Colors.red,
),
Item(
"Cooking",
Colors.red,
),
Item(
"Sport",
Colors.red,
),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(child: Consumer<ItemListNotifier>(
builder: (context, list, child) {
print('Rebuilt');
return ListView.builder(
itemCount: list?.tags?.length ?? 0,
itemBuilder: (context, index) {
return Text(list?.tags[index]?.name ?? '');
}
);
},
)
),
floatingActionButton: FloatingActionButton(
child: Icon(
Icons.arrow_forward,
),
onPressed: () => Navigator.push(context, MaterialPageRoute(builder:
(context) => ScreenWithFormField()))
),
);
}
}
Now update your list from statefulWidget by using Provider to access add function of ItemListNotifier.
FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => Provider.of<ItemListNotifier>(context, listen: false).add(Item(tagController.text.trim(), Colors.red)),
),
What's happening here?
Every time you update the list using ItemListNotifier's add method, it rebuilds the Consumer<ItemListNotifier.