We are reliaible & consistent IT Solution Team
Mon - Fri 9.00 AM - 6.00 PM IST
Using GetX to Manage Bottom Navigation and Tab Bar in Flutter
RulTech > Blogs > Flutter > Using GetX to Manage Bottom Navigation and Tab Bar in Flutter

Using GetX to Manage Bottom Navigation and Tab Bar in Flutter

If you’re building a dashboard application, managing navigation effectively is essential. One of the best ways to achieve this in Flutter is by using the Flutter GetX BottomNavigation TabBar structure. This method centralizes navigation logic, making your code cleaner, easier to manage, and more scalable.

In many Flutter apps, developers use both BottomNavigation and TabBar widgets. These components often exist in separate views, which can lead to duplicated navigation logic. However, with Flutter GetX, you can handle both from a single controller. This approach not only improves code organization but also reduces bugs and maintenance time.

For example, a DashboardController in GetX can hold observable variables to track the selected index of the BottomNavigation and the active tab in the TabBar. As a result, when the user interacts with these navigation elements, the controller updates the state, and the interface responds automatically. This reactive behavior leads to a smooth user experience and faster performance.

In addition, Flutter GetX BottomNavigation TabBar architecture eliminates the need for complex Navigator logic or passing context manually. You simply bind the controller’s values to your UI, and GetX takes care of the rest. Therefore, your app becomes more efficient, with less boilerplate code.

Furthermore, this setup is ideal for apps that require complex navigation, such as dashboards with multiple sections. It helps developers manage page transitions and nested tabs effortlessly. By using this centralized method, adding or modifying navigation elements becomes easier over time.

To sum up, adopting the Flutter GetX BottomNavigation TabBar pattern is a smart move for any Flutter developer aiming to build scalable and maintainable apps. It improves code clarity, enhances performance, and creates a more seamless user experience.

Steps to Create a Dashboard with Bottom Navigation and Tab Bar

1. Project Setup

Ensure you have the get package in your pubspec.yaml:

yaml

dependencies:
flutter:
sdk: flutter
get: ^4.6.6

Then run flutter pub get.

css

2. Folder Structure

Create a structure that keeps your navigation logic centralized and easy to manage:

lib/
├── controllers/
│   └── dashboard_controller.dart
├── views/
│   ├── dashboard_view.dart
│   ├── home_view.dart
│   ├── profile_view.dart
│   └── settings_view.dart
└── main.dart
3. Create the Controller

The controller will handle the logic for switching between the Bottom Navigation Bar and TabBar.

dart

// controllers/dashboard_controller.dart
import 'package:get/get.dart';

class DashboardController extends GetxController {
  // Index for BottomNavigationBar
  var currentIndex = 0.obs;

  // Tab index for specific screens
  var currentTabIndex = 0.obs;

  // Switch between BottomNavigationBar pages
  void changePage(int index) {
    currentIndex.value = index;
    currentTabIndex.value = 0;  // Reset tabs when switching pages
  }

  // Switch between tabs within Home or other pages
  void changeTab(int index) {
    currentTabIndex.value = index;
  }
}
4. Create the Views

Each view will represent a screen in your Dashboard, and in the case of HomeView, it will include a TabBar.

  • Dashboard View (Main Entry Point)

dart

// views/dashboard_view.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/dashboard_controller.dart';
import 'home_view.dart';
import 'profile_view.dart';
import 'settings_view.dart';

class DashboardView extends StatelessWidget {
  final DashboardController controller = Get.put(DashboardController());

  final List<Widget> pages = [
    HomeView(),
    ProfileView(),
    SettingsView(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Dashboard")),
      body: Obx(() => pages[controller.currentIndex.value]),
      bottomNavigationBar: Obx(() => BottomNavigationBar(
        currentIndex: controller.currentIndex.value,
        onTap: controller.changePage,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "Profile"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Settings"),
        ],
      )),
    );
  }
}
  • Home View with TabBar

dart

// views/home_view.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/dashboard_controller.dart';

class HomeView extends StatelessWidget {
  final DashboardController controller = Get.find();

  final List<Widget> tabs = [
    Center(child: Text('Home Tab 1')),
    Center(child: Text('Home Tab 2')),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TabBar(
          onTap: controller.changeTab,
          tabs: const [
            Tab(text: "Tab 1"),
            Tab(text: "Tab 2"),
          ],
        ),
        Expanded(
          child: Obx(() => tabs[controller.currentTabIndex.value]),
        ),
      ],
    );
  }
}
  • Profile View

dart

// views/profile_view.dart
import 'package:flutter/material.dart';

class ProfileView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Profile"));
  }
}
  • Settings View

dart

// views/settings_view.dart
import 'package:flutter/material.dart';

class SettingsView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Settings"));
  }
}
5. Main Entry Point (main.dart)

In your main.dart, the DashboardView will be the entry point for your app.

dart

// main.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'views/dashboard_view.dart';

void main() {
  runApp(GetMaterialApp(home: DashboardView()));
}
6. How It Works

  • DashboardController manages the navigation state for both the BottomNavigationBar and the TabBar.

  • HomeView contains a TabBar and uses Obx to listen for changes in the tab index.

  • ProfileView and SettingsView display their respective pages when selected from the Bottom Navigation Bar.

  • All navigation logic is centralized in DashboardController, which makes it easy to manage and extend later (e.g., adding more tabs or bottom navigation items).

7. Customizing Your Dashboard

Now that you have a fully working dashboard:

  • Add more screens: You can easily add more views to the pages list in the DashboardView and add corresponding items in the BottomNavigationBar.

  • Deep Linking: If you want to integrate deep linking (navigating to specific tabs directly), you can use Get.to() or Get.off() methods with routes.