Add new Text Field dynamically on Submit event

user_18048810 0
Viewed 297

this is Antika. I have started learning to code since a few days back, and am only familiar with HTML/CSS/JS, and basics of dart/flutter

Developer Level: Beginner
Project type & language: I'm developing a Simple Notepad App, using flutter.

In my Project, I want to dynamically add new TextField widgets on the screen,
once the user hits enter or clicks the next button ('➡️'), in mobile devices, Just after the TextField in focus, and not to the end of the List.

Outline

User types text >> Clicks Submit
    >> Keeping in mind TextField in focus >> Add another TextField just after this one.
        >> The User feels like entering a new line.

For e.g., as is shown in the image below. enter image description here

flutter-web flutter-layout dart flutter android
1 Answers

You could use a list with initially one TextField widget and onSubmitted adds another TextField to the list.

class MyWidget

 extends StatefulWidget {
  MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<TextField> textFields = [];
  
  @override
  void initState(){
    super.initState();
    textFields.add(_buildTextField());
  }
  @override
  Widget build(BuildContext context) {
    return ListView(
        children: textFields
    );
  }

  TextField _buildTextField(){
    return TextField(
      autofocus: true,
      onSubmitted: (_){
        setState((){
          textFields.add(_buildTextField());
        });
      }
    );
  }
}
user_84246440
Related