Flutter adding text in Gesture Detector

Question

output

1. I am trying to add text below each button. "Facebook" under Facebook button, "google" under google button.

2. filling the background color when on Tap

3. when both button are clicked, one should remain a white background where the other has a background color.

Widget chooseType(){
    return Row(
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    GestureDetector(
      onTap: ()=>print("facebook"),
      child: Container(
        height: 100.0,
        width: 100.0,
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                  color: Colors.black26, offset: Offset(0, 2), blurRadius: 6.0)
            ],
            image: DecorationImage(image: AssetImage('assets/facebook.jpg'))
            ),
      ),
    ),
    GestureDetector(
      onTap: ()=>print("google"),
      child: Container(
        height: 100.0,
        width: 100.0,
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                  color: Colors.black26, offset: Offset(0, 2), blurRadius: 6.0)
            ],
            image: DecorationImage(image: AssetImage('assets/google.jpg'))),
      ),
    )
  ],
);
  }

Answer 1

Change your main widget to stateful and then set the values accordingly like this below.

import 'package:flutter/material.dart';


class EmptyPage extends StatefulWidget{
  @override
  _EmptyPageState createState() => _EmptyPageState();
}

class _EmptyPageState extends State<EmptyPage> {

  Color facebookColor = Colors.white;
  Color googleColor = Colors.white;


  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          GestureDetector(
            onTap: (){
              setState(() {
                this.facebookColor = Colors.blue;
                this.googleColor = Colors.white;
              });
            },
            child: Container(
              height: 100.0,
              width: 100.0,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: facebookColor,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black26, offset: Offset(0, 2), blurRadius: 6.0)
                  ],
                  image: DecorationImage(image: AssetImage('assets/facebook.jpg'))
              ),
            ),
          ),
          GestureDetector(
            onTap: (){
              setState(() {
                this.facebookColor = Colors.white;
                this.googleColor = Colors.blue;
              });
            },
            child: Container(
              height: 100.0,
              width: 100.0,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: googleColor,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black26, offset: Offset(0, 2), blurRadius: 6.0)
                  ],
                  image: DecorationImage(image: AssetImage('assets/google.jpg'))),
            ),
          )
        ],
      )
    );
  }

}

Answer 2

You can maintain using few variables as shown in below code.

i doesn’t understand quite well exactly how you want to show text but i did as i understand. i hope following example help you.

 bool isfbclicked = false;
  bool isgoogleclicked = false;

  click(bool isfacebook) {
    setState(() {
      if (isfacebook) {
        isfbclicked = true;
        isgoogleclicked = false;
      } else {
        isfbclicked = false;
        isgoogleclicked = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("title"),
      ),
      body: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            GestureDetector(
              onTap: () {
                print("facebook");
                click(true);
              },
              child: Column(
                children: <Widget>[
                  Container(
                    height: 100.0,
                    width: 100.0,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: isfbclicked ? Colors.blue : Colors.white,
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black26,
                              offset: Offset(0, 2),
                              blurRadius: 6.0)
                        ],
                        image: DecorationImage(
                            image: AssetImage('assets/images/crown.png'))),
                  ),
                  Text("facebook")
                ],
              ),
            ),
            GestureDetector(
              onTap: () {
                print("google");
                click(false);
              },
              child: Column(
                children: <Widget>[
                  Container(
                    height: 100.0,
                    width: 100.0,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: isgoogleclicked ? Colors.amber : Colors.white,
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black26,
                              offset: Offset(0, 2),
                              blurRadius: 6.0)
                        ],
                        image: DecorationImage(
                            image: AssetImage('assets/images/crown.png'))),
                  ),
                  Text("google")
                ],
              ),
            )
          ],
        ),
      ),
    );
  }