My question is setstate is not working with the statefulbuilder and list of widgets I want to update color of the container. Although color of button is updating. I am not sure what is the problem
Color currentColor = Colors.grey;
void changecolor(Color color) {
setState(() {
currentColor = color;
});
}
List<Widget> list = [];
@override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
Positioned(
right: 50,
top: 50,
child: RaisedButton(
elevation: 3.0,
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(0.0),
contentPadding: const EdgeInsets.all (0.0),
content: SingleChildScrollView(
child: MaterialPicker(
pickerColor: currentColor,
onColorChanged: changecolor,
enableLabel: true,
),
),
);
},
);
},
child: const Text('Change me'),
color: currentColor,
),
),
...list,
Positioned(
left: 50,
top: 50,
child: RaisedButton(
child: Text(
'Add another Color Sticker',
style: TextStyle(fontSize: 10),
),
onPressed: () {
setState(
() {
list.add(
StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Positioned(
left: 100,
top: 100,
child: Container(
color: currentColor,
height: 100,
width: 100,
),
);
},
),
);
},
);
},
),
),
],
),
);
Can anyone help me with this issue I am not able to understand why it is not updating the color of the container Thanks in advance.
You can copy paste run full code below
In this case, you can use ValueNotifier<Color>
and ValueListenableBuilder
code snippet
ValueNotifier<Color> currentColor = ValueNotifier(Colors.grey);
...
MaterialPicker(
pickerColor: currentColor.value,
...
child: const Text('Change me'),
color: currentColor.value,
...
list.add(ValueListenableBuilder(
valueListenable: currentColor,
builder: (BuildContext context, Color current,
Widget child) {
return Positioned(
left: 100,
top: 100,
child: Container(
color: current,
height: 100,
width: 100,
),
);
}));
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
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: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Test(),
);
}
}
class Test extends StatefulWidget {
@override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
ValueNotifier<Color> currentColor = ValueNotifier(Colors.grey);
void changecolor(Color color) {
setState(() {
currentColor.value = color;
});
}
List<Widget> list = [];
@override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
Positioned(
right: 50,
top: 50,
child: RaisedButton(
elevation: 3.0,
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(0.0),
contentPadding: const EdgeInsets.all(0.0),
content: SingleChildScrollView(
child: MaterialPicker(
pickerColor: currentColor.value,
onColorChanged: changecolor,
enableLabel: true,
),
),
);
},
);
},
child: const Text('Change me'),
color: currentColor.value,
),
),
...list,
Positioned(
left: 50,
top: 50,
child: RaisedButton(
child: Text(
'Add another Color Sticker',
style: TextStyle(fontSize: 10),
),
onPressed: () {
setState(
() {
list.add(ValueListenableBuilder(
valueListenable: currentColor,
builder: (BuildContext context, Color current,
Widget child) {
return Positioned(
left: 100,
top: 100,
child: Container(
color: current,
height: 100,
width: 100,
),
);
}));
},
);
},
),
),
],
),
);
}
}
Brother if your comfortable to answer this: stackoverflow.com/questions/65095872/…. That would be great