Why the Set State in Textfield doesn't work? - flutter

Question

I want to work with textfields but it doesn't work. Visual Studio always shows an error and I don't know why. The string userText is static because Visual Studio Code wanted this. I even don't know what static means.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Home()));
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
double mph;
int _currentIndex = 0;
static String userText = '';
final _pageOptions = [
Center(
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(8.0),
margin: EdgeInsets.only(bottom: 20.0),
child: Text(
'Km/h',
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Colors.blue[400],
),
),
),
TextField(
decoration: InputDecoration(
hintText: 'Km/h',
focusColor: Colors.green[400],
),
onSubmitted: (String e){
setState(() {
userText = e;
});
},
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Text(
userText,
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20.0,
)
),
)
]
)
),
Text('Suche'),
Text('Kamera'),
Text('Profil'),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Test"),
backgroundColor: Colors.green[400],
),
body: _pageOptions[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
iconSize: 30,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
backgroundColor: Colors.blue[400],
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text("Suche"),
backgroundColor: Colors.green[400],
),
BottomNavigationBarItem(
icon: Icon(Icons.camera_alt),
title: Text("Kamera"),
backgroundColor: Colors.orange[400]
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text("Profile"),
backgroundColor: Colors.purple[400]
),
],
onTap: (index){
setState(() {
_currentIndex = index;
});
},
),
);
}
}

Answer 1

Short answer:
You're initialising it as instance variable, so you can't use setState in it.
final _pageOptions = [...]; // incorrect way
You can simply use getter and setState works in it. Like:
List<Widget> get _pageOptions => [...]; // correct way
Full answer:
void main() => runApp(MaterialApp(home: Home()));
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
double mph;
int _currentIndex = 0;
static String userText = '';
List<Widget> get _pageOptions => [
Center(
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(8.0),
margin: EdgeInsets.only(bottom: 20.0),
child: Text(
'Km/h',
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: Colors.blue[400],
),
),
),
TextField(
decoration: InputDecoration(
hintText: 'Km/h',
focusColor: Colors.green[400],
),
onSubmitted: (String e){
setState(() {
userText = e;
});
},
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Text(
userText,
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20.0,
)
),
)
]
)
),
Text('Suche'),
Text('Kamera'),
Text('Profil'),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Test"),
backgroundColor: Colors.green[400],
),
body: _pageOptions[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
iconSize: 30,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
backgroundColor: Colors.blue[400],
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text("Suche"),
backgroundColor: Colors.green[400],
),
BottomNavigationBarItem(
icon: Icon(Icons.camera_alt),
title: Text("Kamera"),
backgroundColor: Colors.orange[400]
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text("Profile"),
backgroundColor: Colors.purple[400]
),
],
onTap: (index){
setState(() {
_currentIndex = index;
});
},
),
);
}
}