How to apply elevation in bottom navigation bar in flutter?

user_8509590 0
Viewed 13893

I want to apply elevation in the bottom navigation bar. I tried elevation property but it doesn't work. Elevation property has a very negligible shadow effect. But according to my design I want higher elevation.

I want the following output...

Desired output Image'

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Sample App'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        elevation: 10,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit),
              title: Text('Test')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_alarm),
              title: Text('Test')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_alarm),
            title: Text('Test'),
          ),
        ],
      ),
    );
  }
}
flutter-layout flutter
3 Answers

I know it may not seem the best solution for this issue but you can wrap your Bottom Nav Bar inside a Container, and then apply a BoxDecoration on that.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Sample App'),
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.black,
              blurRadius: 10,
            ),
          ],
        ),
        child: BottomNavigationBar(
          elevation: 10,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.ac_unit),
              title: Text('Test'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.access_alarm),
              title: Text('Test'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.access_alarm),
              title: Text('Test'),
            ),
          ],
        ),
      ),
    );
  }
}

I hope someone come with a better solution for this issue.

user_125009920

I'm pretty late, but I got the perfect answer. You can use a BottomAppBar instead of the BottomNavigationBar Ex :

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Sample App'),
      ),
      bottomNavigationBar: BottomAppBar(
        elevation: 10,
        child: Row(children :[
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit),
              title: Text('Test')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_alarm),
              title: Text('Test')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_alarm),
            title: Text('Test'),
          ),
        ]),
      ),
    );
  }
}

happy fluttering ! :)

user_144580280

elevation property If null, defaults to 8.0. final double elevation

Admin1
Related