dart – Flutter GridView Item Selection Color Change (on tap)

I have created a GridView, and the next step I’m trying to achieve is changing the color of the container when it is tapped/ selected. When I try and do it with both Inkwell and GestureDetector, it changes the color of both containers in the row, rather than changing each one individually. I want to have each container change colors when it is tapped, as well as have a check mark appear on the corner:

(1) My Layout

(2) Example of what I want

I’m very new to Flutter, so I know that the way that I’ve coded my layout is far from optimal. I’m attaching a small chunk of just the GridView portion to show how I created the GridView (basically, I created 6 containers all with varying custom icons and text). Hopefully I’ll receive some assistance :).

Updated June 21st:

class SelectionPage extends StatefulWidget {

  const SelectionPage({Key? key}) : super(key: key);

  @override

  _SelectionPageState createState() => _SelectionPageState();
}

class Item{
  String title;
  bool isSelected;

  Item({required this.title, this.isSelected = false});

  List <Item>listOfModel = [];
  listOfModel.add(Item(title: "Maintaining healthy relationships"));
  listOfModel.add(Item(title: "Being happier and more content in life"));

  
}

class _SelectionPageState extends State<SelectionPage>{
  
  Color _ContainerColor = Colors.white;
  

  @override

  Widget build(BuildContext) {
    double _height = MediaQuery.of(context).size.height;
    final data = ModalRoute.of(context)!.settings;

    late String retrieveString;

    if (data.arguments == null)
    retrieveString = "empty";
    else
    retrieveString = data.arguments as String;

    return Scaffold(
      resizeToAvoidBottomInset: false,

      backgroundColor: const Color(0xff31708c),

      body: Padding(
        padding: EdgeInsets.only(
          left: 30,
          right: 30,
          top: _height * 0.2),
          child: Column(
            children: <Widget>[
              Text('Hello there $data! What all would you like to focus on? You can pick all that apply:',
              style: GoogleFonts.montserrat(
                color: Colors.white70,
                fontSize: 19,
                fontWeight: FontWeight.w600
              ),
              textAlign: TextAlign.center,),
              const SizedBox(height: 12,),
                Column(children: [
                GridView.count(
                  primary: true,
                  shrinkWrap: true,
                  padding: const EdgeInsets.all(10),
                  childAspectRatio: 1.15,
                  crossAxisCount: 2,
                  crossAxisSpacing: 25,
                  mainAxisSpacing: 25,
                  children: <Widget>[
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          _ContainerColor = _ContainerColor == Colors.white
                          ? Color(0xffa1d0e6)
                          : Colors.white;
                        });
                      },
                      child: Container(
                        padding: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          border: Border.all(
                            color: const Color.fromARGB(255, 20, 83, 106),
                          width: 2.5),
                          color: _ContainerColor
                        ),
                        child: Column(
                          children: [
                            const Align(alignment: Alignment.topCenter,
                            child: Icon(MyFlutterApp.relationships,
                            color: Color(0xff31708c),
                            size: 45,),
                            ),
                            const SizedBox(height: 4,),
                            Text('Maintaining healthy relationships',
                            style: GoogleFonts.montserrat(
                              fontSize: 14,
                              fontWeight: FontWeight.w500,
                              color: const Color(0xff31708c)
                            ),
                            textAlign: TextAlign.center,)
                          ],
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          _ContainerColor = _ContainerColor == Colors.white
                          ? Color(0xffa1d0e6)
                          : Colors.white;
                        });
                      },
                      child: Container(
                        padding: const EdgeInsets.all(13.5),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          border: Border.all(
                            color: const Color.fromARGB(255, 20, 83, 106),
                          width: 2.5),
                          color: Colors.white
                        ),
                        child: Column(
                          children: [
                            const Align(alignment: Alignment.topCenter,
                            child: Icon(MyFlutterApp.happy,
                            color: Color(0xff31708c),
                            size: 30,),
                            ),
                            const SizedBox(height: 12,),
                            Text('Being happier and more content in life',
                            style: GoogleFonts.montserrat(
                              fontSize: 14,
                              fontWeight: FontWeight.w500,
                              color: const Color(0xff31708c)
                            ),
                            textAlign: TextAlign.center,)
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                        border: Border.all(
                          color: const Color.fromARGB(255, 20, 83, 106),
                        width: 2.5),
                        color: Colors.white
                      ),
                      child: Column(
                        children: [
                          const Align(alignment: Alignment.topCenter,
                          child: Icon(MyFlutterApp.balance,
                          color: Color(0xff31708c),
                          size: 40,),
                          ),
                          const SizedBox(height: 8,),
                          Text('Maintaining a better work-life balance',
                          style: GoogleFonts.montserrat(
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            color: const Color(0xff31708c)
                          ),
                          textAlign: TextAlign.center,)
                        ],
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.all(10),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                        border: Border.all(
                          color: const Color.fromARGB(255, 20, 83, 106),
                        width: 2.5),
                        color: Colors.white
                      ),
                      child: Column(
                        children: [
                          const Align(alignment: Alignment.topCenter,
                          child: Icon(MyFlutterApp2.personal_growth,
                          color: Color(0xff31708c),
                          size: 35,),
                          ),
                          const SizedBox(height: 10,),
                          Text('Personal growth and development',
                          style: GoogleFonts.montserrat(
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            color: const Color(0xff31708c)
                          ),
                          textAlign: TextAlign.center,)
                        ],
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                        border: Border.all(
                          color: const Color.fromARGB(255, 20, 83, 106),
                        width: 2.5),
                        color: Colors.white
                      ),
                      child: Column(
                        children: [
                          const Align(alignment: Alignment.topCenter,
                          child: Icon(MyFlutterApp2.meditate,
                          color: Color(0xff31708c),
                          size: 45,),
                          ),
                          const SizedBox(height: 4,),
                          Text('Stress and anxiety management',
                          style: GoogleFonts.montserrat(
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            color: const Color(0xff31708c)
                          ),
                          textAlign: TextAlign.center,)
                        ],
                      ),
                    ),
                   Container(
                      padding: const EdgeInsets.all(11),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                        border: Border.all(
                          color: const Color.fromARGB(255, 20, 83, 106),
                        width: 2.5),
                        color: Colors.white
                      ),
                      child: Column(
                        children: [
                          const Align(alignment: Alignment.topCenter,
                          child: Icon(MyFlutterApp3.well_rounded,
                          color: Color(0xff31708c),
                          size: 37,),
                          ),
                          const SizedBox(height: 10,),
                          Text('Mental and emotional well-being',
                          style: GoogleFonts.montserrat(
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            color: const Color(0xff31708c)
                          ),
                          textAlign: TextAlign.center,)
                        ],
                      ),
                    ),
                  ],
                ),]),
                const SizedBox(height: 17,),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(context,
                  PageTransition(
                    type: PageTransitionType.bottomToTop,
                    duration: const Duration(milliseconds: 650),
                    child: const LoginScreen2() // CHANGE THIS AS SOON AS YOU CAN FIGURE SOMETHING OUT
                  ));
                },
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 88,
                    vertical: 16),
                    primary: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50)
                    )
                ),
                child: Text(
                  'Continue',
                  style: GoogleFonts.montserrat(
                    color: const Color.fromARGB(255, 20, 83, 106),
                    fontSize: 19,
                    fontWeight: FontWeight.w600
                  ),
                ),)
            ],
          ),
      ),
    );
  }
}

Leave a Comment