Hi i have achieved to disable rebuilds page on change of tab on BottomNavigationBar.
I have also attached gif below:

Below is the full example with 3 tabs, which has its own variable which can be updated with preserve value and get alived during tab change:
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_demo_app/list.dart';
import 'package:bmnav/bmnav.dart' as bmnav;
MyHomeMapSample valMapSample = null;
MyHomeWorkouts valWorkouts = null;
MyHomeAccount valAccount = null;
MapSample mapSample = null;
Workouts workouts = null;
Account account = null;
Widget currentScreen = null;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
ButtonsLists.context = context;
currentScreen = MyHomeMapSample();
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState(){
super.initState();
debugPrint("currentTab: _MyHomePageState super.initState();");
}
int currentTab = 0;
final PageStorageBucket bucket = PageStorageBucket();
@override
Widget build(BuildContext ctx) {
debugPrint('currentTab: $currentTab');
return Scaffold(
body: PageStorage(child: currentScreen, bucket: bucket),
bottomNavigationBar: SizedBox(height: 58,
child: bmnav.BottomNav(
index: currentTab,
onTap: (i) {
setState(() {
currentTab = i;
currentScreen = getWidget(context, i);
debugPrint('inner currentTab: $currentTab');
debugPrint('inner currentScreen: $currentScreen');
});
},
labelStyle: bmnav.LabelStyle(visible: true),
items: [
bmnav.BottomNavItem(Icons.map, label: 'Map'),
bmnav.BottomNavItem(Icons.cast, label: 'Workouts'),
bmnav.BottomNavItem(Icons.textsms, label: 'Account'),
],
),
),
resizeToAvoidBottomPadding: true,
);
}
Widget getWidget(BuildContext context, int i){
if(i==0){
if(valMapSample == null){
valMapSample = MyHomeMapSample();
mapSample = valMapSample.createState();
return valMapSample;
}else{
return mapSample.build(context);
}
}
else if(i==1){
if(valWorkouts == null){
valWorkouts = MyHomeWorkouts();
workouts = valWorkouts.createState();
return valWorkouts;
}else{
return workouts.build(context);
}
}else if(i==2){
if(valAccount == null){
valAccount = MyHomeAccount();
account = valAccount.createState();
return valAccount;
}else{
return account.build(context);
}
}
}
}
class MyHomeMapSample extends StatefulWidget {
MyHomeMapSample({Key key}) : super(key: key);
@override
MapSample createState() => MapSample();
}
class MapSample extends State<MyHomeMapSample> with AutomaticKeepAliveClientMixin {
var myVariable = 0;
@override
void initState(){
super.initState();
debugPrint('current: MapSample: initState() called!');
}
@override
Widget build(BuildContext context) {
myVariable = myVariable + 1;
return Scaffold(
appBar: AppBar(
title: Text('MapSample'),
),
body: Center(
child: Text('MapSample details + $myVariable'),
),
resizeToAvoidBottomPadding: true,
);
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}
class MyHomeWorkouts extends StatefulWidget {
MyHomeWorkouts({Key key}) : super(key: key);
@override
Workouts createState() => Workouts();
}
class Workouts extends State<MyHomeWorkouts> with AutomaticKeepAliveClientMixin {
var myVariable = 0;
@override
void initState(){
super.initState();
debugPrint('current: Workouts: initState() called!');
}
@override
Widget build(BuildContext context) {
myVariable = myVariable + 1;
return Scaffold(
appBar: AppBar(
title: Text('Workouts'),
),
body: Center(
child: Text('Workouts details + $myVariable'),
),
resizeToAvoidBottomPadding: true,
);
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}
class MyHomeAccount extends StatefulWidget {
MyHomeAccount({Key key}) : super(key: key);
@override
Account createState() => Account();
}
class Account extends State<MyHomeAccount> with AutomaticKeepAliveClientMixin {
var myVariable = 0;
@override
void initState(){
super.initState();
debugPrint('current: Account: initState() called!');
}
@override
Widget build(BuildContext context) {
myVariable = myVariable + 1;
return Scaffold(
appBar: AppBar(
title: Text('Account'),
),
body: Center(
child: Text('Account details + $myVariable'),
),
resizeToAvoidBottomPadding: true,
);
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}
What i have done is that created "StatefulWidget
" and "State<>
" class objects globally and then with the help of "createState()
" method of "StatefulWidget
" and ".build(context)
" method of "State<>
" class,
i have prevented to call "initState()
" method and updated widget without it.
Also i used "with AutomaticKeepAliveClientMixin
" for "State<>
" which will try to keep objects alive.
Hope this will help :)