Is it technically impossible to show the data outside of the list? I searched through the internet but I couldn’t get any answers at all smh -_-
I wanted to display the value of data rows of the list besides of the section ListViewBuilder
.
Output:
[ ListView Builder Screen ]
Name: You, Age: 20 Name: Him, Age: 20
An Output photo there.
enter image description here
String name = userList[index].name;
int? age = userList[index].age;
class _Passenger extends State<Passenger> {
TextEditingController nameController = TextEditingController();
TextEditingController ageController = TextEditingController();
int currentIndex = 0;
final form = GlobalKey<FormState>();
bool update = false;
final User user = User(name: "", age: int.tryParse(''));
List<User> userList = [
User(name: "You", age: 20),
User(name: "Him", age: 20),
];
String text = '';
int? number = int.tryParse('');
@override
Widget build(BuildContext context) {
return MaterialApp( debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(children: <Widget>[
Column(
children: <Widget>[
Container(
height: 550,
decoration: BoxDecoration(border: Border.all(color: Colors.black)),
child: ListView.builder(
itemCount: userList.length,
itemBuilder: (context, index) {
String name = userList[index].name;
int? age = userList[index].age;
return SizedBox(
width: 20,
child: Card(
color: Colors.grey,
child: Padding(
padding: const EdgeInsets.all(2.0),
child: ListTile(
title: Text( "Name: $name Age: $age"),
))),
);
}),
),
],
),
Container( child: Text("Display the data here, How?") ),
//Add Button
Container(
width: 150,
height: 50,
margin: const EdgeInsets.all(10),
child: ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => SimpleDialog(children: [
TextField(
decoration: const InputDecoration(labelText: 'Name'),
onChanged: (value) {
setState(() {
text = value;
});
},
),
TextField(
keyboardType: TextInputType.number,
decoration: const InputDecoration(labelText: 'Age'),
onChanged: (value) {
setState(() {
number = int.parse(value);
});
},
),
ElevatedButton(
onPressed: () {
setState(() {
userList.add(User(name: text, age: number));
});
},
child: const Text('Add'))
]));
},
child: const Text("Add"),
)),
])));
}
}
class User {
String name;
int? age;
User({
required this.name,
this.age,
});
}
2
Answers
If you want to display the number of rows of your list, replace
with
If you want to add something to the end of the list, you can do something like this:
If that is not what you want, please edit the question and make clear what is intended results.
So… if it’s the same list, just add this :
Instead :
Do :
I added a
SingleChildScrollView
with horizontal scroll to avoid problems