我正在尝试用Flutter Web创建用户列表。列表已经准备好了。但是我希望当我点击listTile时,它应该在列表旁边的容器中显示该特定listTile的详细信息,而不是导航到新页面。我该怎么做?有人能帮助我吗?或者我必须导航到新页面吗?
我的代码:
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,
)
],
));
}
}
图片:All users
1条答案
按热度按时间wnavrhmk1#
你必须把用户从列表瓦片中获取到容器中,为此你可以把容器中当前可见的用户存储在有状态小部件中,然后使用
setState
用点击的用户更新用户界面。