How do i change the color and text of Container at onTap event in FLUTTER

Question

I have two containers in a row and what i want to do is when i click the 1st container it changes its color as well as the 2nd container

i.e. -when i click on 1st container it make it look like selected and the other one deselected and same as on 2nd container.

Is there anyway to do that?

GestureDetector(
                    onTap: () {
                      print('its getting pressed');

                    },
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Expanded(
                          child: Container(
                            height: screenHeight * 0.057,
                            width: double.infinity,
                            color: greyf1,
                            child: Center(
                              child: Text(
                                'Borrower',
                                style: hintTextTextStyle,
                              ),
                            ),
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Expanded(
                          child: Container(
                            height: screenHeight * 0.057,
                            width: double.infinity,
                            color: greyf1,
                            child: Padding(
                              padding: const EdgeInsets.only(left: 15),
                              child: Center(
                                child: Text(
                                  'Lender',
                                  style: hintTextTextStyle,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),

Solution

You can try the following. This will use the selected property to decide which container should be blue.

Have not tested the code

class _TestState extends State<Test> {
  String selected = "first";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        GestureDetector(
          onTap: () {
            setState(() {
              selected = 'first';
            });
          },
          child: Container(
            height: 200,
            width: 200,
            color: selected == 'first' ? Colors.blue : Colors.transparent,
            child: Text("First"),
          ),
        ),
        GestureDetector(
          onTap: () {
            setState(() {
              selected = 'second';
            });
          },
          child: Container(
            height: 200,
            width: 200,
            color: selected == 'second' ? Colors.blue : Colors.transparent,
            child: Text("Second"),
          ),
        ),
      ],
    );
  }
}

Comments

[guruprakash gupta]

If i can get the Text value of each container at the time of click event that can make it do i guess,if u guys have anything please share

[guruprakash gupta]

colors should change simultaneously on both the container

[Tinus Jackson]

If you set the selected to something different then it will change both ... have you tried this?