BottomNavigationBarItem - Unable to link widgets-CodePudding

I need to have the transactions screen and the categories screen widgets as BottomNavigationBarItems

However, i receive this error

The method 'Transactions' isn't defined for the type 'HomeState'. Try correcting the name of an existing method, or defining a method named 'Transactions'.

lib\screens\home.dart

import 'package:demo_app/screens/categories.dart';
import 'package:demo_app/screens/transactions.dart';
import 'package:flutter/material.dart';

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

  @override
  State<Home> createState() => HomeState();
}

class HomeState extends State<Home> {
  List<Widget> widgetOptions = [Transactions(), Categories()];
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Logged in!'),
        ),
        body: widgetOptions.elementAt(selectedIndex),
        bottomNavigationBar: BottomAppBar(
          shape: const CircularNotchedRectangle(),
          notchMargin: 4,
          child: BottomNavigationBar(
            backgroundColor: Theme.of(context).primaryColor.withAlpha(0),
            elevation: 0,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.account_balance_wallet),
                label: 'Transactions'),
              BottomNavigationBarItem(
                icon: Icon(Icons.category),
                label: 'Categories'),
              BottomNavigationBarItem(
                icon: Icon(Icons.logout),
                label: 'Log out'),              
            ],
            currentIndex: selectedIndex,
            onTap: onItemTapped,
          )
        )
      ),
    );
  }

  void onItemTapped(int index){
    if(index == 2){

    }else{
      setState((){
        selectedIndex = index;
      });
    }
  }
  

}

CodePudding user response：

Simply add SizedBox() to widgetOptions list.

List<Widget> widgetOptions = [Transactions(), Categories(), SizedBox()];

CodePudding user response：

you are trying to create a BottomNavigationBar with 3 items: Transactions, Categories, and Log out. However, in the widgetOptions list, you are only including the Transactions and Categories widgets. Also, in the onItemTapped function, you have an if statement that checks if the selected index is 2 (which corresponds to the Log out item), but there is no code inside the if statement.

To fix the issue, you should add a third widget to the widgetOptions list that corresponds to the Log out item.

class HomeState extends State<Home> {
  List<Widget> widgetOptions = [Transactions(), Categories(), LogOut()]; // added a third widget for Log Out
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Logged in!'),
        ),
        body: widgetOptions.elementAt(selectedIndex),
        bottomNavigationBar: BottomAppBar(
          shape: const CircularNotchedRectangle(),
          notchMargin: 4,
          child: BottomNavigationBar(
            backgroundColor: Theme.of(context).primaryColor.withAlpha(0),
            elevation: 0,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.account_balance_wallet),
                label: 'Transactions'),
              BottomNavigationBarItem(
                icon: Icon(Icons.category),
                label: 'Categories'),
              BottomNavigationBarItem(
                icon: Icon(Icons.logout),
                label: 'Log out'),              
            ],
            currentIndex: selectedIndex,
            onTap: onItemTapped,
          )
        )
      ),
    );
  }

  void onItemTapped(int index){
    if(index == 2){
      // handle the log out action here
    }else{
      setState((){
        selectedIndex = index;
      });
    }
  }
}