Flutter Bottom Navigation Bar default page after open the app

Question

How can i set HomePage() as my default page after i get into my app ? My app design put the Home Button in the middle of Bottom NavBar.

The Bottom NavBar was fine, it works well and start from the middle, but the page always starts from the CameraPage()

the code looks like this

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: Home(),
    );
  }
}

This is the Home()

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  PageController _pageController = new PageController();
  List<Widget> _screens = [
    CameraPage(),
    HomePage(),
    InventoryPage(),
  ];

  int _selectedIndex = 0;
  void _onPagedChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _onItemTapped(int selectedIndex) {
    _pageController.jumpToPage(selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff8f5f1),
      bottomNavigationBar: CurvedNavigationBar(
        index: _selectedIndex,
        onTap: _onItemTapped,
        items: <Widget>[
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
        ],
      ),
      body: PageView(
        controller: _pageController,
        children: _screens,
        onPageChanged: _onPagedChanged,
      ),
    );
  }
}

1

int _selectedIndex = 1; – flakerimi Mar 24 '21 at 18:54

score 3 · Answer 1 · answered Mar 25 '21 at 11:28

Okay i found the solution, because

int _selectedIndex = 1;

only set the default navbar position not the page.

so i add iniState using initialPage from PageController to set Home() as my default page

@override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 1);
  }

Tejaswini Dev · Answer 2 · 2021-03-25T12:49:41.260

Change this int _selectedIndex = 0; to int _selectedIndex = 1; So by default it opens HomePage

Please refer the updated code

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  PageController _pageController = new PageController();
  List<Widget> _screens = [
    CameraPage(),
    HomePage(),
    InventoryPage(),
  ];

  int _selectedIndex = 1;
  void _onPagedChanged(int index) {
   // setState(() {
      _selectedIndex = index;
    //});
  }

  void _onItemTapped(int selectedIndex) {
    // _pageController.jumpToPage(selectedIndex);
    setState(() {
      _selectedIndex = selectedIndex;
      _onPagedChanged(selectedIndex);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xfff8f5f1),
        bottomNavigationBar: CurvedNavigationBar(
          index: _selectedIndex,
          onTap: _onItemTapped,
          items: <Widget>[
            Icon(Icons.camera),
            Icon(Icons.dashboard),
            Icon(Icons.account_box),
          ],
        ),
        body: _screens[_selectedIndex]
        // PageView(
        //   controller: _pageController,
        //   children: _screens,
        //   onPageChanged: _onPagedChanged,
        // ),
        );
  }
}


class CameraPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Camera"),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Home"),
      ),
    );
  }
}

class InventoryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("InventoryPage"),
      ),
    );
  }
}

when i change the value between 0 to 2, it's only change where the icon on bottom navbar at. And the default page still on CameraPage() even the navbar not on the correct Position — Makayasa, Mar 24 '21 at 19:21

score 0 · Answer 3 · answered Mar 24 '21 at 18:56

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  PageController _pageController = new PageController();
  List<Widget> _screens = [
    CameraPage(),
    HomePage(),
    InventoryPage(),
  ];

  int _selectedIndex = 1;
  void _onPagedChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _onItemTapped(int selectedIndex) {
    _pageController.jumpToPage(selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff8f5f1),
      bottomNavigationBar: CurvedNavigationBar(
        index: _selectedIndex,
        onTap: _onItemTapped,
        items: <Widget>[
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
        ],
      ),
      body: PageView(
        controller: _pageController,
        children: _screens,
        onPageChanged: _onPagedChanged,
      ),
    );
  }
}

change _selectedIndex value to 1 only effect for moving the Botom NavBar position, but the default page still on CameraPage(), even the Bottom NavBar position not in CameraPage position — Makayasa, Mar 25 '21 at 02:16

Flutter Bottom Navigation Bar default page after open the app

3 Answers3