Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set border radius to bottom app bar in a flutter app?

I want to set the borderRadius to an Bottom Navigation App Bar as its shown in the image. I have tried to put Bottom Navigation App Bar to a ClipRRect borderRadius and in a Container decoration but it didn't worked. So how can I apply the topLeft, and topRight border radius to my bottom navigation bar. Kindly help to let me know how can I do it?

enter image description here

main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Food Ordering',
      theme: ThemeData(primarySwatch: Colors.blue, primaryColor: Colors.white),
      home: MyStatefulWidget(),
      routes: <String, WidgetBuilder>{
        '/detail-page': (BuildContext context) => MyDetailPage(),
      },
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static List<Widget> _widgetOptions = <Widget>[
    HomePage(),
    HomePage(),
    HomePage(),
    HomePage(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Image.asset('assets/icon-home.png'),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Image.asset('assets/icon-mentors.png'),
              title: Text('Mentors'),
            ),
            BottomNavigationBarItem(
              icon: Image.asset('assets/icon-messages.png'),
              title: Text('Messages'),
            ),
            BottomNavigationBarItem(
              icon: Image.asset('assets/icon-settings.png'),
              title: Text('Settings'),
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.blue,
          onTap: _onItemTapped),
    );
  }
}
like image 845
Tushar Rai Avatar asked Jun 13 '19 09:06

Tushar Rai


People also ask

How do you give the radius to the bottom navigation bar in Flutter?

Answers 2 : of How to set border radius to bottom app bar in a flutter app. Alternatively, if your goal is to only put a borderRadius you can just use ClipRRect and apply your desired borderRadius to it. Here is my implementation of the solution: ClipRRect _getBtmNavBar() { return ClipRRect( borderRadius: BorderRadius.

How do you curve an app bar in Flutter?

There is one simple way to achieve this using ClipPath Widget. Create A SizedBox/Container of some height (say 240) right below AppBar in the body and apply the same background color. Use ClipPath Widget to wrap that SizedBox/Container. Change your heights fraction, we kept heights-50 for a nice curve you want.

How do you shape the bottom navigation bar in Flutter?

Now let's create our bottom navigation bar. In the HomePage class let's define the bottomNavigationBar attribute and assign a Container to it. Give it a height of 60 with some BoxDecoration (Pixels) add a Row as the child of the Container. Set the main axis alignment to space around.


1 Answers

EDIT

Scaffold now has a property called extendBody which can be used to extend the body below a bottomBar. From the documentation,

If true, and bottomNavigationBar or persistentFooterButtons is specified, then the body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar or the persistentFooterButtons.

This means that all you need to do is

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Some Text'),
      ),
      body: bodyContent,
      extendBody: true,
      bottomNavigationBar: bottomNavigationBar,
    );
  }

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

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

OUTDATED

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

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,
      ),
    );
  }
}
like image 179
Ajil O. Avatar answered Oct 02 '22 20:10

Ajil O.