Flutter: How to replace icon image from the list of pictures to chose from?

user_18574977 0
Viewed 358

For instance: I have a main Icon so when you click on it, it opens a pop-up window with smaller icons/images to select from. So if you select one of the pictures from that pop-up it replaces the main Icon to that specific image.

I have spent hours trying to figure out how to replace icon images but nothing seems to work.

dart flutter icons button
2 Answers

I have created an example (I have used flutter_speed_dial to make expandable buttons but it's not necessary). You can adjust it to your needs:

class _TestState extends State<Test> {
  var fabIcon = Icons.expand_less;
  var button1Icon = Icons.home;
  var button2Icon = Icons.shop;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: SpeedDial(
          icon: fabIcon,
          backgroundColor: Color(0xFF801E48),
          visible: true,
          curve: Curves.bounceIn,
          children: [
            // FAB 1
            SpeedDialChild(
                child: Icon(button1Icon),
                backgroundColor: Color(0xFF801E48),
                onTap: () {
                  var temp = fabIcon;
                  setState(() {
                    fabIcon = button1Icon;
                    button1Icon = temp;
                  });
                },
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                    fontSize: 16.0),
                labelBackgroundColor: Color(0xFF801E48)),
            // FAB 2
            SpeedDialChild(
                child: Icon(button2Icon),
                backgroundColor: Color(0xFF801E48),
                onTap: () {
                  var temp = fabIcon;
                  setState(() {
                    fabIcon = button2Icon;
                    button2Icon = temp;
                  });
                },
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                    fontSize: 16.0),
                labelBackgroundColor: Color(0xFF801E48))
          ],
        ),
      ),
    );
  }
}
user_171045170

Using showDialog(...) is the solution.

Hope this will help you and others.

you can look at this example:

import 'package:flutter/material.dart';

class IconDialogScreen extends StatefulWidget {
  const IconDialogScreen({Key? key}) : super(key: key);

  @override
  State<IconDialogScreen> createState() => _IconDialogScreenState();
}

class _IconDialogScreenState extends State<IconDialogScreen> {
  IconData icon = Icons.abc;

  List<IconData> icons = [
    Icons.abc,
    Icons.person_add,
    Icons.person,
    Icons.person_remove,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: TextButton(
              onPressed: onIconClicked,
              child: Wrap(
                crossAxisAlignment: WrapCrossAlignment.center,
                spacing: 20,
                children: [Icon(icon, size: 50), const Text("change icon")],
              ),
            ),
          )
        ],
      ),
    );
  }

  void onIconClicked() async {
    IconData? _icon = await showDialog<IconData?>(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('Select one icon'),
          content: Wrap(
            spacing: 10,
            runSpacing: 10,
            children: icons.map<Widget>((e) {
              return ElevatedButton(
                  onPressed: () {
                    Navigator.of(context).pop(e);
                  },
                  child: Icon(e, size: 50));
            }).toList(),
          ),
        );
      },
    );
    if (_icon != null) {
      setState(() {
        icon = _icon;
      });
    }
  }
}
user_185517760
Related