How to show the data of the list outside of the area of ListView Builder in Flutter?

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,
  });
}

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

To send the list of users to another page, just do :

Navigator.push(
  context,
  MaterialPageRoute(
    settings: const RouteSettings(name: "no-route"),
    builder: (context) => OtherPage(userList: userList),
  ),
);


class OtherPage extends StatelessWidget {
  final List<User> userList;

  const OtherPage({
    required this.userList,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: userList
                    .map(
                        (user) => Text("Name: ${user.name}, Age: ${user.age} "))
                    .toList(),
              ),
    );
  }
}

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.