How to Make a Gradient BottomNavigationBar in flutter?

Question

// 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

score 1 · Answer 1 · answered Nov 14 '22 at 14:20

1

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.

answered Nov 14 '22 at 14:20

Rahul

3,529
1
5
19

Thank you so much and yes this is the correct answer after posting my question I resolved this problem in an hour and yes you are right I actually visited the docs of flutter again and found that it's not providing null safety and this is what was the issue .... Thank you for your valuable answer. – 47-B-M Nov 15 '22 at 15:07

Md. Yeasin Sheikh · Answer 2 · 2022-11-14T14:43:24.993

0

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,
),

edited Nov 14 '22 at 14:43

answered Nov 14 '22 at 14:27

Md. Yeasin Sheikh

54,221
7
29
56

Thank you for your valuable answer. – 47-B-M Nov 15 '22 at 15:05
yap, I've reviewed the pr while setting `label` didnt work – Md. Yeasin Sheikh Nov 15 '22 at 15:07

How to Make a Gradient BottomNavigationBar in flutter?

2 Answers2