Flutter Gradient Bottom Navigation Bar

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Appbar')),
      body: const Center(
        child: Text('foo'),
      ),
      // here is bottom navigation bar
      bottomNavigationBar: Stack(
        // we will have a custom container and bottom navigation bar on top of each other
        children: [
          Container(
            // this is the decoration of the container for gradient look
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Colors.red,
                  Colors.blue,
                ],
              ),
            ),
            // i have found out the height of the bottom navigation bar is roughly 60
            height: 60,
          ),
          BottomNavigationBar(
            // set it to transparent so we can see behind
            backgroundColor: Colors.transparent,
            // remove elevation because it causes weird shadow
            elevation: 0,
            // set the color of the selected item
            selectedItemColor: Colors.white,
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'item 1',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.account_circle),
                label: 'item 2',
              ),
            ],
          ),
        ],
      ),
    );
  }
}