Home > Enterprise >  Flutter : How to create textfield next to each other with an add button
Flutter : How to create textfield next to each other with an add button

Time:07-31

I am new coding in flutter and I am trying to create two textfields next to each other and a button where the user be able to add more textfields and write. I will attach a picture to give an idea.

thank you very much

enter image description here

CodePudding user response:

You can create an index or a List of textfields and populate that list like this

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int totalTextField = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Column(
        children: List.generate(
            totalTextField,
            (index) => Row(children: [
                  SizedBox(width: 50, child: TextField()),
                  SizedBox(width: 20),
                  SizedBox(width: 50, child: TextField()),
                  if(index == totalTextField-1)MaterialButton(
                      color: Colors.grey,
                      child: Icon(Icons.add),
                      onPressed: () {
                        setState(() {
                          totalTextField  ;
                        });
                      })
                ])),
      ),
    ));
  }
}

preview

  • Related