The function 'setState' isn't defined. Dart/Flutter - flutter

Question

I want to be able to spawn a dropdown menu to select values, I've made sure everything is stateful but Setstate doesn't like it still.
Tried wrapping it in different widgets or using different dropdown properties. still doesn't want to work it seems.
class DicePage extends StatefulWidget {
#override
_DicePageState createState() => new _DicePageState();
}
class _DicePageState extends State<DicePage> {
#override
Widget build(BuildContext ctxt) {
return Scaffold(
appBar: AppBar(
),
body: BodyLayout(),
);
}
}
class BodyLayout extends StatefulWidget {
BodyLayout({Key key}) : super(key: key);
#override
_BodyLayoutState createState()=> _BodyLayoutState();
}
class _BodyLayoutState extends State<BodyLayout> {
#override
Widget build(BuildContext ctxt) {
return _myListView(ctxt);
}
}
Widget _myListView(BuildContext ctxt) {
final List<String> entries = <String>['A','B','C'];
final List<int> colorCodes = <int>[600, 500, 100];
return ListView.separated(
padding: const EdgeInsets.all(8.0),
itemCount: entries.length,
itemBuilder: (BuildContext ctxt, int index) {
return Container(
height: 150,
color: Colors.amber[colorCodes[index]],
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new SingleChildScrollView(
child: DropdownButton<String>(
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['1','2','3','4','5','6','7','8','9','10']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
new Container(
padding: const EdgeInsets.all(20),
child: new MaterialButton(
onPressed: () {},
child: Text('2'),
),
),
new Container(
padding: const EdgeInsets.all(20),
child: new IconButton(
iconSize: 80,
onPressed: () {},
icon: Icon(Icons.casino),
),
),
],
)
);
},
separatorBuilder: (BuildContext ctxt, int index) => const Divider(),
);
}
Expected it to spawn a listed dropdown menu on button click.

Answer 1

Trying your code, it will actually get the error:
The function 'setState' isn't defined.
If you call setState outside, there is no way for flutter to recognize on which state should be updated.
You should have the _myListView method inside the BodyLayout class, as that has to do with the state.
Here is an updated code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
);
}
}
class DicePage extends StatefulWidget {
#override
_DicePageState createState() => new _DicePageState();
}
class _DicePageState extends State<DicePage> {
#override
Widget build(BuildContext ctxt) {
return Scaffold(
appBar: AppBar(),
body: BodyLayout(),
);
}
}
class BodyLayout extends StatefulWidget {
BodyLayout({Key key}) : super(key: key);
#override
_BodyLayoutState createState() => _BodyLayoutState();
}
class _BodyLayoutState extends State<BodyLayout> {
String dropdownValue;
#override
Widget build(BuildContext ctxt) {
return _myListView(ctxt);
}
Widget _myListView(BuildContext ctxt) {
final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];
return ListView.separated(
padding: const EdgeInsets.all(8.0),
itemCount: entries.length,
itemBuilder: (BuildContext ctxt, int index) {
return Container(
height: 150,
color: Colors.amber[colorCodes[index]],
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new SingleChildScrollView(
child: DropdownButton<String>(
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>[
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
new Container(
padding: const EdgeInsets.all(20),
child: new MaterialButton(
onPressed: () {},
child: Text('2'),
),
),
new Container(
padding: const EdgeInsets.all(20),
child: new IconButton(
iconSize: 80,
onPressed: () {},
icon: Icon(Icons.casino),
),
),
],
));
},
separatorBuilder: (BuildContext ctxt, int index) => const Divider(),
);
}
}