Question 347915 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter : showModalBottomSheet above bottomNavigationBar natively

i want to show showModalBottomSheet above bottomNavigationBar natively without Stack or any other custom widget

currently this is my code

body: Navigator(
onGenerateRoute: (settings) {
 return MaterialPageRoute(
  builder: (context) {
    return ListView(
     children: [
       TextButton( 
        onPressed: () {
         showModalBottomSheet( <-- Triggered from this inside `Navigator`
          useRootNavigator: false,
          context: context,
          builder: (_) => const SizedBox(
            height: 200,
            child: Text(
             'Modal bottom sheet',
             style: TextStyle(fontSize: 30),
          ),
         ),
        );
       },
       child: CustomText().darkGrey(
        txt: 'Add to wishlist',
        size: 17,
       ),
      ),
      const DetailProductStoreName(),
     ],
    );
   },
  );
 },
),
bottomNavigationBar: AddToCartBottomNav(), <--what i expect is triggered within 'bottomNavigationBar'

left pict when triggered within body -> Navigator -> MaterialPageRoute

right pict when triggered within bottomNavigationBar

Triggered from Body enter image description here

what i expect is showModalBottomSheet triggered from bottomNavigationBar and modalSheet can show above Add to Cart button just like on left pict

Tags:

2

Answers


  1. 0

    It’s work for me

    Scaffold(
  appBar: AppBar(
    title: Text('Your Title'),
  ),
  body: ListView(
    children: [
      TextButton(
        onPressed: () {
          showModalBottomSheet(
            context: context,
            builder: (_) => SizedBox(
              height: 200,
              child: Center(
                child: Text(
                  'Modal bottom sheet',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
          );
        },
        child: Text('Show Modal Bottom Sheet'),
      ),
      const DetailProductStoreName(),
    ],
  ),
  bottomNavigationBar: Builder(
    builder: (BuildContext context) {
      return BottomAppBar(
        child: Row(
          children: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                // Use the context from Builder to show modal bottom sheet
                showModalBottomSheet(
                  context: context,
                  builder: (_) => SizedBox(
                    height: 200,
                    child: Center(
                      child: Text(
                        'Modal bottom sheet from BottomNavigationBar',
                        style: TextStyle(fontSize: 30),
                      ),
                    ),
                  ),
                );
              },
            ),
            // Add other bottom navigation items as needed
          ],
        ),
      );
    },
  ),
);
    Login or Signup to reply.
  2. 0 
    import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bottom Sheet Example'),
      ),
      body: ListView(
        children: [
          ListTile(
            title: Container(
                padding: const EdgeInsets.all(12), color: Colors.amber, child: const Text('Show Bottom Sheet')),
            onTap: () {
              _showBottomSheet(context);
            },
          ),
          const ListTile(
            title: Text('Item 1'),
          ),
          const ListTile(
            title: Text('Item 2'),
          ),
          const ListTile(
            title: Text('Item 3'),
          ),
          const ListTile(
            title: Text('Item 4'),
          ),
          const ListTile(
            title: Text('Item 5'),
          ),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          color: Colors.cyan,
          height: 50.0,
          child: const Center(
            child: Text('Bottom Navigation Bar: Add to cart '),
          ),
        ),
      ),
    );
  }

  void _showBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return const SizedBox(
          height: 200,
          child: Center(
            child: Text(
              'Modal bottom sheet',
              style: TextStyle(fontSize: 30),
            ),
          ),
        );
      },
    );
  }
}

    In this code:

    • I’ve replaced the Navigator with a simple ListView containing some
      ListTile widgets.
    • The showModalBottomSheet function is called when the user taps on the
      "Show Bottom Sheet" list tile.
    • The bottomNavigationBar is a BottomAppBar widget that stays at the
      bottom of the screen.
    • When the bottom sheet is shown, it appears above the BottomAppBar and
      doesn’t overlap with it.

    OutPut 1
    OutPut 2

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search