Can I use InkWell inside FutureBuilder in order to change the color of a Container (Ink) on Tap? I tried it but seems not working, so I'm wondering if the problem is FutureBuilder.

 @override
  void initState() {

    super.initState();
    _future = MatchCard.get();
  }

  @override
  Widget build(BuildContext context) {
    Color _color1 = Colors.white;
  
    return FutureBuilder(
        future: _future,
        builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
          if (snapshot.hasError) {
            return const Text("Something went wrong");
          }

          if (snapshot.hasData && !snapshot.data!.exists) {
            return const Text("Document does not exist");
          }
          if (snapshot.connectionState == ConnectionState.done) {
            Map<String, dynamic> data =
                snapshot.data!.data() as Map<String, dynamic>;

            return Card(
                elevation: 3.0,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0)),
                color: Colors.grey[50],
                child: Column(
                  children: [
                    Row(
                      children: [
                        Padding(
                          padding:
                              const EdgeInsets.only(right: 8, left: 8, top: 8),
                          child: Text(
                            "${data["teams"]}",
                            style: const TextStyle(
                                fontWeight: FontWeight.w600, fontSize: 16),
                          ),
                        ),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(
                          top: 10, left: 8, right: 8, bottom: 8),
                      child: Row(
                        children: [
                          Expanded(
                            child: InkWell(
                              
                              onTap: () {
                                setState(() {
                                  _color1 = Colors.teal;
                                });
                              },
                              child: Row(
                                children: [
                                  Flexible(
                                    flex: 4,
                                    child: Container(
                                      alignment: Alignment.center,
                                      color: Colors.teal[700],
                                      child: const Padding(
                                        padding: EdgeInsets.all(4.0),
                                        child: Text(
                                          "1",
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  Flexible(
                                    flex: 6,
                                    child: Ink(

                                      color: _color1,
                                      child: Padding(
                                        padding: const EdgeInsets.all(4.0),
                                        child: Text("${data["odds"]["home"]}"),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                          
                          
                        ],
                      ),
                    )
                  ],
                ));
          }
          return const CircularProgressIndicator();
        });
  }

CodePudding user response：

In flutter when you call

          setState(() {
              _color1 = Colors.teal;
            });

Flutter calls the build method to redrew the screen and in your code when build() is being executed the first line is

    Color _color1 = Colors.white;

which is making the color white again, your color is changing and changing back. move that line outside your build method and everything should work just fine.