简体   繁体   English

在对话框中单击 flutter 时如何更改容器背景颜色?

[英]In dialog box how to change container background color when click on it in flutter?

My goal is to achieve the dialog like the below image.我的目标是实现如下图所示的对话框。 I want that when I press the cancel or confirm button in the dialog, the background color of the cancel and confirm buttons should change.我希望当我按下对话框中的取消或确认按钮时,取消和确认按钮的背景颜色应该改变。

在此处输入图像描述

I have designed this dialog the same as but only I am not able to change the cancel or confirm container background color when I click on it.我设计了这个对话框,但只有当我单击它时,我无法更改取消或确认容器背景颜色。 my designed dialog is below here.我设计的对话框在下面。

对话

Please help me, anyone, how can I achieve this.请帮助我,任何人,我怎样才能做到这一点。

 class MyHomePage1 extends StatefulWidget {
  @override
  State createState() {
    return MyHomePage1State();
  }
}

class MyHomePage1State extends State<MyHomePage1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: (){
            showDialog(
                context: context,
                builder: (BuildContext context) {
                  return Dialog(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0)), //this right here
                    child: Container(
                      height: 200,
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              padding: EdgeInsets.only(left: 20,right: 20),
                              child: Center(
                                child: Text(
                                  Strings.confirmation,
                                  style: TextStyle(
                                    color: AppColors.orange.withOpacity(.65),
                                    //fontSize: DeviceSize.width(context) / 26,
                                    fontSize: 24,
                                    fontFamily: "Poppins",
                                    fontWeight: FontWeight.w600,
                                  ),
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 20,right: 20),
                              child: Center(
                                child: Text(
                                  Strings.youAreAboutTO,
                                  style: TextStyle(
                                      color: AppColors.grey30,
                                      //fontSize: DeviceSize.width(context) / 26,
                                      fontSize: 12,
                                      fontFamily: "Gilroy-Bold"),
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 20,right: 20),
                              child: Center(
                                child: Text(
                                  Strings.add1Stamp,
                                  style: TextStyle(
                                      color: AppColors.grey50,
                                      //fontSize: DeviceSize.width(context) / 26,
                                      fontSize: 12,
                                      fontFamily: "Poppins"),
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            ),

                            Container(
                              padding: EdgeInsets.only(left: 20,right: 20),
                              child: Center(
                                child: Text(
                                  Strings.redeem1FreeSet,
                                  style: TextStyle(
                                      color: AppColors.grey50,
                                      //fontSize: DeviceSize.width(context) / 26,
                                      fontSize: 12,
                                      fontFamily: "Poppins"),
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            ),

                            Container(
                              padding: EdgeInsets.only(left: 25,right: 25,top: 20),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  GestureDetector(
                                    onTap:(){
                                      setState(() {

                                      });
                                    },
                                    child: Container(
                                      alignment: Alignment.center,
                                      //color: AppColors.blueColorNew,
                                      //margin: EdgeInsets.only(bottom: 20),
                                      width: 100,
                                      height: 32,
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(5),
                                          color: AppColors.white,
                                          border: Border.all(color: AppColors.orange)
                                      ),
                                      child: Padding(
                                        padding: const EdgeInsets.all(5.0),
                                        child: Text(
                                          "Cancel",
                                          style: TextStyle(
                                              fontFamily: "Gilroy-Bold",
                                              color:AppColors.orange),
                                        ),
                                      ),
                                    ),
                                  ),
                                  InkWell(
                                    onTap:(){
                                      setState(() {

                                      });
                                    },
                                    child: Container(
                                      alignment: Alignment.center,
                                      //color: AppColors.blueColorNew,
                                      //margin: EdgeInsets.only(bottom: 20),
                                      width: 100,
                                      height: 32,
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(5),
                                          color: AppColors.white,
                                          border: Border.all(color: AppColors.orange,
                                          )
                                      ),
                                      child: Padding(
                                        padding: const EdgeInsets.all(5.0),
                                        child: Text(
                                          "Confirm",
                                          style: TextStyle(
                                              fontFamily: "Gilroy-Bold",
                                              color:AppColors.orange),
                                        ),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),

                          ],
                        ),
                      ),
                    ),
                  );
                });
          },
          child: Container(
            height: 50,
            width: 100,
            color: Colors.orange,
            child: Center(
              child: Text("Click on",

              style: TextStyle(
                color: Colors.white
              ),),
            ),
          ),
        ),
      )
    );
  }
}

You need to use StatefulBuilder to update on dialog.您需要使用StatefulBuilder更新对话框。

onTap: () {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      bool isCancelBtnTappeed = false;
      bool isConfirmBtnTappeed = false;
      return StatefulBuilder(
        builder: (context, setStateSB) {
          return Dialog(
            shape: RoundedRectangleBorder(
///    ........
GestureDetector(
  onTap: () {
    setStateSB(() {
      isCancelBtnTappeed = true;
    });
  },
  child: Container(
    decoration: BoxDecoration(
        borderRadius:
            BorderRadius.circular(5),
        color: isCancelBtnTappeed
            ? Colors.red
            : Colors.white,

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM