Flutter: Persistent Bottom Nav Bar Item Dialog Box

Question

I have a persistent bottom nav bar implementation. Is it possible that when switching to a nav bar item, show a dialog box? From the outcome of the dialog box decide whether to push to another screen or push through to the original bottom nav bar item? If possible, how? Thanks!

Answer 1

Here's your solution.

So, this is the output of the below-mentioned source code: View

Source code:

import "package:flutter/material.dart";
import "package:myapp/new_screen.dart";
import "package:persistent_bottom_nav_bar/persistent_tab_view.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PersistentTabController controller = PersistentTabController();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: PersistentTabView(
        context,
        controller: controller,
        screens: const <Widget>[
          Center(child: Text("Tab 0")),
          Center(child: Text("Tab 1")),
        ],
        items: <PersistentBottomNavBarItem>[
          PersistentBottomNavBarItem(icon: const Text("Tab 0")),
          PersistentBottomNavBarItem(icon: const Text("Tab 1")),
        ],
        onItemSelected: (int value) async {
          if (controller.index == 0) {
          } else {
            await openDialog();
          }
        },
      ),
    );
  }

  Future<void> openDialog() async {
    await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text("Choose"),
          content: const Text("What action do you want to perform?"),
          actions: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop();
                controller.index = 0;
              },
              child: const Text("Switch back to Tab 0"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop();
                final MaterialPageRoute<void> route = MaterialPageRoute<void>(
                  builder: (BuildContext context) {
                    return const NewScreen();
                  },
                );
                Navigator.of(context).push(route);
              },
              child: const Text("Switch to a new screen"),
            )
          ],
        );
      },
    );
    return Future<void>.value();
  }
}