Flutter - How do I change the color of the Expanded only clicked. Thank you?

Asked

Viewed 2,045 times

0

                  Row(
                      children: lists
                          .map((element) => Expanded(
                              child: new GestureDetector(
                                  onTap: () {
                                    print("Container clicked");
                                    setState(() {
                                      _doop = element;
                                      _isFavorited = true;
                                    });

                                    print(element);
                                  },
                                  child: Container(
                                      margin: const EdgeInsets.all(5.0),
                                      padding: const EdgeInsets.all(5.0),
                                      decoration:
                                          myBoxDecoration(), //       <--- BoxDecoration here
                                      child: Text(
                                        element,
                                        style: TextStyle(
                                            fontSize: 15.0,
                                            color: (_isFavorited ? Colors.black87 : Colors.yellowAccent),
                                            fontWeight: FontWeight.bold),
                                        textAlign: TextAlign.center,
                                      )))))
                          .toList())
flutter dart

  • You could reduce your problem to as little executable code as possible, so that people who would help you just copy, execute, correct, and explain the correction/landing. When you provide only half of the code can only happen two things, the first is to execute the code mentally trying to analyze and propose a change that 'might work'. The second is to have to waste an extra amount of time just to try to generate an executable code based on your code snippet, hunting for the name of variables and objects to be able to recreate it, it becomes difficult.

2 answers

0

At click time, you will give a setState in a color attribute to update the Container color. You can even use an Animated container to make the animation between colors.

  • then it makes them all change color

  • Got it, my fault, you need to track the current widget. You can use a globalKey for each container. Each container (if you automatically generate them according to your data) you can use the key as an ID of the object you uploaded. Ai using the saved key, you can make a List of the Keys and access the list of their containers based on the array’s Dice. Talking sounds complicated, but it’s one of the possible solutions for what I can think of now.

0

You can use one ExpansionTile in the same way as using Exapanded, and define the property backgroundColor the color you prefer, and then when the Expanded opens, it will change color only of the same, leaving the different of the others. Here’s an example of how I use it.

_listOfModules = this
    .items
    .map((data) => ExpansionTile(
          backgroundColor: Colors.blueGrey[50],
          leading: IconButton(
            icon: getIcon(data),
          ),
          title: Text(data.item.name.keyvalue),
          children:? <Widget>[Text("Nenhum Item encontrado")]
                  : data.items
                      .map((vprocess) => ListTile(
                            title: Text(
                                "${AppTranslations.of(context).text(vprocess.item.title.keyvalue)}"),
                            onTap: () {
                              setState(() {
                                url = vprocess.item.url;
                                title = vprocess.item.title.keyvalue;
                              });
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) => RelatorioCard(
                                        url: url, title: title),
                                  ));
                            },
                          ))
                      .toList(),
          onExpansionChanged: (value) {
            if (value) {
              this.getProcess(data);
            }
          },
        )

You can change the ListTile for his GestureDetector to continue following your code.

Browser other questions tagged flutter dart

You are not signed in. Login or sign up in order to post.