CODEWITHSUNDEEP
androidflutterdart
oividiosCaeremos
oividiosCaeremos

Reputation: 748

Calling initState of the Selected Index's Widget on BottomNavigationBar

I want to call initState of each NavigationBarItem when selectedIndex of the BottomNavigationBar changes. How can I implement it? Right now, their initState are only launched when the main page which contains the BottomNavigationBar is initialized. Can I add something on the onTap function to do this? If I can, what would it be?

Upvotes: 1

Views: 1226

Answers (1)

Sagar Acharya
Sagar Acharya

Reputation: 3777

import 'package:flutter/material.dart';

main()=>runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _HomeState createState() => new _HomeState();
}

class _HomeState extends State<MyApp> {
  int _selectedPage = 0;
  final _pageOptions = [
    new Page1(),
    new Page2(),
    new Page3(),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
          home: Scaffold(
        body: _pageOptions[_selectedPage],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedPage,
          onTap: (int index) {
            setState(() {
              _selectedPage = index;
            });
          },
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Padding(
                  padding: const EdgeInsets.only(top: 5),
                  child: Text(
                    "Page 1",
                    style: TextStyle(
                        color: Color(0xFF282858),
                        fontFamily: "Poppins-Medium",
                        height: 1),
                  ),
                )),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.location_on,
                  color: Color(0xFF282858),
                ),
                title: Text(
                  "Page 2",
                  style: TextStyle(
                      color: Color(0xFF282858),

                      height: 1),
                )),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.supervised_user_circle,
                  color: Color(0xFF282858),
                ),
                title: Text(
                  "Page 3",
                  style: TextStyle(
                      color: Color(0xFF282858),

                      height: 1),
                )),
          ],
        ),
      ),
    );
  }
}

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  void initState() {
    // TODO: implement initState
    print('This is page 1');
  }
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
   @override
  void initState() {
    // TODO: implement initState
    print('This is page 2');
  }
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class Page3 extends StatefulWidget {
  @override
  _Page3State createState() => _Page3State();
}

class _Page3State extends State<Page3> {
   @override
  void initState() {
    // TODO: implement initState
    print('This is page 3');
  }
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

check out this code

Upvotes: 2

Related Questions