I want to make a textfield that appears after clicking a button

Question

ElevatedButton(
                style: ElevatedButton.styleFrom (
                    backgroundColor: Color.fromARGB(255, 194, 14, 2)),
                onPressed: () => const Padding (
                      padding:
                          EdgeInsets.symmetric(horizontal: 8, vertical: 16),
                      child: TextField (
                        decoration: InputDecoration (
                          border: OutlineInputBorder (),
                          hintText: 'Entrer le code ',
                        ),
                      ),

                    ),
                child: const Row (
                  children: [
                    Icon (Icons.edit_document),
                    Text ("Entrer le Code du document"),
                  ],
                )),

I tried to insert Textfield on Onpressed action of Elevated Button but is not okay can you help me please?

Answer 1

1st you need to create a bool variable and set it to false

Example : isTextFieldShown = false;

2nd you need to take a look at the Visibility Widget and set it's property to the bool var that you initiated to false

Example :

Visibility(
  visible: isTextFieldShown,
  child: yourTextFieldWidget // here you wrap your textfield widget with the visibility widget like I did
),

and finally you need to set the action for your button like this

onPressed: () {
  setState(() {
          isTextFieldShown = !isTextFieldShown;
                      });