kalismeras61 / flutter_page_transition

This is Flutter Page Transition Package
BSD 2-Clause "Simplified" License
471 stars 56 forks source link

Implement in bottom navigation bar #65

Open farhantandia opened 2 years ago

farhantandia commented 2 years ago

Hi, first of all, thank you for a great package for ease to implement page transition between app screen navigation. I wonder how to implement the package in the bottom navigation bar with indexed stack.. this is my sample code for the navigation bar.. is this package already supported for this scenario? Thank you.


    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // body: screens[_selectedIndex],
        body: IndexedStack(index: _selectedIndex, children: screens),
        bottomNavigationBar: Theme(
          data: ThemeData(
            splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
          ),
          child: NavigationBarTheme(
              data: NavigationBarThemeData(
                  labelTextStyle: MaterialStateProperty.all(
                      Theme.of(context).textTheme.bodyText2?.copyWith(color: Colors.blue),)),
              child: NavigationBar(
                height: 65,
                backgroundColor: Color(0XFF00112B),
                labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
                selectedIndex: _selectedIndex,
                animationDuration: Duration(milliseconds: 500),
                onDestinationSelected: (_selectedIndex) => _onItemTapped(_selectedIndex),
                destinations: const [
                  NavigationDestination(
                    icon: Icon(
                      Icons.battery_full_outlined,
                      color: Colors.white54,
                    ),
                    label: 'Dashboard',
                    selectedIcon: Icon(
                      Icons.battery_full,
                      color: Colors.blue,
                    ),
                  ),
                  NavigationDestination(
                    icon: Icon(
                      Icons.map_outlined,
                      color: Colors.white54,
                    ),
                    label: 'Ride',
                    selectedIcon: Icon(
                      Icons.map,
                      color: Colors.blue,
                    ),
                  ),
                  NavigationDestination(
                    icon: Icon(
                      Icons.library_books_outlined,
                      color: Colors.white54,
                    ),
                    label: 'Diagnostic',
                    selectedIcon: Icon(
                      Icons.library_books,
                      color: Colors.blue,
                    ),
                  ),```