CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-web
Antika
Antika

Reputation: 115

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

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.

enter image description here

Upvotes: 0

Views: 1059

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63594

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.

Upvotes: 1

Related Questions