CODEWITHSUNDEEP
flutterflutter-layout
Jay Tillu
Jay Tillu

Reputation: 1548

How to apply elevation in bottom navigation bar in flutter?

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'),
          ),
        ],
      ),
    );
  }
}

Upvotes: 16

Views: 30137

Answers (3)

Khushal
Khushal

Reputation: 779

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 ! :)

Upvotes: 4

Jeremias Moraes
Jeremias Moraes

Reputation: 522

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.

Upvotes: 34

user9683896
user9683896

Reputation:

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

Upvotes: 0

Related Questions