Flutter: How to change IconButton image from list of iconButtons? - flutter

Question

For instance: I have a main IconButton using assets/image/button.png as an icon!
so when you click on it, it opens a pop-up window with smaller icons/images using the assets as well and from that pop-up, you can select IconButton to replace the main Image. So if you select one of the pictures from that pop-up it replaces the main Icon to that specific image. How would you implement that if you wanted to use your assets as buttons?
On separate Dart file I have main Image Container:
Container(
width: 100,
padding: EdgeInsets.only(bottom: 50),
child: MainIcon()
),
Code I have tried:
class MainIcon extends StatefulWidget {
const MainIcon({Key? key}) : super(key: key);
#override
State<MainIcon> createState() => _MainIcon();
}
class _MainIcon extends State<MainIcon> {
Widget build(BuildContext context) {
return Container(
child: IconButton(
icon: GetItems(),
iconSize: 150,
onPressed: () {
showShopItems();
},
));
}
//pop-up window for changing icons
Future showShopItems() => showDialog(
context: context,
builder: (context) => AlertDialog(
content: ShopItems(),
backgroundColor: Colors.transparent,
));
//change food icons
Image GetItems() {
if (Bag.isClicked = true) {
return Image.asset('assets/images/bag.png');
}
if (Shampoo.isClicked = true) {
return Image.asset('assets/images/shampoo.png');
}
if (lotion.isClicked == true) {
return Image.asset('assets/images/lotion.png');
} else {
return Image.asset('assets/images/cart.png');
}}}
What each widget button looks like:
class Bag extends StatefulWidget {
static bool isClicked = false;
const Bag({Key? key}) : super(key: key);
#override
State<Bag> createState() => _Bag();
}
class _Bag extends State<Bag> {
Widget build(BuildContext context) {
return Container(
child: IconButton(
icon: Image.asset('assets/images/bag.png'),
iconSize: 70,
onPressed: () {
Bag.isPressed == true;
});
print("bag is clicked");
},
));
}
}

Answer 1

I would try to give each button an id and when clicking on the corresponding button, assign the desired id to the big main button, and then call setState (() {}) to update the widget and it will change its image. Further, I would save this id to the Database and asynchronously load the value every time I log in to the application, you can use Flutter Secure Storage or Shared Preferences as the Database for application settings. If you have something more than just changing the image on the main button, for example, changing the link that the button leads to, then create models, then create a list of models with predefined values and use them.