How to fix this UI problem in my Flutter app? - flutter

Question

Hello guys this is my first flutter app. I have to do a screen like an image below:
This is what I've got:
My problem is I couldn't display the add button over the circular container and if I change the text in a chip the other chips text changes too.
Like this:
This is my code:
Widget ExpertiseRow() {
void _addNewExpertiseRow() {
setState(() {
count = count + 1;
});
}
return new Container(
width: 170.0,
padding: new EdgeInsets.all(5.0),
child: new Column(children: <Widget>[
Chip(
onDeleted: () {
setState(() {
count = count - 1;
chips.removeAt(count + 1);
print(chips.toList());
});
},
deleteIcon: Icon(
Icons.close,
color: Colors.white,
size: 20,
),
backgroundColor: Colors.black,
avatar: Container(
width: 450,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20))),
child: IconButton(
//iconSize: 40,
icon: Icon(
Icons.add,
color: Colors.black,
size: 30,
),
onPressed: _addNewExpertiseRow)),
label: EditableText(
controller: controller,
onSubmitted: (text) {
chips.add(text);
print(chips.toList());
setState(() {
chips = chips;
});
},
focusNode: FocusNode(),
backgroundCursorColor: Colors.white,
cursorColor: Colors.white,
style: TextStyle(color: Colors.white),
),
),
new Container(
//padding: new EdgeInsets.all(10.0),
child: InkWell(
onTap: _addNewContactRow,
child: Image.asset(
'assets/images/add.png',
height: 50,
width: 50,
fit: BoxFit.cover,
)), /*IconButton(
alignment: Alignment.topCenter,
icon: Icon(
Icons.add,
color: Colors.black,
size: 30,
),
onPressed: _addNewContactRow))*/
)
]));
}
#override
Widget build(BuildContext context) {
var height =
MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top;
var space = height > 650 ? kSpaceM : kSpaceS;
List<Widget> _expertises =
new List.generate(count, (int i) => ExpertiseRow());
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.white,
appBar: new AppBar(
title: new Center(
child: new Text(
"Compte Entrepreneur",
style: TextStyle(
fontSize: 25.0,
color: Colors.black,
),
)),
elevation: 0.0,
backgroundColor: Colors.white,
),
body: Form(
key: _formKey,
child: new LayoutBuilder(builder: (context, constraint) {
return new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 40,
),
new Text(
"Nom et prénom",
style: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
FadeSlideTransition(
animation: _formElementAnimation,
additionalOffset: space,
child: CustomInputField(
label: 'Votre nom',
prefixIcon: Icons.person,
obscureText: false,
textController: _fullnameController,
validator: ValidatorService.fullNameValidate,
onChanged: (text) {
name = text;
print(name);
},
)),
new Container(
padding: new EdgeInsets.all(30.0),
),
new Text(
"Position",
style: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
FadeSlideTransition(
animation: _formElementAnimation,
additionalOffset: space,
child: CustomInputField(
label: 'Position',
prefixIcon: Icons.work,
obscureText: false,
textController: _positionController,
validator: ValidatorService.positionValidate,
onChanged: (text) {
position = text;
print(position);
},
)),
new Container(
padding: new EdgeInsets.all(30.0),
),
new Text(
"Expertises",
style: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
//the chips input
FadeSlideTransition(
animation: _formElementAnimation,
additionalOffset: space,
child: new Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.elliptical(20, 20)),
border: Border.all(
width: 3,
),
),
height: 130.0,
width: 370.0,
child: new ListView(
children: _expertises,
scrollDirection: Axis.horizontal,
),
)),
new Container(
padding: new EdgeInsets.all(55.0),
),
new Container(
width: 350,
//color: Colors.blue,
//padding: new EdgeInsets.all(10.0),
child: Row(children: <Widget>[
Container(
width: 270,
),
new Container(
width: 60,
color: Colors.black,
child: IconButton(
icon: Icon(
Icons.arrow_forward,
color: Colors.white,
size: 30,
),
onPressed: () {
if (_formKey.currentState.validate()) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => InterestsPage(),
),
);
}
}))
])),
],
),
);
})));
}
}
I also want to add the chips text to a list.
Looking forward to your help. Thanks in advance