CODEWITHSUNDEEP
flutterflutter-layoutflutter-dependencies
King Vlad
King Vlad

Reputation: 11

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

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"),
          ),
          ],
          ),
      ),
      );
  }
}

Upvotes: 1

Views: 3506

Answers (5)

Anıl Kayan
Anıl Kayan

Reputation: 21

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;
            });
          },

Upvotes: 2

Yugene
Yugene

Reputation: 3222

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;
    }

...

Upvotes: 2

Kavin-K
Kavin-K

Reputation: 2117

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,

Upvotes: 1

Maulik Sinroja
Maulik Sinroja

Reputation: 191

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"),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 0

Praneeth Dhanushka Fernando
Praneeth Dhanushka Fernando

Reputation: 3263

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;

Upvotes: 0

Related Questions