Flutter 应用程序 - 使用 firebase + 导航栏登录

Question

我正在构建一个 Flutter 应用程序，其中有一个登录表单，该表单与 firebasee 数据库连接。
我想在用户成功登录时实现一个导航栏。
登录后的第一个页面是HomeTab。当我在此处添加 BottomNavBar 小部件时，我的应用程序崩溃了。
你能帮我吗？
我的 GitHub 存储库：
https://github.com/GergoJeles/assignment2_07.11.2023.git

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';
import 'BottomNavBar.dart'; // Import your custom BottomNavBar widget here
import 'NavBar.dart'; // Import your custom NavBar widget here
import 'AboutTab.dart'; // Import your AboutTab widget
import 'MapTab.dart'; // Import your MapTab widget
import 'ProfileTab.dart'; // Import your ProfileTab widget

class HomeTab extends StatelessWidget {
  const HomeTab({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => ProfileScreen(
                    appBar: AppBar(
                      title: const Text('User Profile'),
                    ),
                    actions: [
                      SignedOutAction((context) {
                        Navigator.of(context).pop();
                      })
                    ],
                    children: [
                      const Divider(),
                      Padding(
                        padding: const EdgeInsets.all(2),
                        child: AspectRatio(
                          aspectRatio: 1,
                          child: Image.asset('flutterfire_300x.png'),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('assets/dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
      // Add a custom BottomNavBar widget here
      bottomNavigationBar: BottomNavBar(),
    );
  }
}

当我尝试这个时，应用程序崩溃了

Answer 1

为用户详细信息创建一个屏幕，并在操作中添加

    appBar: AppBar(
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.person),
      onPressed: () {
        // Add your action here
      },
    ),
    // Add more action buttons as needed
  ],
  automaticallyImplyLeading: false,
),

并按照下面的底部NavigationBar代码进行操作

 import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    HomeTab(),
    AboutTab(),
    MapTab(),
    ProfileTab(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your App Name'),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.info),
            label: 'About',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.map),
            label: 'Map',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

根据您的设计视图导入屏幕

import 'HomeTab.dart';
import 'AboutTab.dart';
import 'MapTab.dart';
import 'ProfileTab.dart';