Флаттер, добавляющий текст в детектор жестов

Question

вывод

1. Я пытаюсь добавить текст под каждой кнопкой. «Facebook» под кнопкой «Facebook», «Google» под кнопкой «Google».

2. заливка цвета фона при нажатии Нажмите

3. при нажатии обеих кнопок один должен оставаться белым фоном, где другой имеет фоновый цвет.

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

Измените ваш основной виджет на Stateful, а затем установите соответствующие значения, как показано ниже.

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

Вы можете использовать несколько переменных, как показано в приведенном ниже коде.

Я не совсем хорошо понимаю, как именно вы хотите показать текст, но я сделал, как я понимаю. Я надеюсь, что следующий пример поможет вам.

 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")
                ],
              ),
            )
          ],
        ),
      ),
    );
  }