CODEWITHSUNDEEP
flutterflutter-layout
alexandreohara
alexandreohara

Reputation: 264

How can I create a curved bottomBar in Flutter?

I want to have a curved bottom bar like that with a shadow behind it:

enter image description here

I've tried to create something similar, but when I put the bottomBar on Scaffold, it cuts the body when I'm scrolling down. If I try to round the edges of the body part of Scaffold, then I won't have the Shadow. Does anyone know how to do that ? Thanks in advance

Upvotes: 0

Views: 2096

Answers (1)

Aamil Silawat
Aamil Silawat

Reputation: 8229

Put it inside a stack. Don't add the Bottom Navigation Bar to the scaffold directly.

Try your own way of giving you eg.Curved BottomNavigationBar

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Some Text'),
      ),
      body: Stack(
        children: <Widget>[
          bodyContent,
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: bottomNavigationBar,
          ),
        ],
      ),
    );
  }

  Widget get bodyContent {
    return Container(color: Colors.red);
  }

  Widget get bottomNavigationBar {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(40),
        topLeft: Radius.circular(40),
      ),
      child: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('1')),
          BottomNavigationBarItem(icon: Icon(Icons.usb), title: Text('2')),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind), title: Text('3')),
          BottomNavigationBarItem(
              icon: Icon(Icons.multiline_chart), title: Text('4')),
        ],
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.black,
        showUnselectedLabels: true,
      ),
    );
  }
}

Upvotes: 1

Related Questions