skip to Main Content

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


  1. If you want to display the number of rows of your list, replace

    Container( child: Text("Display the data here, How?") )
    

    with

    Text("Number of rows: ${userList.length}")
    

    If you want to add something to the end of the list, you can do something like this:

    ListView(
          shrinkWrap: true,
          physics: const AlwaysScrollableScrollPhysics(),
          children: <Widget>[
            ListView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    // everything else from your ListView.builder
            ),
            Text("Something different, inside scrollable list")
    

    If that is not what you want, please edit the question and make clear what is intended results.

    Login or Signup to reply.
  2. So… if it’s the same list, just add this :

    Instead :

       Container( child: Text("Display the data here, How?") )
    

    Do :

              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: userList
                      .map((user) => Text("Name: ${user.name}, Age: ${user.age} "))
                      .toList(),
                ),
              ),
    

    I added a SingleChildScrollView with horizontal scroll to avoid problems

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search