如何将数据放入可单击的列表磁贴中，单击磁贴时显示相关数据[关闭]

Question

我正在尝试创建驱动程序 UID 的可点击列表图块。在列表图块上，将显示驱动程序 UID。点击磁贴后，屏幕上将显示有关该特定驱动程序的相关信息，例如姓名和电话。

这是我所能达到的。

This is what my RTDB looks like

import "package:flutter/material.dart";
import 'package:google_fonts/google_fonts.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_database/firebase_database.dart';

class DriverListScreen extends StatefulWidget {
  const DriverListScreen({key}) : super(key: key);
  static const String idScreen = "DriverListScreen";

  @override
  _DriverListScreenState createState() => _DriverListScreenState();
}

class _DriverListScreenState extends State<DriverListScreen> {
  final databaseReference = FirebaseDatabase.instance.reference();
  FirebaseAuth auth = FirebaseAuth.instance;

  List driverList = [];
  var num = 0;

  getDriverDetails() async {
    // Get the driver UİD, show it on a clickable list.
    // When list is clicked, show the relevant info
    databaseReference.child("users").child("driver").onValue.listen(
      (event) {
        setState(() {
          var value = event.snapshot.value;
          var driverSKIDS = value.keys;
          for (var driverSKID in driverSKIDS) {
            driverList.add(driverSKID);
            print(driverList[num]);
            num += 1;
          }
        });
      },
    );
    return driverList;
  }

  @override
  void initState() {
    super.initState();
    print("Entering Scafold");
    getDriverDetails();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        title: Text(
          "Driver List",
          style: GoogleFonts.lexendMega(
            color: Colors.black,
          ),
        ),
      ),
      body: Container(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Flexible(
                child: ListView.builder(
                  itemCount: driverList.length,
                  itemBuilder: (context, int index) {
                    return Card(
                      child: ListTile(
                        tileColor: Colors.blue,
                        selectedTileColor: Colors.red,
                        title: Text(driverList[index]),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以使用ExpansionTile 来处理这个问题。

查看下面的代码。 我添加了一个Driver 类来保存驱动程序数据，并删除了未使用的代码。

class DriverListScreen extends StatefulWidget {
  const DriverListScreen({key}) : super(key: key);
  static const String idScreen = "DriverListScreen";

  @override
  _DriverListScreenState createState() => _DriverListScreenState();
}

class _DriverListScreenState extends State<DriverListScreen> {
  final databaseReference = FirebaseDatabase.instance.reference();
  FirebaseAuth auth = FirebaseAuth.instance;

  List<Driver> driverList = [];

  Future<List<Driver>> getDriverDetails() async {
    // Get the driver UİD, show it on a clickable list.
    // When list is clicked, show the relevant info
    databaseReference.child("users").child("driver").onValue.listen(
      (event) {
        setState(() {
          var value = event.snapshot.value;
          driverList = Map.from(value)
              .values
              .map((e) => Driver.fromJson(Map.from(e)))
              .toList();
        });
      },
    );
    return driverList;
  }

  @override
  void initState() {
    super.initState();
    print("Entering Scafold");
    getDriverDetails();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        title: Text(
          "Driver List",
          style: GoogleFonts.lexendMega(
            color: Colors.black,
          ),
        ),
      ),
      body: driverList.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: driverList.length,
              itemBuilder: (context, int index) {
                final Driver driver = driverList[index];
                final String driverEmail = driver.email;
                final String driverName = driver.name;
                final String driverPhone = driver.phone;
                final String driverRandomId = driver.randomId;
                final String driverUID = driver.uid;

                return Card(
                    child: ExpansionTile(
                  title: Text(driverUID),
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(driverName),
                        Text(driverEmail),
                        Text(driverPhone),
                        Text(driverRandomId),
                      ],
                    )
                  ],
                ));
              },
            ),
    );
  }
}

class Driver {
  final String email;
  final String name;
  final String phone;
  final String randomId;
  final String uid;

  Driver({
    required this.email,
    required this.name,
    required this.phone,
    required this.randomId,
    required this.uid,
  });

  static Driver fromJson(Map<String, dynamic> json) {
    return Driver(
      email: json['email'],
      name: json['name'],
      phone: json['phone'],
      randomId: json['random id'],
      uid: json['user uid'],
    );
  }
}