I am working on a Flutter app where I have a Drawer and a top AppBar. The body content changes based on the navigation, but I want the URL to change accordingly when I navigate between pages (e.g., /home, /settings). I am using GetX for state management and navigation.

The code I have currently is working to show the appropriate page content without refreshing the Drawer or the AppBar. However, the URL does not change when I switch between pages.

Here is the code I have so far:

import 'package:get/get.dart';

void main() {
  Get.put(ShellController());
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ShellScreen(),
    );
  }
}

class ShellController extends GetxController {
  final _currentPage = Rx<Widget>(HomeView());
  Widget get currentPage => _currentPage.value;

  void changePage(Widget page) {
    _currentPage.value = page;
  }
}

class ShellScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ShellController controller = Get.find();
    return Scaffold(
      appBar: AppBar(title: Text('App')),
      drawer: MyDrawer(),
      body: Obx(() => controller.currentPage),
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ShellController controller = Get.find();
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: Text('Home'),
            onTap: () {
              controller.changePage(HomeView());
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('Settings'),
            onTap: () {
              controller.changePage(SettingsView());
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Page'));
  }
}

class SettingsView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Settings Page'));
  }
}

How can I modify this so that when I navigate to a new page (like Home or Settings), the URL changes accordingly (e.g., /home, /settings)? I want to achieve this without refreshing the top bar or drawer. Can anyone help me with this?

I am working on a Flutter app where I have a Drawer and a top AppBar. The body content changes based on the navigation, but I want the URL to change accordingly when I navigate between pages (e.g., /home, /settings). I am using GetX for state management and navigation.

The code I have currently is working to show the appropriate page content without refreshing the Drawer or the AppBar. However, the URL does not change when I switch between pages.

Here is the code I have so far:

import 'package:get/get.dart';

void main() {
  Get.put(ShellController());
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ShellScreen(),
    );
  }
}

class ShellController extends GetxController {
  final _currentPage = Rx<Widget>(HomeView());
  Widget get currentPage => _currentPage.value;

  void changePage(Widget page) {
    _currentPage.value = page;
  }
}

class ShellScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ShellController controller = Get.find();
    return Scaffold(
      appBar: AppBar(title: Text('App')),
      drawer: MyDrawer(),
      body: Obx(() => controller.currentPage),
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ShellController controller = Get.find();
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: Text('Home'),
            onTap: () {
              controller.changePage(HomeView());
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('Settings'),
            onTap: () {
              controller.changePage(SettingsView());
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Page'));
  }
}

class SettingsView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Settings Page'));
  }
}

How can I modify this so that when I navigate to a new page (like Home or Settings), the URL changes accordingly (e.g., /home, /settings)? I want to achieve this without refreshing the top bar or drawer. Can anyone help me with this?

• flutter
• flutter-getx
• flutter-navigation
• flutter-drawer

1 Answer 1

I could not find GetMaterialApp. So, use GetMaterialApp instead of MaterialApp. In addition to this, you need to utilize GetX route management to handle URL changes.

Find the updated code below. There was some issue with the routing.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: '/home', // Initial route
      getPages: [
        // Define your routes here
        GetPage(name: '/home', page: () => const HomeView()),
        GetPage(name: '/settings', page: () => const SettingsView()),
      ],
    );
  }
}

class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      drawer:
          const MyDrawer(), // Add the drawer here to be shown on the Home screen
      body: const Center(
        child: Text('Home Page'),
      ),
    );
  }
}

class MyDrawer extends StatelessWidget {
  const MyDrawer({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: const Text('Home'),
            onTap: () {
              // Navigate to the home route
              Get.offNamed(
                  '/home'); // Use Get.offNamed for Home to remove the current route from the stack
              Navigator.pop(context); // Close the drawer
            },
          ),
          ListTile(
            title: const Text('Settings'),
            onTap: () {
              // Navigate to the settings route
              Get.toNamed(
                  '/settings'); // Use Get.toNamed to navigate to Settings
            },
          ),
        ],
      ),
    );
  }
}

class SettingsView extends StatelessWidget {
  const SettingsView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings Page'),
      ),
      body: const Center(child: Text('Settings Page')),
    );
  }
}