How to add more more widgets on screen in flutter, after user action

Issue

I want the text fields of this form to appear on the screen one by one, as the user submits the data.
For e.g., as is shown in the image below.

Solution

Update using list

  List<TextEditingController> controllers = [TextEditingController()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ...List.generate(
            controllers.length,
            (index) => TextField(
              autofocus: true,
              controller: controllers[index],
              onSubmitted: (v) {
                controllers.add(TextEditingController());
                setState(() {});
              },
            ),
          ),
        ],
      ),
    );
  }

You can create a bool on state and use it to control visibility of email TextFiled

 bool showEmailField = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          TextField(
            onSubmitted: (value) {
              print("call Next one");
              setState(() {
                showEmailField = true;
              });
            },
          ),
          if (showEmailField) TextField(),
        ],
      ),
    );
  }

For animation, you can use ScaleTransition. For more widgets, you can create list and use conditional state to generate widgets under build method.

Answered By – Yeasin Sheikh

Answer Checked By – Clifford M. (FlutterFixes Volunteer)