how to make BottomNavigationBar with number and text flutter - flutter

Question

I need to build a BottomNavigationBar with a text and a number as the photo below :
the name of the tab is will shown just when the app is active
how to do it ??

Answer 1

Basically this is exactly what you want: https://flutterawesome.com/a-modern-google-style-nav-bar-for-flutter/
I recomend you extracting this code and build it to your fits.
import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:line_icons/line_icons.dart';
void main() => runApp(MaterialApp(
title: "GNav",
theme: ThemeData(
primaryColor: Colors.grey[800],
),
home: Example()));
class Example extends StatefulWidget {
#override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Likes',
style: optionStyle,
),
Text(
'Index 2: Search',
style: optionStyle,
),
Text(
'Index 3: Profile',
style: optionStyle,
),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: Container(
decoration: BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(blurRadius: 20, color: Colors.black.withOpacity(.1))
]),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
child: GNav(
gap: 8,
activeColor: Colors.white,
iconSize: 24,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
duration: Duration(milliseconds: 800),
tabBackgroundColor: Colors.grey[800],
tabs: [
GButton(
icon: LineIcons.home,
text: 'Home',
),
GButton(
icon: LineIcons.heart_o,
text: 'Likes',
),
GButton(
icon: LineIcons.search,
text: 'Search',
),
GButton(
icon: LineIcons.user,
text: 'Profile',
),
],
selectedIndex: _selectedIndex,
onTabChange: (index) {
setState(() {
_selectedIndex = index;
});
}),
),
),
),
);
}
}
Link to repository and full code:
https://github.com/sooxt98/google_nav_bar