Flutter onTap Button

when a user tap on the fan button, I want it to change to the button with tick and a text underneath

Comments

[Keff]

Hey there, I would love to help out, but I would suggest improving the question a bit, it's too broad. Please show us some of the code you currently have, and what you've tried already.

I would also suggest adding the help tag, as it's intended for this purpose

[devlade]

from the image, once the user clicks on the fan container, I want it to change to the fan on the right hand side of the image

dev-to-uploads.s3.amazonaws.com/up...

[Keff]

Okay, I see what you mean, I think you can use a Stack for this. Then based on some property, show one or the other state. Something like this:

build(context) {
  var isSelected = false;

  return Stack(
    children: [
      Content(selected: isSelected),
      if(isSelected) TickWidget()
    ]‚
  );
}

What this does is, it returs a stack, on one layer you have the icon and label (Content), and conditionally add the TickWidget if the button is selected.

Additionaly you can pass in the isSelected value to the icon and label, so you can also change the color.

I can't help much without knowing how it's set up, though this might point you in the correct direction.

[devlade]

if I will understand you betterm

you mean I should have a different class for each button, then put the class as children in a stack?

but I don't understand that content part. Does that mean the content is the first widget with a tick?

[Keff]

Kind of, you should have a single widget for the button, but inside that you will have a stack with 2 layers, one for the icon and label, and another layer on top, with the tick.

take a look at this, this explains how to style stuff conditionaly stackoverflow.com/questions/519044...

I would suggest reading a bit more about Stack as well, here is a good answer in Stack overflow: stackoverflow.com/questions/623876...

I think this is too broad of a question, I would suggest learning about the fundamentals of flutter, by checking out their guides flutter.dev/docs/get-started/learn...

[Keff]

Kind of, you should have a single widget for the button, but inside that you will have a stack with 2 layers, one for the icon and label, and another layer on top, with the tick.

take a look at this, this explains how to style stuff conditionaly stackoverflow.com/questions/519044...

I would suggest reading a bit more about Stack as well, here is a good answer in Stack overflow: stackoverflow.com/questions/623876...

I think this is too broad of a question, I would suggest learning about the fundamentals of flutter, by checking out their guides flutter.dev/docs/get-started/learn...

[devlade]

alright, thank you so much

[Baransel]

bool clicked = false;

Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: IconButton(
              icon: Icon( clicked ? Icons.celebration : Icons.title),
              onPressed: () {
                setState(() {
                  clicked = !clicked;
                });
              },
          ), //IconButton
        ), //Center
    ); //Scaffold
}

[devlade]

from the image, once the user clicks on the fan container, I want it to change to the fan on the right hand side of the image

dev-to-uploads.s3.amazonaws.com/up...