1

How can I shift from Tab 1 to Tab 2 by clicking on the Go to Tab 2 button on Screen 1?

The image description of what I want to achieve! Image

The code for the Persistent Bottom Navigation Bar is given below:

import 'package:bottom_nav_bar/screens/screen1.dart';
import 'package:bottom_nav_bar/screens/screen2.dart';
import 'package:bottom_nav_bar/screens/screen3.dart';
import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';

class BottomNavigationBarPanel extends StatefulWidget {
  BottomNavigationBarPanel({Key? key, required this.selectedBottomNavIndex})
      : super(key: key);
  int selectedBottomNavIndex;

  @override
  State<BottomNavigationBarPanel> createState() =>
      _BottomNavigationBarPanelState();
}

class _BottomNavigationBarPanelState extends State<BottomNavigationBarPanel> {
  final int _selectedBottomNavIndex = 0;

  PersistentTabController persistentTabController = PersistentTabController();

  final List<Widget> screens = [
    const Screen1(),
    const Screen2(),
    const Screen3(),
  ];
  final List<PersistentBottomNavBarItem> _persistentBottomNavberItems = [
    PersistentBottomNavBarItem(
      inactiveIcon: inActive('Tab 1'),
     
      icon: active('Tab 1'),
    ),
    PersistentBottomNavBarItem(
      inactiveIcon: inActive('Tab 2'),
      icon: active('Tab 2'),
    ),
    PersistentBottomNavBarItem(
      inactiveIcon: inActive('Tab 3'),
      icon: active('TAb 3'),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PersistentTabView(
        context,
        controller: persistentTabController,
        screens: screens,
        items: _persistentBottomNavberItems,
        confineInSafeArea: true,
        popAllScreensOnTapAnyTabs: true,
        handleAndroidBackButtonPress: true,
        resizeToAvoidBottomInset: true,
        stateManagement: false,
        backgroundColor: Colors.black,
        navBarStyle: NavBarStyle.simple,
        popAllScreensOnTapOfSelectedTab: true,
        popActionScreens: PopActionScreensType.all,
        navBarHeight: 60,
        margin: EdgeInsets.zero,
        screenTransitionAnimation: const ScreenTransitionAnimation(
          animateTabTransition: true,
          curve: Curves.linear,
          duration: Duration(milliseconds: 500),
        ),
        decoration: const NavBarDecoration(
          boxShadow: [
            BoxShadow(
              color: Color.fromRGBO(48, 54, 91, 0.2),
              blurRadius: 2,
              offset: Offset(0, -2),
            ),
          ],
        ),
        padding:
            const NavBarPadding.only(bottom: 0, top: 0, left: 10, right: 10),
      ),
    );
  }
}

Widget active(String label) {
  return Padding(
    padding: const EdgeInsets.only(top: 11, bottom: 11),
    child: Container(
        decoration: BoxDecoration(
          color: Colors.green[400],
          borderRadius: BorderRadius.circular(12),
        ),
        child: Padding(
          padding:
              const EdgeInsets.only(top: 10, bottom: 10, right: 20, left: 22),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                label,
                style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w600,
                    color: Colors.black),
              )
            ],
          ),
        )),
  );
}

Widget inActive(String label) {
  return Padding(
    padding: const EdgeInsets.all(10.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          label,
          style: const TextStyle(
              fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white),
        )
      ],
    ),
  );
}

I used Persistent Bottom navigation bar and I wanted a way to switch tabs explicitly without clicking on the bottom tab bar!

0 Answers0