How do I set a default tab in BottomNavigation bar in Flutter? - flutter

Question

I have 5 tabs currently, how do I set the a default tab when launching the app? lets say I want the account tab to be the default tab when opening the app.
How to I do that? Btw, Im using WebView plugin to display a site's content.
Below is the code of my main.dart file. Ive tried searching and all but the solutions I found wont work for me (I think im searching the wrong words. Also, I am new to flutter) Thank you very much!
import 'package:syncshop/widgets/cart_page.dart';
import 'package:syncshop/widgets/categories_page.dart';
import 'package:syncshop/widgets/home_page.dart';
import 'package:syncshop/widgets/profile_account.dart';
import 'package:syncshop/widgets/search_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
int _selectedPage = 0;
final _pageOptions = [
HomeScreen(),
CategoriesPage(),
SearchPage(),
CartPage(),
ProfileAccount(),
];
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Sync Shop',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: _pageOptions[_selectedPage],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _selectedPage,
onTap: (int index) {
setState((){
_selectedPage = index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home"),
),
BottomNavigationBarItem(icon: Icon(Icons.category), title: Text("Categories"),
),
BottomNavigationBarItem(icon: Icon(Icons.search), title: Text("Search"),
),
BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), title: Text("Cart"),
),
BottomNavigationBarItem(icon: Icon(Icons.account_circle), title: Text("Profile"),
),
],
),
),
);
}
}

Answer 1

You can override initState function of State and can put some initial codes there.
So for your example, can do this.
...
class MyAppState extends State<MyApp> {
int _selectedPage = 0;
#override
void initState() {
super.initState();
_selectedPage = 4;
}
...

Answer 2

When you creating BottomNavigationBar set this.currentindex to index that you want
bottomNavigationBar: BottomNavigationBar(
currentindex=1,//This line, it's default 0
type: BottomNavigationBarType.fixed,
currentIndex: _selectedPage,
onTap: (int index) {
setState(() {
_selectedPage = index;
});
},

Answer 3

You must use tab controller.
First you need to extend TickerProviderStateMixin in class.
class MyAppState extends State<MyApp> with TickerProviderStateMixin {
}
Then define TabController like,
_tabController = new TabController(length: _tabLength, vsync: this, initialIndex: 1);
and finally set controller in your TabBarView
controller: _tabController,

Answer 4

Here you initialize the default tab
int _selectedPage = 0;
You can change it to any tab you wish, If you want Profile
int _selectedPage = 4;

Answer 5

import 'package:flutter/material.dart';
import 'package:syncshop/widgets/cart_page.dart';
import 'package:syncshop/widgets/categories_page.dart';
import 'package:syncshop/widgets/home_page.dart';
import 'package:syncshop/widgets/profile_account.dart';
import 'package:syncshop/widgets/search_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
int _selectedPage = 4;
final _pageOptions = [
HomeScreen(),
CategoriesPage(),
SearchPage(),
CartPage(),
ProfileAccount(),
];
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Sync Shop',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: _pageOptions[_selectedPage],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _selectedPage,
onTap: (int index) {
setState(() {
_selectedPage = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("Categories"),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text("Search"),
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
title: Text("Cart"),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
title: Text("Profile"),
),
],
),
),
);
}
}