在flutter中根据组名导航到不同的页面

Question

我创建了一个应用程序，其中提取了所有组名。现在，我想要的功能是，如果我单击组名称“技术”，我将被重定向到技术组的 UI 页面。当我点击组名“医疗”时，我将被重定向到医疗组的 UI 页面，并以类似的方式进行。 UI 个页面不同。我使用 firebase 作为后端。我是 flutter 的新手，如果你能帮助我，我将不胜感激。

group_chat_screen.dart的源代码：

import 'package:chat_app/group_chats/create_group/add_members.dart';
import 'package:chat_app/group_chats/group_chat_room.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

class GroupChatHomeScreen extends StatefulWidget {
  const GroupChatHomeScreen({Key? key}) : super(key: key);

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

class _GroupChatHomeScreenState extends State<GroupChatHomeScreen> {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;
  final FirebaseAuth _auth = FirebaseAuth.instance;
  bool isLoading = true;

  List groupList = [];

  @override
  void initState() {
    super.initState();
    getAvailableGroups();
  }

  void getAvailableGroups() async {
    String uid = _auth.currentUser!.uid;

    await _firestore
        .collection('users')
        .doc(uid)
        .collection('groups')
        .get()
        .then((value) {
      setState(() {
        groupList = value.docs;
        isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text("Groups"),
      ),
      body: isLoading
          ? Container(
              height: size.height,
              width: size.width,
              alignment: Alignment.center,
              child: CircularProgressIndicator(),
            )
          : ListView.builder(
              itemCount: groupList.length,
              itemBuilder: (context, index) {
                return ListTile(
                  onTap: () => Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (_) => GroupChatRoom(
                        groupName: groupList[index]['name'],
                        groupChatId: groupList[index]['id'],
                      ),
                    ),
                  ),
                  leading: Icon(Icons.group),
                  title: Text(groupList[index]['name']),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.create),
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(
            builder: (_) => AddMembersInGroup(),
          ),
        ),
        tooltip: "Create Group",
      ),
    );
  }
}

group_chat_room.dart的源代码：

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

class GroupChatRoom extends StatelessWidget {
  final String groupChatId, groupName;

  GroupChatRoom({required this.groupName, required this.groupChatId, Key? key})
      : super(key: key);

  final TextEditingController _message = TextEditingController();
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;
  final FirebaseAuth _auth = FirebaseAuth.instance;

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text(groupName),
        actions: [
          IconButton(
              onPressed: () => Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (_) => GroupInfo(
                        groupName: groupName,
                        groupId: groupChatId,
                      ),
                    ),
                  ),
              icon: Icon(Icons.more_vert)),
        ],
      ),
    );
  }
}

Answer 1

非常简单，只需在 onTap 中检查您的群组名称，然后根据您的群组名称使用 if else 条件并导航到该屏幕：

          ListView.builder(
          itemCount: groupList.length,
          itemBuilder: (context, index) {
            return ListTile(
              onTap: () {
        if(groupList[index]['name']=="Technical"){
   
        Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => TechnicalChatRoom(
                    groupName: groupList[index]['name'],
                    groupChatId: groupList[index]['id'],
                  ),
                ),
                   }
       
         if(groupList[index]['name']=="Arts"){

       MaterialPageRoute(
                  builder: (_) => ArtsChatRoom(
                    groupName: groupList[index]['name'],
                    groupChatId: groupList[index]['id'],
                  ),
                ),
          and so on
           .......
                  ...

             }

              ),}
               ,
              leading: Icon(Icons.group),
              title: Text(groupList[index]['name']),
            );
          },
        ),

在flutter中根据组名导航到不同的页面

Navigate to different pages on the basis of group name in flutter

flutter

materialpageroute