flutter : how to change a widget to another widget after click a button inside that widget

Question

i have this button inside a container like below : enter image description here

and i want to make that container change to a textfeild in the same container after clicking to that button like below :

enter image description here

so please ! any ideas to help ! and thanks

Container(
                height: 96,
                width: MediaQuery.of(context).size.width - 24,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    color: colorPrimary,
                    border:
                        Border.all(width: 0.5, color: Colors.redAccent)),
                child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: <Widget>[
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            InkWell(
                              onTap: () {
                                setState(() {});
                              },
                              child: Container(
                                  height: 62,
                                  width: 62,
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius:
                                          BorderRadius.circular(60),
                                      border: Border.all(
                                        width: 0.5,
                                        color: Colors.grey[300],
                                      )),
                                  child: Icon(
                                    Icons.phone,
                                    size: 30,
                                    color: Colors.purple[100],
                                  )),
                            ),
                            Text(
                              'Composer numéro',
                              style: TextStyle(fontSize: 12),
                            )
                          ],
                        ),
                      ],
                    )),
              ),

Solution

You can use a use a bool to decide which widget to currently show. Set the bool to true or false using setState depending on which widget you want to show.

  bool showTextField = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          alignment: Alignment.center,
          height: 96,
          width: MediaQuery.of(context).size.width - 24,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              color: Colors.white,
              border: Border.all(width: 0.5, color: Colors.redAccent)),
          child: showTextField ? phoneTextInput() : button(),
        ),
      ),
    );
  }

  Widget phoneTextInput() {
    return TextField(
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        hintText: "Numero",
        border: InputBorder.none,
      ),
    );
  }

  Widget button() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(children: <Widget>[
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                InkWell(
                  onTap: () {
                    setState(() {
                      showTextField = true;
                    });
                  },
                  child: Container(
                      height: 62,
                      width: 62,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(60),
                          border: Border.all(
                            width: 0.5,
                            color: Colors.grey[300],
                          )),
                      child: Icon(
                        Icons.phone,
                        size: 30,
                        color: Colors.purple[100],
                      )),
                ),
                Text(
                  'Composer numéro',
                  style: TextStyle(fontSize: 12),
                )
              ],
            ),
          ],
        )
      ]),
    );
  }

Result:

Comments

[SCcode]

Please mark this post as the answer if it solved your problem.

[Aia's Blog]

hi @Sccode, i just want to say that using the code above shows this error on the latest build of flutter : Null check operator used on a null value, can you help me out? i useed the same formula on the top. boolean ? widget1 : widget2