How to push new views inside the modal bottom sheet using "modal_bottom_sheet"

Question

Thank you for reading. What I want to do is to navigate to a new Cupertino half Modal BottomSheet from the Cupertino half Modal BottomSheet.

This is the package I am using to create Cupertino modal. modal_bottom_sheet 3.0.0-pre

My goal is to create a smooth transition inside the modal sheet like this but half modal.

Version Flutter 3.16.0

I tried some thing like this, but it wouldn't work as I expected. It creates a full page AddProductView() not a bottom modal.

What I tried (1) in the main view.

showCupertinoModalBottomSheet(
  expand: false,
  context: context,
  backgroundColor: Colors.transparent,
  builder: (context) {
    return Navigator(
      onGenerateRoute: (context) => MaterialPageRoute(
        builder: (context) => ShowMordal(),
      ),
    );
  },
);

What I tried (2)

Navigator.push(context, MaterialPageRoute(builder: (context) {
   return ShowMordal();
}));

Also, this is my Myapp function

Widget build(BuildContext context) {
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
  return MaterialApp(
  title: 'Flutter Demo',
  initialRoute: MainView.routeName,
  onGenerateRoute: (RouteSettings settings) {
    switch (settings.name) {
      case MainView.routeName:
        return MaterialWithModalsPageRoute(
          builder: (context) => const MainView(),
          settings: settings,
        );
    }
  },
);
}

If anyone can help, Thank you .

Answer 1

hello try this one,

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(platform: TargetPlatform.iOS),
      darkTheme: ThemeData.dark().copyWith(platform: TargetPlatform.iOS),
      onGenerateRoute: (RouteSettings settings) {
        return MaterialPageRoute(
          builder: (context) => Scaffold(
            body: CupertinoScaffold(
              body: Builder(
                builder: (context) => CupertinoPageScaffold(
                  navigationBar: const CupertinoNavigationBar(
                    transitionBetweenRoutes: false,
                    middle: Text(
                      'Normal Navigation Presentation',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                  child: Center(
                    child: GestureDetector(
                      onTap: () =>
                          CupertinoScaffold.showCupertinoModalBottomSheet(
                        context: context,
                        backgroundColor: Theme.of(context).cardColor,
                        builder: (context) => const ModalWithNavigator(),
                      ),
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.circular(25),
                        ),
                        padding: const EdgeInsets.all(15),
                        child: const Text(
                          "Click This Button",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 25,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          settings: settings,
        );
      },
      debugShowCheckedModeBanner: false,
    );
  }
}

Here, you should use Navigator Widget for inside navigation;

class ModalWithNavigator extends StatelessWidget {
  const ModalWithNavigator({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext rootContext) {
    return Material(
      child: Navigator( // ATTENTION HERE
        onGenerateRoute: (_) => MaterialPageRoute(
          builder: (context2) => Builder(
            builder: (context) => CupertinoPageScaffold(
              navigationBar: const CupertinoNavigationBar(
                backgroundColor: Color.fromRGBO(33, 33, 33, 1.0),
                middle: Text(
                  'Modal Page',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              child: SafeArea(
                bottom: false,
                child: ListView(
                  shrinkWrap: true,
                  controller: ModalScrollController.of(context),
                  children: ListTile.divideTiles(
                    context: context,
                    tiles: List.generate(
                        100,
                        (index) => ListTile(
                              title: const Text('Click To Navigate'),
                              onTap: () {
                                Navigator.of(context).push(
                                  MaterialPageRoute(
                                    builder: (context) => CupertinoPageScaffold(
                                      navigationBar:
                                          const CupertinoNavigationBar(
                                        backgroundColor:
                                            Color.fromRGBO(33, 33, 33, 1.0),
                                        middle: Text(
                                          'New Page',
                                          style: TextStyle(
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                      child: Center(
                                        child: GestureDetector(
                                          onTap: () =>
                                              Navigator.of(rootContext).pop(),
                                          child: Container(
                                            decoration: BoxDecoration(
                                              color: Colors.red,
                                              borderRadius:
                                                  BorderRadius.circular(25),
                                            ),
                                            padding: const EdgeInsets.all(15),
                                            child: const Text(
                                              'Close Here',
                                              style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 25,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            )),
                  ).toList(),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}