iOS style fullscreen nested navigation #67

huahua8893 · 2024-02-28T02:50:31Z

huahua8893
Feb 28, 2024

Really great work and package, I'm trying to achieve the following effect:

RPReplay_Final1709087797.MP4

Two "CupertinoModalSheetPage" nested "NavigationSheet", like this pseudocode but not work:

Am I do it wrong or this is a Feature request

Answered by fujidaiti

Mar 5, 2024

Here is my solution for the sheet in the video you posted.

Code

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CupertinoStackedTransition(
        child: Scaffold(
          body: Center(
            child: Builder(
              builder: (context) {
                return FilledButton(
                  onPressed: () {
                    showFullscreenNestedNavigationSheet(context);
                  },
                  child: const T…

View full answer

fujidaiti · 2024-02-28T12:13:18Z

fujidaiti
Feb 28, 2024
Maintainer

Two "CupertinoModalSheetPage" nested "NavigationSheet", like this pseudocode but not work:

Can you explain in more detail how your code did not work?

By the way, you don't even need to use the NavigationSheet to create a sheet like the one in the video. NavigationSheet is a sheet that animates its height during a page transition, like the AI Playlist Generator example. However, the sheet you are referring to is always full-screen, so a simpler approach could be using a DraggableSheet and a Navigator inside it.

// Use this instead of the NavigationSheet in your pseudocode.
DraggableSheet(
  child: Navigator(...),
);

If your sheet has both scrollable and non-scrollable widgets, you may want to use the ScrollableSheet with the SheetDraggable instead:

ScrollableSheet(
  child: SheetDraggable(
    child: Navigator(...),
  ),
);

0 replies

huahua8893 · 2024-02-29T02:17:45Z

huahua8893
Feb 29, 2024
Author

Thank you for reply this! I will try later and response

0 replies

huahua8893 · 2024-03-05T07:22:00Z

huahua8893
Mar 5, 2024
Author

Sorry for the delay, and sorry for this silly question, I modified "cupertino_modal_sheet.dart" like this but not worked, I think I use it in a wrong way:

import 'package:flutter/cupertino.dart';
import 'package:smooth_sheets/smooth_sheets.dart';

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

class _CupertinoModalSheetExample extends StatelessWidget {
  const _CupertinoModalSheetExample();

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

class _ExampleHome extends StatelessWidget {
  const _ExampleHome();

  @override
  Widget build(BuildContext context) {
    return CupertinoStackedTransition(
      cornerRadius: Tween(begin: 0.0, end: 16.0),
      child: CupertinoPageScaffold(
        child: Center(
          child: CupertinoButton.filled(
            onPressed: () => _showModalSheet(context, isFullScreen: false),
            child: const Text('Show Modal Sheet'),
          ),
        ),
      ),
    );
  }
}

void _showModalSheet(BuildContext context, {required bool isFullScreen}) {

  Route modalRoute = CupertinoModalSheetRoute(
    transitionCurve: Curves.easeInOut,
    builder: (context) => ScrollableSheet(
      child: SheetDraggable(
        child: Navigator(
          observers: [NavigationSheetTransitionObserver()],
          onGenerateInitialRoutes: (navigator, initialRoute) {
            return [
              CupertinoModalSheetRoute(
                builder: (context) {
                  return const _FullScreenSheet();
                },
              ),
            ];
          },
        ),
      ),
    ),
  );
  
  Navigator.push(context, modalRoute);
}

class _FullScreenSheet extends StatelessWidget {
  const _FullScreenSheet();

  @override
  Widget build(BuildContext context) {
    return const DraggableSheet(
      child: _SheetContent(),
    );
  }
}

class _SheetContent extends StatelessWidget {
  const _SheetContent();

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: const ShapeDecoration(
        color: CupertinoColors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(16),
          ),
        ),
      ),
      child: SizedBox.expand(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              CupertinoButton.filled(
                onPressed: () {
                  DefaultSheetController.maybeOf(context)?.animateTo(const Extent.proportional(1));
                  _showModalSheet(context, isFullScreen: true);
                },
                child: const Text('Stack'),
              ),
              const SizedBox(height: 16),
              CupertinoButton(
                onPressed: () => Navigator.pop(context),
                child: const Text('Close'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I think I should't use 'DraggableSheet' or 'ScrollableSheet' in this case, assuming there are 3 pages, Page A->Page B->Page C

What I'm trying to do is that Page A is CupertinoModalSheetRoute, Page B is also CupertinoModalSheetRoute, but Page C is like CupertinoPageRoute which can be "navigated in Page B", just like the video, could you please provide a simple code example?

0 replies

fujidaiti · 2024-03-05T14:06:13Z

fujidaiti
Mar 5, 2024
Maintainer

Here is my solution for the sheet in the video you posted.

Code

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CupertinoStackedTransition(
        child: Scaffold(
          body: Center(
            child: Builder(
              builder: (context) {
                return FilledButton(
                  onPressed: () {
                    showFullscreenNestedNavigationSheet(context);
                  },
                  child: const Text('Show Sheet'),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

void showFullscreenNestedNavigationSheet(BuildContext context) {
  final route = CupertinoModalSheetRoute(
    builder: (context) {
      return const SheetDismissible(
        child: FullscreenNestedNavigationSheet(),
      );
    },
  );

  Navigator.push(context, route);
}

final transitionObserver = NavigationSheetTransitionObserver();

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

  @override
  Widget build(BuildContext context) {
    final sheetContent = ColoredBox(
      color: Theme.of(context).colorScheme.surface,
      // Create a nested navigator
      child: Navigator(
        observers: [transitionObserver],
        onGenerateInitialRoutes: (navigator, initialRoute) => [
          // Or use a DraggableNavigationSheetRoute.
          ScrollableNavigationSheetRoute(
            builder: (_) => const ExamplePage(depth: 0),
          ),
        ],
      ),
    );

    return NavigationSheet(
      transitionObserver: transitionObserver,
      child: sheetContent,
    );
  }
}

/// A page shown in the NavigationSheet.
class ExamplePage extends StatelessWidget {
  const ExamplePage({
    super.key,
    required this.depth,
  });

  final int depth;

  @override
  Widget build(BuildContext context) {
    // Do not wrap this Scaffold with a sheet such as ScrollableSheet
    // since it is already wrapped in a NavigationSheet and the sheets
    // can't be nested within each other.
    return Scaffold(
      appBar: AppBar(
        title: Text('Depth: $depth'),
      ),
      body: ListView.builder(
        itemCount: 50,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
            onTap: () {
              Navigator.of(context).push(
                // Or use a DraggableNavigationSheetRoute.
                ScrollableNavigationSheetRoute(
                  builder: (context) => ExamplePage(depth: depth + 1),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Result

RocketSim_Recording_iPhone_15_6.1_2024-03-05_22.48.04.mp4

What I'm trying to do is that Page A is CupertinoModalSheetRoute, Page B is also CupertinoModalSheetRoute, but Page C is like CupertinoPageRoute which can be "navigated in Page B", just like the video

For this situation, the widget tree of your app will probably look like the following:

Navigator (root)
  - HomePage (in MaterialPageRoute or something)
  - PageA (in CupertinoModalSheetRoute)
  - NavigationSheet (in CupertinoModalSheetRoute)
    - Navigator (nested)
        - PageB (in ScrollableNavigationSheetRoute or DraggableNavigationSheetRoute)
        - PageC (in ScrollableNavigationSheetRoute or DraggableNavigationSheetRoute)
        ...

The PageA can be a DraggableSheet or a ScrollableSheet, or even a NavigationSheet depending on your specific needs.

5 replies

DJWassink Jun 10, 2024

Any idea how this might be possible to achieve with an declarative router? (go_router)

I did get it partially but the body of the sheet slides in from the bottom instead of the side. This was without the usage of a NavigationSheet since using it results in a error "The sheet and the dimensions values must be finalized during the layout phase." So I'm probably implementing it wrong.

After taking a good look at the AI playlist cookbook example I came up with the following:

code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:smooth_sheets/smooth_sheets.dart';

// The code may seem verbose, but the core principle is straightforward.
// In this tutorial, you only need to learn the following:
//
// 1. Create a Navigator and wrap it in a NavigationSheet.
// 2. Use *NavigationSheetPage to create a page that belongs to the navigator.
// 3. Do not forget to register a NavigationSheetTransitionObserver to the navigator.
void main() {
  runApp(const _DeclarativeNavigationSheetExample());
}

class _DeclarativeNavigationSheetExample extends StatelessWidget {
  const _DeclarativeNavigationSheetExample();

  @override
  Widget build(BuildContext context) {
    return CupertinoApp.router(routerConfig: router);
  }
}

class _Root extends StatelessWidget {
  const _Root();

  @override
  Widget build(BuildContext context) {
    return CupertinoStackedTransition(
      cornerRadius: Tween(begin: 0.0, end: 16.0),
      child: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          middle: Text('Home page'),
        ),
        child: SafeArea(
          child: Center(
            child: ElevatedButton(
              onPressed: () => context.go('/intro'),
              child: const Text('Open modal'),
            ),
          ),
        ),
      ),
    );
  }
}

class _SheetShell extends StatelessWidget {
  const _SheetShell({
    required this.transitionObserver,
    required this.navigator,
  });

  final NavigationSheetTransitionObserver transitionObserver;
  final Widget navigator;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: NavigationSheet(
        transitionObserver: sheetTransitionObserver,
        child: Material(
          // Add circular corners to the sheet.
          borderRadius: BorderRadius.circular(16),
          clipBehavior: Clip.antiAlias,
          color: Theme.of(context).colorScheme.surface,
          child: navigator,
        ),
      ),
    );
  }
}

class _IntroPage extends StatelessWidget {
  const _IntroPage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        leading: IconButton(
          onPressed: () => context.go('/'),
          icon: const Icon(Icons.close),
        ),
        middle: const Text('Intro'),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 32,
            vertical: 8,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                "Hello there!\n"
                "I'm your AI music assistant. "
                "Ready to create the perfect playlist for you. 😊",
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 64),
              FilledButton(
                onPressed: () => context.go('/intro/genre'),
                child: const Text('Continue'),
              ),
              const SizedBox(height: 16),
              TextButton(
                onPressed: () => context.go('/'),
                child: const Text('No, thanks'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

const _genres = [
  'Pop',
  'Rock',
  'Hip Hop',
  'R&B',
  'Country',
  'Jazz',
  'Classical',
  'Electronic',
  'Folk',
  'Reggae',
  'Blues',
  'Metal',
  'Punk',
  'Disco',
  'Funk',
  'Soul',
  'Techno',
  'House',
  'Ambient',
  'Indie',
  'Alternative',
  'K-Pop',
  'Latin',
];

class _SelectGenrePage extends StatelessWidget {
  const _SelectGenrePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CupertinoNavigationBar(
        middle: Text('Genre'),
      ),
      // Wrap the body in a SingleChildScrollView to prevent
      // the content from overflowing on small screens.
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(
          vertical: 8,
          horizontal: 32,
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              'What genre do you like? (1/3)',
            ),
            const SizedBox(height: 24),
            Wrap(
              spacing: 10,
              children: [
                for (final genre in _genres)
                  ElevatedButton(
                    onPressed: () => {},
                    child: Text(genre),
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const _Root(),
      routes: [_sheetShellRoute],
    ),
    GoRoute(
      path: '/test',
      builder: (context, state) => const _Root(),
      routes: [_sheetShellRoute],
    ),
  ],
);

final sheetTransitionObserver = NavigationSheetTransitionObserver();
// A ShellRoute is used to create a new Navigator for nested navigation in the sheet.
final _sheetShellRoute = ShellRoute(
  observers: [sheetTransitionObserver],
  pageBuilder: (context, state, navigator) {
    // Use ModalSheetPage to show a modal sheet.
    return CupertinoModalSheetPage(
      fullscreenDialog: true,
      swipeDismissible: true,
      child: _SheetShell(
        navigator: navigator,
        transitionObserver: sheetTransitionObserver,
      ),
    );
  },
  routes: [_introRoute],
);

final _introRoute = GoRoute(
  path: 'intro',
  pageBuilder: (context, state) {
    return const DraggableNavigationSheetPage(
      child: _IntroPage(),
    );
  },
  routes: [_genreRoute],
);

final _genreRoute = GoRoute(
  path: 'genre',
  pageBuilder: (context, state) {
    return const DraggableNavigationSheetPage(
      child: _SelectGenrePage(),
    );
  },
  // routes: [_moodRoute],
);

The only issue I'm running against is that the CupertinoStackedTransition isn't working. Maybe that has something to do with the ShellRoute?

fujidaiti Jun 11, 2024
Maintainer

@DJWassink

I created a simplified version to reproduce the problem, and I confirmed that it is a bug specific to NavigationSheet. I'll take a closer look at it this weekend, thanks for reporting!

Here's the code I tried:

Code

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:smooth_sheets/smooth_sheets.dart';

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

final transitionObserver = NavigationSheetTransitionObserver();

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
        path: '/',
        builder: (context, state) {
          return const _Home();
        },
        routes: [
          ShellRoute(
            observers: [transitionObserver],
            pageBuilder: (context, state, child) {
              return CupertinoModalSheetPage(
                key: state.pageKey,
                child: _Modal(nestedNavigator: child),
              );
            },
            routes: [
              GoRoute(
                path: 'modal',
                pageBuilder: (context, state) {
                  return DraggableNavigationSheetPage(
                    key: state.pageKey,
                    child: const _ModalContent(),
                  );
                },
              ),
            ],
          )
        ]),
  ],
);

class _App extends StatelessWidget {
  const _App();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(routerConfig: router);
  }
}

class _Home extends StatelessWidget {
  const _Home();

  @override
  Widget build(BuildContext context) {
    return CupertinoStackedTransition(
      child: Scaffold(
        body: Center(
          child: TextButton(
            onPressed: () => context.go('/modal'),
            child: const Text('Show Sheet'),
          ),
        ),
      ),
    );
  }
}

class _Modal extends StatelessWidget {
  const _Modal({
    required this.nestedNavigator,
  });

  final Widget nestedNavigator;

  @override
  Widget build(BuildContext context) {
    return NavigationSheet(
      transitionObserver: transitionObserver,
      child: Material(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
        clipBehavior: Clip.antiAlias,
        child: nestedNavigator,
      ),
    );

    // The following code works fine.

    // return DraggableSheet(
    //   child: Container(
    //     color: Colors.white,
    //     width: double.infinity,
    //     height: 700,
    //   ),
    // );
  }
}

class _ModalContent extends StatelessWidget {
  const _ModalContent();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      width: double.infinity,
      height: 700,
    );
  }
}

The result:

RocketSim_Recording_iPhone_15_6.1_2024-06-11_20.56.26.mp4

fujidaiti Jun 11, 2024
Maintainer

Now it is tracked by #168.

DJWassink Jun 11, 2024

Thanks for the awesome library ❤️ looking forward to the fix.

fujidaiti Jun 22, 2024
Maintainer

Fixed in v0.8.1.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iOS style fullscreen nested navigation #67

{{title}}

Replies: 4 comments 5 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

iOS style fullscreen nested navigation #67

huahua8893 Feb 28, 2024

Replies: 4 comments · 5 replies

fujidaiti Feb 28, 2024 Maintainer

huahua8893 Feb 29, 2024 Author

huahua8893 Mar 5, 2024 Author

fujidaiti Mar 5, 2024 Maintainer

DJWassink Jun 10, 2024

fujidaiti Jun 11, 2024 Maintainer

fujidaiti Jun 11, 2024 Maintainer

DJWassink Jun 11, 2024

fujidaiti Jun 22, 2024 Maintainer

huahua8893
Feb 28, 2024

Replies: 4 comments 5 replies

fujidaiti
Feb 28, 2024
Maintainer

huahua8893
Feb 29, 2024
Author

huahua8893
Mar 5, 2024
Author

fujidaiti
Mar 5, 2024
Maintainer

fujidaiti Jun 11, 2024
Maintainer

fujidaiti Jun 11, 2024
Maintainer

fujidaiti Jun 22, 2024
Maintainer