BorderSide Color to BottomNavigationBar?

user_10841432 0
Viewed 1209

I want to add a colored BorderSide to the top of my BottomNavigationBar.

I can achieve it using a Custom BottomAppBar, but it is not convenient for my design as it misplaces my floatingActionButtonLocation.centerDocked, so I need to stick with BottomNavigationBar.

Any help to find a workaround is appreciated.

import 'package:flutter/material.dart';

class BottomNavTest extends StatefulWidget {
  @override
  _BottomNavTestState createState() => _BottomNavTestState();
}

class _BottomNavTestState extends State<BottomNavTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.grey,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.black, //
        currentIndex: 0,
        onTap: (index) {
          switch (index) {
            case 0:
              break;
            case 1:
              break;
          }
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.thumb_up),
            title: Text('good'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.thumb_down),
            title: Text('bad'),
          ),
        ],
      ),
    );
  }
}

Current output:

Current Output

My goal:

My Goal

flutter
2 Answers

Add it inside the container and give border

Scaffold(
      backgroundColor: Colors.grey,
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
            border: Border.all(color: Colors.white, width: 2)
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.grey,
          selectedItemColor: Colors.white,
          unselectedItemColor: Colors.black, 
          currentIndex: 0,
          onTap: (index) {
            switch (index) {
              case 0:
                break;
              case 1:
                break;
            }
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.thumb_up),
              title: Text('good'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.thumb_down),
              title: Text('bad'),
            ),
          ],
        ),
      ),
    );

Output:

enter image description here

user_51065740

You can make BottomNavigationBar as a child to the Container..

And add topBorder to Container like this..

decoration: BoxDecoration( border: Border( top: BorderSide( color: Colors.blue, // width: 3.0 --> you can set a custom width too! ), ), ),

hope it solves your issue

user_134602320
Related