You can copy paste run full code below
Step 1: Set initial value in _ClassroomState
class _ClassroomState extends State<Classroom> {
..
Color color = Colors.red;
String value = 'Red';
Step 2: Callback function selectLightColor
need parameter selectedValue
and use if else if
, you have logic error here
selectLightColor(String selectedValue) {
setState(() {
value = selectedValue;
if (selectedValue == 'Red') {
color = lightColor[0];
} else if (selectedValue == 'Green') {
color = lightColor[1];
} else if (selectedValue == 'Blue')
color = lightColor[2];
else
color = Colors.amber;
});
}
Step 3: LightColorSelector
constructor
and onChanged
need to set initialVal
and onChanged
need to call func(value)
;
class LightColorSelector extends StatelessWidget {
String initialVal;
Function func;
LightColorSelector(Function func, String value) {
this.func = func;
this.initialVal = value;
}
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
child: DropdownButton<String>(
value: initialVal,
onChanged: (value) {
initialVal = value;
func(value);
},
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(body: Classroom()),
);
}
}
// ignore: must_be_immutable
class LightBulb extends StatelessWidget {
bool isLit;
Color color;
LightBulb(bool isLit, Color color) {
this.isLit = isLit;
this.color = color;
print(color.toString());
}
Widget build(BuildContext context) {
return Container(
color: isLit ? color : Colors.red,
padding: EdgeInsets.all(5),
child: isLit ? Text('ON') : Text('OFF'),
);
}
}
class LightButton extends StatelessWidget {
Function func;
bool isLightOn;
LightButton(Function func, bool iSLightOn) {
this.func = func;
this.isLightOn = iSLightOn;
}
String title() {
if (isLightOn) return "Turn light off";
return "Turn light on";
}
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(vertical: 4, horizontal: 12),
color: Colors.red,
child: Container(
color: Colors.blue,
child: MaterialButton(
textColor: Colors.white,
onPressed: () => func(),
child: Text(
title(),
style: TextStyle(color: Colors.white),
),
),
),
);
}
}
class Classroom extends StatefulWidget {
@override
_ClassroomState createState() => _ClassroomState();
}
class _ClassroomState extends State<Classroom> {
bool isLightOn = false;
String title = "Not set yet";
List<Color> lightColor = [Colors.red, Colors.green, Colors.blue];
Color color = Colors.red;
String value = 'Red';
selectLightColor(String selectedValue) {
setState(() {
value = selectedValue;
if (selectedValue == 'Red') {
color = lightColor[0];
} else if (selectedValue == 'Green') {
color = lightColor[1];
} else if (selectedValue == 'Blue')
color = lightColor[2];
else
color = Colors.amber;
});
}
onButtonPressed() {
setState(() {
isLightOn = !isLightOn;
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
//color: Colors.blue,
padding: EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
LightBulb(isLightOn, color),
LightButton(onButtonPressed, isLightOn),
LightColorSelector(selectLightColor, value),
],
),
),
);
}
}
class LightColorSelector extends StatelessWidget {
String initialVal;
Function func;
LightColorSelector(Function func, String value) {
this.func = func;
this.initialVal = value;
}
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
child: DropdownButton<String>(
value: initialVal,
onChanged: (value) {
initialVal = value;
func(value);
},
items: <String>['Red', 'Green', 'Blue']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
));
}
}