TextFormField enter key press getting setState() called during build -error - flutter

Question

Hi I am trying to add some values from TextFormField to ListView when click on enter key .
But getting the error setState() or markNeedsBuild() called during build
My code is below .
class ScanBarcode extends StatefulWidget {
#override
_ScanBarcodeState createState() => _ScanBarcodeState();
}
class _ScanBarcodeState extends State<ScanBarcode> {
List<String> litems = [];
final TextEditingController eCtrl = new TextEditingController();
#override
Widget build(BuildContext ctxt) {
return new Scaffold(
appBar: new AppBar(title: new Text("Dynamic Demo"),),
body: new Column(
children: <Widget>[
new TextFormField(
controller: eCtrl,
maxLines: null,
autovalidate: true,
textInputAction: TextInputAction.none,
// ignore: missing_return
validator: (value) {
if (value.isEmpty==false) {
// if(eCtrl.text.trim()!='') {
if (value.contains('\n')) {
debugPrint(value);
litems.add(value); // Append Text to the list
eCtrl.clear(); // Clear the Text area
setState(() {});
}
}
// }
},
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter a search term'
),
),
new Expanded(
child: new ListView.builder
(
itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int Index) {
return new Text(litems[Index]);
}
)
)
],
)
);
}
}
I am getting below error.
setState() or markNeedsBuild() called during build
if commented
setState()
it is working fine but the values are not added to list view ..
Any help will be appreciated.

Answer 1

You can copy paste run full code below
You can use addPostFrameCallback
code snippet
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {});
});
working demo
full code
import 'package:flutter/material.dart';
class ScanBarcode extends StatefulWidget {
#override
_ScanBarcodeState createState() => _ScanBarcodeState();
}
class _ScanBarcodeState extends State<ScanBarcode> {
List<String> litems = [];
final TextEditingController eCtrl = TextEditingController();
#override
Widget build(BuildContext ctxt) {
return Scaffold(
appBar: AppBar(
title: Text("Dynamic Demo"),
),
body: Column(
children: <Widget>[
TextFormField(
controller: eCtrl,
maxLines: null,
autovalidate: true,
textInputAction: TextInputAction.none,
// ignore: missing_return
validator: (value) {
if (value.isEmpty == false) {
// if(eCtrl.text.trim()!='') {
if (value.contains('\n')) {
debugPrint(value);
litems.add(value); // Append Text to the list
eCtrl.clear(); // Clear the Text area
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {});
});
}
}
// }
},
decoration: InputDecoration(
border: InputBorder.none, hintText: 'Enter a search term'),
),
Expanded(
child: ListView.builder(
itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int Index) {
return Text(litems[Index]);
}))
],
));
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ScanBarcode(),
);
}
}

Answer 2

Chunhunghan's solution is a valid solution and still works. But, in my case, it's the future build & the stream builder.
What I did is, I directly assigned the Future to a FutureBuilder, which gets called every time when the build() is called, which causes the Future method to re-call & reload my UI every time I touched/typed on a TextField/TextFormField.
The Solution:
Create a Future object & assign the Future method to that future object, then assign the future object to the FutureBuilder widget.
The Code:
late Future _dataFuture;
#override
void initState() {
super.initState();
_stream = _leadDatabase.listenLeads();
_dataFuture = _fetchData();
}
//inside build()
FutureBuilder(future: _dataFuture, builder:context, dataSnapshot) {
//logics
}
The same solution is applicable for StreamBuilder.