Flutter 点击按键改变文本颜色

参考
Container也可以用这种类似的方法

    TextButton(
            onPressed: () {
              setState(() {
                pressed = !pressed;
              });
            },
            child: Container(
              margin: const EdgeInsets.all(8),
              height: 60,
              width: 340,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
              ),
              alignment: Alignment.center,
              child: Text(
                'Suivant',
                style: pressed
                    ? TextStyle(color: Colors.grey)
                    : TextStyle(color: Colors.red),
              ),
            ),
          ),

我自己的代码

import 'dart:ui';
import 'package:flutter/material.dart';

//地区选择弹窗
class PersonalAreaSelectDialog extends Dialog {
  PersonalAreaSelectDialog(this.canceledOnTouchOutside) : super();

  //取屏幕最大宽度和高度
  final width = window.physicalSize.width;
  final height = window.physicalSize.height;

  //点击背景是否能够退出
  final bool canceledOnTouchOutside;

  bool pressed = false;

  //弹窗也是一个Widget,弹框就是打开一个新的路由,且颜色变成透明色
  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(
      builder: (BuildContext context, void Function(void Function()) setState) {
        return Center(
          child: Material(
              //背景透明
              color: Colors.transparent,
              //保证控件居中效果
              child: Stack(
                children: <Widget>[
                  GestureDetector(
                    //点击事件
                    onTap: () {
                      if (canceledOnTouchOutside) {
                        Navigator.pop(context);
                      }
                    },
                  ),
                  _dialog(context, setState)
                ],
              )),
        );
      },
    );
  }

  Widget _dialog(context, setState) {
    return Center(
      ///弹框大小
      child: Container(
        width: width,
        height: height,
        margin: EdgeInsets.only(top: 200),
        child: Container(
          ///弹框背景和圆角
          decoration: const ShapeDecoration(
            color: Color(0xFF333333),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(8.0),
              ),
            ),
          ),
          child: ListView(
            // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            // crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Row(
                children: [
                  Expanded(
                      child: Container(
                    margin: EdgeInsets.only(left: 15, bottom: 21),
                    child: Text(
                      "台灣",
                      style: TextStyle(color: Color(0xFFDDDDDD), fontSize: 19),
                    ),
                  )),
                  Container(
                    margin: EdgeInsets.only(right: 15, bottom: 21),
                    child: Text(
                      "確定",
                      style: TextStyle(color: Color(0xFFDDDDDD), fontSize: 19),
                    ),
                  )
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Stack(
                    alignment: Alignment.centerLeft,
                    children: [
                      GestureDetector(
                        onTap: () {
                          // Navigator.pop(context, "台北市");
                          setState(() {
                            pressed = !pressed;
                          });
                        },
                        child: Container(
                          padding: EdgeInsets.only(
                              top: 11, bottom: 11, left: 27, right: 27),
                          decoration: pressed
                              ? BoxDecoration(
                                  color: Color(0xFF444444),
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(50),
                                  ))
                              : BoxDecoration(),
                          child: Text(
                            "台北市",
                            style: pressed
                                ? TextStyle(
                                    color: Color(0xFFE6CFA1), fontSize: 14)
                                : TextStyle(
                                    color: Color(0xFFDDDDDD), fontSize: 14),
                          ),
                        ),
                      ),
                      Container(
                        height: 20,
                        width: 14,
                        margin: EdgeInsets.only(left: 6),
                        decoration: pressed
                            ? BoxDecoration(
                                image: DecorationImage(
                                  image: AssetImage(
                                      "assets/base_widgets/icon_personal_file_coordinate.png"),
                                  fit: BoxFit.fitWidth,
                                ),
                              )
                            : BoxDecoration(),
                      ),
                    ],
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "新北市");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 27, right: 27),
                      child: Text(
                        "新北市",
                        style:
                            TextStyle(color: Color(0xFFDDDDDD), fontSize: 14),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "基隆市");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 27, right: 27),
                      child: Text(
                        "基隆市",
                        style:
                            TextStyle(color: Color(0xFFDDDDDD), fontSize: 14),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "依蘭縣");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 27, right: 27),
                      child: Text(
                        "依蘭縣",
                        style:
                            TextStyle(color: Color(0xFFDDDDDD), fontSize: 14),
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "中國大陸");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 15, right: 15),
                      decoration: BoxDecoration(
                          color: Color(0xFFFFF9E9),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      child: Text(
                        "中國大陸",
                        style:
                            TextStyle(color: Color(0xFFA7976B), fontSize: 14),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "新加坡");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 17, right: 17),
                      decoration: BoxDecoration(
                          color: Color(0xFFFFF9E9),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      child: Text(
                        "新加坡",
                        style:
                            TextStyle(color: Color(0xFFA7976B), fontSize: 14),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "馬來西亞");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 15, right: 15),
                      decoration: BoxDecoration(
                          color: Color(0xFFFFF9E9),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      child: Text(
                        "馬來西亞",
                        style:
                            TextStyle(color: Color(0xFFA7976B), fontSize: 14),
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "日本");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 27, right: 27),
                      decoration: BoxDecoration(
                          color: Color(0xFFFFF9E9),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      child: Text(
                        "日本",
                        style:
                            TextStyle(color: Color(0xFFA7976B), fontSize: 14),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "韓國");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 27, right: 27),
                      decoration: BoxDecoration(
                          color: Color(0xFFFFF9E9),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      child: Text(
                        "韓國",
                        style:
                            TextStyle(color: Color(0xFFA7976B), fontSize: 14),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "菲律賓");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 20, right: 20),
                      decoration: BoxDecoration(
                          color: Color(0xFFFFF9E9),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      child: Text(
                        "菲律賓",
                        style:
                            TextStyle(color: Color(0xFFA7976B), fontSize: 14),
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "泰國");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 27, right: 27),
                      decoration: BoxDecoration(
                          color: Color(0xFFFFF9E9),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      child: Text(
                        "泰國",
                        style:
                            TextStyle(color: Color(0xFFA7976B), fontSize: 14),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context, "柬埔寨");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 20, right: 20),
                      decoration: BoxDecoration(
                          color: Color(0xFFFFF9E9),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      child: Text(
                        "柬埔寨",
                        style:
                            TextStyle(color: Color(0xFFA7976B), fontSize: 14),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      // Navigator.pop(context,"其他");
                    },
                    child: Container(
                      padding: EdgeInsets.only(
                          top: 11, bottom: 11, left: 27, right: 27),
                      decoration: BoxDecoration(
                          color: Color(0xFFFFF9E9),
                          borderRadius: BorderRadius.all(
                            Radius.circular(50),
                          )),
                      child: Text(
                        "其他",
                        style:
                            TextStyle(color: Color(0xFFA7976B), fontSize: 14),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值