How to Make a Gradient BottomNavigationBar in flutter?-CodePudding

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
// ignore: import_of_legacy_library_into_null_safe
import 'package:gradient_bottom_navigation_bar/gradient_bottom_navigation_bar.dart';
import 'package:rent_project/Ui/Auth/Account_screen.dart';
import 'package:rent_project/Ui/Auth/cart_scree.dart';
import 'package:rent_project/Ui/Auth/home_Screen2.dart';
import 'package:rent_project/Ui/Auth/message_screen.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
    int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
   
   Home_Screen(),
   Msg_Screen(),
   Cart_Screen(),
   AccountScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
   
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: GradientBottomNavigationBar(
        backgroundColorStart: Colors.purple,
        backgroundColorEnd: Colors.white,
               items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
            backgroundColor: Colors.purple,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            label: 'Message',
            backgroundColor: Colors.purple,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shop),
            label: 'Cart',
            backgroundColor: Colors.purple,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_box),
            label: 'Account',
            backgroundColor: Colors.purple,
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
  
  }

I have seen the example code for GradientBottonNavigationBar on flutter's website they have used the title for the items but when I am using the title instead of label its giving me error and also its not accepting the label.

help me to solve this issue,

what should I do here? label is also giving me error and title is also creating troubles.....

Try correcting the name to the name of an existing getter, or defining a getter or field named 'title'.
            child: item.title

CodePudding user response：

I would advice against using a package which isn't null-safe even after a year of null-satefy feature release for flutter.

You can use following gist https://gist.github.com/erayerdin/5f2cbd1b52464cf06d199ba6607eaa73

Basically, it uses stack to create a gradient and it makes the background of BottomNavigationBar transparent to have the same effect.

CodePudding user response：

The issue is with the package itself, it is using title instead of label, you can check this pr and create your local file

You need to pass String on label

BottomNavigationBarItem(
  icon: Icon(Icons.home),
  label: 'Home',
  backgroundColor: Colors.purple,
),