How to change button into textfield flutter

Issue

If I have a button such as the + button in the picture, is there a way in flutter to change it to a text field when the user clicks on the button. For instance when the user clicks on the button it fades away, a textbox shows up, and they can type in a number?

I am trying to implement this into my application, but not sure how to do it.

Solution

There are multiple ways to do it. but one way can be tracking if the button is clicked. and adding an animatedSwitcher to switch between the button and the textfield

The code will look something like this

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  bool _isTextFieldShown = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
      duration: Duration(
        milliseconds: 300,
      ),
      child: _isTextFieldShown
          ? TextField()
          : IconButton(
              onPressed: () {
                setState(() {
                  _isTextFieldShown = true;
                });
              },
         icon: Icon(Icons.add)),
    );
  }
}

Hope it helps 🙂

Answered By - Aymen