Add & Remove TextFormFields dynamically

Hi All,

So i found this piece of code on github (source: Add & Remove TextFormFields dynamically in Flutter · GitHub)

Which allows me to add form fields dynamically which is exactly what i want to do. I just need to make one adjustment and i do not understand how.

The form shows a field with a + sign, see picture
image

When pressing the + sign another row gets created with a minus sign -. I would like to keep the first row with the plus + sign on the top of the screen and move everything one down when the + gets hit. Any1 has any idea how i can accomplish this. Now the initial row with the + sign is at the bottom

See code snippet

import ‘package:flutter/material.dart’;

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Dynamic TextFormFields’,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyForm(),
debugShowCheckedModeBanner: false,
);
}
}

class MyForm extends StatefulWidget {
@override
_MyFormState createState() => _MyFormState();
}

class _MyFormState extends State {
final _formKey = GlobalKey();
TextEditingController _nameController;
static List friendsList = [null];

@override
void initState() {
super.initState();
_nameController = TextEditingController();
}

@override
void dispose() {
_nameController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(title: Text(‘Dynamic TextFormFields’),),
body: Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// name textfield
Padding(
padding: const EdgeInsets.only(right: 32.0),
child: TextFormField(
controller: _nameController,
decoration: InputDecoration(
hintText: ‘Enter your name’
),
validator: (v){
if(v.trim().isEmpty) return ‘Please enter something’;
return null;
},
),
),
SizedBox(height: 20,),
Text(‘Add Friends’, style: TextStyle(fontWeight: FontWeight.w700, fontSize: 16),),
…_getFriends(),
SizedBox(height: 40,),
FlatButton(
onPressed: (){
if(_formKey.currentState.validate()){
_formKey.currentState.save();
}
},
child: Text(‘Submit’),
color: Colors.green,
),

        ],
      ),
    ),
  ),
  
);

}

/// get firends text-fields
List _getFriends(){
List friendsTextFields = [];
for(int i=0; i<friendsList.length; i++){
friendsTextFields.add(
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: Row(
children: [
Expanded(child: FriendTextFields(i)),
SizedBox(width: 16,),
// we need add button at last friends row
_addRemoveButton(i == friendsList.length-1, i),
],
),
)
);
}
return friendsTextFields;
}

/// add / remove button
Widget _addRemoveButton(bool add, int index){
return InkWell(
onTap: (){
if(add){
// add new text-fields at the top of all friends textfields
friendsList.insert(0, null);
}
else friendsList.removeAt(index);
setState((){});
},
child: Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: (add) ? Colors.green : Colors.red,
borderRadius: BorderRadius.circular(20),
),
child: Icon((add) ? Icons.add : Icons.remove, color: Colors.white,),
),
);
}

}

class FriendTextFields extends StatefulWidget {
final int index;
FriendTextFields(this.index);
@override
_FriendTextFieldsState createState() => _FriendTextFieldsState();
}

class _FriendTextFieldsState extends State {
TextEditingController _nameController;

@override
void initState() {
super.initState();
_nameController = TextEditingController();
}

@override
void dispose() {
_nameController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
  _nameController.text = _MyFormState.friendsList[widget.index] ?? '';
});

return TextFormField(
  controller: _nameController,
  onChanged: (v) => _MyFormState.friendsList[widget.index] = v,
  decoration: InputDecoration(
    hintText: 'Enter your friend\'s name'
  ),
  validator: (v){
    if(v.trim().isEmpty) return 'Please enter something';
    return null;
  },
);

}
}