Flutter Firebase : Show details of listTile in container

Question

I'm trying to create list of users with Flutter Web. The list is ready. But I want that when I click on the listTile it should show the details of that particular listTile in a container next to the list, but NOT to navigate to a new page. How do I do that? Can anyone help me? Or do I have to navigate to a new page?

My code:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

class AllUserScreen extends StatefulWidget {
  const AllUserScreen({super.key});

  @override
  State<AllUserScreen> createState() => _AllUserScreenState();
}

class _AllUserScreenState extends State<AllUserScreen> {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
        // extendBodyBehindAppBar: true,
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            'All Users',
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 30, color: Colors.green),
          ),
          backgroundColor: Colors.transparent,
          elevation: 0,
          leading: IconButton(
              onPressed: () {
                Navigator.pop(context);
              },
              icon: const Icon(
                Icons.arrow_back_ios,
                color: Colors.green,
              )),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SizedBox(
              width: screenWidth * 0.4,
              child: StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
                // inside the <> you enter the type of your stream
                stream:
                    FirebaseFirestore.instance.collection('users').snapshots(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return ListView.builder(
                      itemCount: snapshot.data!.docs.length,
                      itemBuilder: (context, index) {
                        return Card(
                          child: ListTile(
                            onTap: () {},
                            title: Text(
                              snapshot.data!.docs[index].get('Full name'),
                            ),
                          ),
                        );
                      },
                    );
                  }
                  if (snapshot.hasError) {
                    return const Text('Error');
                  } else {
                    return const Center(child: CircularProgressIndicator());
                  }
                },
              ),
            ),
            SizedBox(
              width: screenWidth * 0.03,
            ),
            Container(
              width: screenWidth * 0.4,
              color: Colors.grey,
            )
          ],
        ));
  }
}

picture: All users

Answer 1

You have to get user from the list tile to the container. To do that you can store the current visible user of the container in the stateful widget and use setState to update the ui with the tapped user.

class _AllUserScreenState extends State<AllUserScreen> {

Map<String, dynamic>? _selectedUser;

...

ListTile(
  onTap: () {
    setState(() {
      _selectedUser = snapshot.data!.docs[index]
    });
  }
)

...

Container(
  width: screenWidth * 0.4,
  color: Colors.grey,
  child: Text(_selectedUser.get('Full name') ?? ''),
)