How to create contact list using Flutter? - flutter

Question

I was create an dynamic contact list.
When I enter the number in add contact textfield. Automatically another text field will open. When I erase the text field the below the empty will delete automatically.
I tried several ways but id didn't work.
In my code I used text field on changed method when I enter the number it open the new contact field every number I added, I want only one contact field.
import 'package:flutter/material.dart';
class Contactadd extends StatefulWidget {
const Contactadd({Key? key}) : super(key: key);
#override
_ContactaddState createState() => _ContactaddState();
}
class _ContactaddState extends State<Contactadd> {
String dropdownValue = "Mobile";
List<Widget> cardList = [];
Widget card1() {
return Container(
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: const Color(0xFFE8DBDB),
borderRadius: BorderRadius.circular(20)),
child: Row(
children: [
const SizedBox(
width: 10,
),
dropdown(),
Container(
height: 40,
width: 200,
margin: const EdgeInsets.all(5),
child: TextField(
keyboardType: TextInputType.number,
// controller: dropdownController,
decoration: const InputDecoration(
contentPadding: EdgeInsets.only(left: 10),
border: InputBorder.none),
onChanged: (_) {
String dataa = _.toString();
if (dataa.length == 1) {
print(_ + "=================");
cardList.add(_card());
setState(() {});
} else if (dataa.length < 1) {
cardList.removeLast();
}
},
// addCardWidget,
),
),
],
),
);
}
Widget _card() {
return Container(
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: const Color(0xFFDE6868),
borderRadius: BorderRadius.circular(20)),
child: Row(
children: [
const SizedBox(
width: 10,
),
dropdown(),
Container(
height: 40,
width: 200,
margin: const EdgeInsets.all(5),
child: TextFormField(
keyboardType: TextInputType.number,
decoration: const InputDecoration(
contentPadding: EdgeInsets.only(left: 10),
border: InputBorder.none),
onChanged: (_) {
String dataa = _.toString();
if (dataa.isEmpty) {
print("true");
} else {
print("false");
}
if (dataa.length == 1 || dataa.length == 0) {
print(_ + "=================");
cardList.add(_card());
setState(() {});
} else {
cardList.removeLast();
}
})),
],
),
);
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Contact List"),
),
body: SingleChildScrollView(
child: Column(
children: [
card1(),
Container(
height: 430,
width: MediaQuery.of(context).size.width,
child: ListView.builder(
itemCount: cardList.length,
itemBuilder: (context, index) {
return _card();
}),
),
],
),
),
),
);
}
}

Answer 1

The complete code this will help you to create view like your requirment
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Contactadd(),
);
}
}
class Contactadd extends StatefulWidget {
#override
_ContactaddState createState() => _ContactaddState();
}
class _ContactaddState extends State<Contactadd> {
Map<int, dynamic> contactMap = new Map();
#override
void initState() {
contactMap.addAll(
{0: 1},
);
super.initState();
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Contact List"),
),
body: Column(
children: [
for (var i = 0; i < contactMap.length; i++) ...[
Container(
margin: EdgeInsets.all(10),
child: TextField(
onChanged: (value) {
if (value.toString().isEmpty) {
contactMap.removeWhere((key, value) => key == i + 1);
} else {
contactMap.addAll(
{i + 1: 1},
);
}
setState(() {});
},
keyboardType: TextInputType.number,
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
filled: true,
contentPadding: EdgeInsets.only(bottom: 0.0, left: 8.0),
fillColor: Colors.white70,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
borderSide:
BorderSide(color: Colors.lightBlueAccent, width: 1),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
borderSide: BorderSide(color: Colors.lightBlueAccent),
),
),
),
),
],
],
),
),
);
}
}