Custom BottomNavigationBar in Flutter

This Article is posted by seven.srikanth at 5/13/2020 4:33:13 PM



Hi All,
In this video, I've shown how to create a Customer BottomNavigationBar in Flutter.
Here is the code from main.dart file.

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage() ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center(child: Text('Hello World')), floatingActionButton: FloatingActionButton(onPressed: (){}, child: Icon(Icons.add)), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, bottomNavigationBar: BottomAppBar( color: Colors.blue, shape: CircularNotchedRectangle(), child: Container( height: 80, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 20.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Icon(Icons.home, size: 40.0, color: Colors.white), Icon(Icons.school, size: 40.0, color: Colors.white), SizedBox.shrink(), Icon(Icons.business_center, size: 40.0, color: Colors.white), Icon(Icons.contact_phone, size: 40.0, color: Colors.white) ],), ) ) ), ); } }
Thanks,
Srikanth

Tags: Custom BottomNavigationBar in Flutter








0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.











© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com