I want to change color of container onTap from shade of grey to white and everything works alright in my FeedScreen file but in filter file I need to exit and then go back to see the change even tho i did everything exactly same in FeedScreen and Filter file. i think the problem has something to do with the fact that i enter filter menu from feed screen on tap of the button but im not sure.
this is filter file that doesnt work properly:
class _ExampleState extends State<Example> {
int _selectedindex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedindex = index;
});
}
int index = 0;
var random = Random();
List<Color> myColors = [
Colors.white,
Colors.grey.shade900,
Colors.green,
Colors.cyan,
Colors.pink,
];
void changeColorsIndex() {
setState(() {
index = random.nextInt(4);
});
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
width: size.width,
height: 40,
color: Color.fromARGB(255, 28, 28, 28),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 1.5),
child: IconButton(
onPressed: (() {
setState(
() {
showDialog(
context: context,
builder: (BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
width: size.width,
height: size.height,
child: Scaffold(
backgroundColor: Colors.black,
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: const EdgeInsets.only(bottom: 30),
child: Column(
children: [
Center(
child: Padding(
padding:
const EdgeInsets.only(top: 5),
child: IconButton(
onPressed: () {
Navigator.pop(
context,
MaterialPageRoute(
builder: (context) =>
TopTab(),
),
);
},
icon: const Icon(
Icons.arrow_drop_down),
iconSize: 45,
color: Colors.white,
),
),
),
const Gap(15),
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
setState(() {
changeColorsIndex();
});
},
child: Container(
width: 199,
height: 50,
color: myColors[index],
child: const Center(
child: Text(
'Men\'s',
style: TextStyle(
fontSize: 14,
fontWeight:
FontWeight.w600,
color: Colors.white),
),
),
),
),
],
),
),
],
),
),
),
),
),
);
},
);
},
);
}),
icon: Icon(Ionicons.options_outline),
iconSize: 20,
color: Colors.white,
),
),
const Gap(6),
Text(
'Filter by size',
style: TextStyle(
color: Colors.grey.shade600,
fontSize: 14,
fontWeight: FontWeight.w700),
),
],
),
);
}
}
and this is FeedScreen file that works normally:
class _FeedScreenState extends State<FeedScreen> {
int index = 0;
var random = Random();
List<Color> myColors = [
Colors.white,
Colors.grey.shade900,
Colors.green,
Colors.cyan,
Colors.pink,
];
void changeColorsIndex() {
setState(() {
index = random.nextInt(4);
});
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: ListView(
children: [
Container(
width: size.width,
height: size.height,
color: Colors.black,
child: Column(
// this column is start of everything and container below is filter part just below app bar
children: [
Example(),
InkWell(
onTap: changeColorsIndex,
child: Container(
width: size.width,
height: 450,
color: myColors[index],
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Padding(
padding: EdgeInsets.only(top: 15, left: 15),
child: Text(
'Air Force 1 x Premium Goods',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 17,
color: Colors.white),
),
),
Gap(5),
Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'The Sophia',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30,
color: Colors.white),
),
),
Gap(50),
Image(
image: AssetImage('assets/AF1xPGmain.png'),
),
],
),
),
),
],
),
)
],
),
);
}
}
i tried with GestureDecoration also even tho its same thing but it just doesnt work
CodePudding user response：
you have written different onTap method in the filter file
change
onTap: () {
setState(() {
changeColorsIndex();
});
},
To
onTap: changeColorsIndex,
In filter file wrap your dialog with stateful builder as shown here
CodePudding user response：
you can add a StatefulBuilder Widget to make your showDialog able to use setState try it and let me please know if it works
class _ExampleState extends State<Example> {
int _selectedindex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedindex = index;
});
}
int index = 0;
var random = Random();
List<Color> myColors = [
Colors.white,
Colors.grey.shade900,
Colors.green,
Colors.cyan,
Colors.pink,
];
void changeColorsIndex() {
setState(() {
index = random.nextInt(4);
});
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
width: size.width,
height: 40,
color: Color.fromARGB(255, 28, 28, 28),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 1.5),
child: IconButton(
onPressed: (() {
setState(
() {
showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
width: size.width,
height: size.height,
child: Scaffold(
backgroundColor: Colors.black,
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: const EdgeInsets.only(bottom: 30),
child: Column(
children: [
Center(
child: Padding(
padding:
const EdgeInsets.only(top: 5),
child: IconButton(
onPressed: () {
Navigator.pop(
context,
MaterialPageRoute(
builder: (context) =>
TopTab(),
),
);
},
icon: const Icon(
Icons.arrow_drop_down),
iconSize: 45,
color: Colors.white,
),
),
),
const Gap(15),
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
setState(() {
changeColorsIndex();
});
},
child: Container(
width: 199,
height: 50,
color: myColors[index],
child: const Center(
child: Text(
'Men\'s',
style: TextStyle(
fontSize: 14,
fontWeight:
FontWeight.w600,
color: Colors.white),
),
),
),
),
],
),
),
],
),
),
),
),
),
);
});
},
);
},
);
}),
icon: Icon(Ionicons.options_outline),
iconSize: 20,
color: Colors.white,
),
),
const Gap(6),
Text(
'Filter by size',
style: TextStyle(
color: Colors.grey.shade600,
fontSize: 14,
fontWeight: FontWeight.w700),
),
],
),
);
}
}