Cookbook - How to show modalsheet above existing modalsheet #85

QuentinSc · 2024-03-31T20:28:54Z

QuentinSc
Mar 31, 2024

Hello,

This package is awesome! It would be perfect for me if I could find a way to implement the following use case in the Ai Playlist Generator:

I would like to have a button that opens a new ModalSheet (imperatively or declaratively) during a step. Perhaps this ModalSheet could contain an image gallery. The user could select an image from the gallery and then close the ModalSheet to return to the initial sheet.

I'm unable to handle this case without encountering the error:

_AssertionError ('package:smooth_sheets/src/foundation/framework.dart': Failed assertion: line 125 pos 7: '_extent.hasPixels': The sheet extent and the dimensions values must be finalized during the layout phase.)

Thank you !

Answered by QuentinSc

Apr 27, 2024

For those who, like me, find GoRouter documentation somewhat unclear, here's the small change I added to properly display the Modal route.

QuentinSc@fe34d50

View full answer

fujidaiti · 2024-04-01T04:25:02Z

fujidaiti
Apr 1, 2024
Maintainer

Could you post a code snippet related to the problem?

0 replies

QuentinSc · 2024-04-01T07:22:53Z

QuentinSc
Apr 1, 2024
Author

Hello,I didn't do it because I suspect that I'm going about it the wrong way.
Here you can find the ai_playlist_generator.dart with a new route 'modal'.
The modal show correctly if called from the button "Generate Playlist"
But got the error if I'm calling if from the button 'Open modal' (bottom of the intro step)

Code - Click to expand

import 'dart:io';

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

void main() {
  // Make the system navigation bar transparent on Android.
  if (Platform.isAndroid) {
    WidgetsFlutterBinding.ensureInitialized();
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.edgeToEdge,
      overlays: [SystemUiOverlay.top],
    ).then((_) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
        systemNavigationBarColor: Colors.transparent,
        systemNavigationBarDividerColor: Colors.transparent,
      ));
    });
  }

  runApp(const _AiPlaylistGeneratorExample());
}

class _AiPlaylistGeneratorExample extends StatelessWidget {
  const _AiPlaylistGeneratorExample();

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

// ----------------------------------------------------------
// Routes
// ----------------------------------------------------------

final sheetTransitionObserver = NavigationSheetTransitionObserver();

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

final _modal = GoRoute(
  path: 'modal',
  pageBuilder: (context, state) => ModalSheetPage(
      child: SheetDismissible(
    child: DraggableSheet(
      child: Card(
        color: Theme.of(context).colorScheme.secondaryContainer,
        margin: EdgeInsets.zero,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: const SizedBox(
          height: 500,
          width: double.infinity,
        ),
      ),
    ),
  )),
);

// 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 ModalSheetPage(
      child: _SheetShell(
        navigator: navigator,
        transitionObserver: sheetTransitionObserver,
      ),
    );
  },
  routes: [_introRoute, _modal],
);

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],
);

final _moodRoute = GoRoute(
  path: 'mood',
  pageBuilder: (context, state) {
    return const DraggableNavigationSheetPage(child: _SelectMoodPage());
  },
  routes: [_seedTrackRoute],
);

final _seedTrackRoute = GoRoute(
  path: 'seed-track',
  pageBuilder: (context, state) {
    return const ScrollableNavigationSheetPage(child: _SelectSeedTrackPage());
  },
  routes: [_confirmRoute],
);

final _confirmRoute = GoRoute(
  path: 'confirm',
  pageBuilder: (context, state) {
    return const ScrollableNavigationSheetPage(
      initialExtent: Extent.proportional(0.7),
      minExtent: Extent.proportional(0.7),
      physics: StretchingSheetPhysics(
        parent: SnappingSheetPhysics(),
      ),
      child: _ConfirmPage(),
    );
  },
  routes: [_generateRoute],
);

final _generateRoute = GoRoute(
  path: 'generate',
  pageBuilder: (context, state) {
    return const DraggableNavigationSheetPage(child: _GeneratingPage());
  },
);

// ----------------------------------------------------------
// Pages
// ----------------------------------------------------------

class _Root extends StatelessWidget {
  const _Root();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ElevatedButton(
        onPressed: () => context.go('/intro'),
        child: const Text('Generate Playlist'),
      ),
    ));
  }
}

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

  final NavigationSheetTransitionObserver transitionObserver;
  final Widget navigator;

  @override
  Widget build(BuildContext context) {
    void showCancelDialog() {
      showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text('Are you sure?'),
            content:
                const Text('Do you want to cancel the playlist generation?'),
            actions: [
              TextButton(
                onPressed: () => context.go('/'),
                child: const Text('Yes'),
              ),
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: const Text('No'),
              ),
            ],
          );
        },
      );
    }

    return SafeArea(
      bottom: false,
      // Wrap the sheet in a SheetDismissible to enable pull-to-dismiss action.
      child: SheetDismissible(
        // This callback is invoked when the user tries
        // to dismiss the sheet by dragging it down.
        onDismiss: () {
          // Prompt the user to confirm if they want to dismiss the sheet.
          showCancelDialog();
          // Returns false to disable automatic modal sheet popping.
          return 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 SheetContentScaffold(
      appBar: _SharedAppBarHero(
        appbar: AppBar(
          leading: IconButton(
            onPressed: () => context.go('/'),
            icon: const Icon(Icons.close),
          ),
        ),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 32,
            vertical: 8,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                "Hello there!\n"
                "I'm your AI music assistant. "
                "Ready to create the perfect playlist for you. 😊",
                textAlign: TextAlign.center,
                style: Theme.of(context).textTheme.headlineMediumBold,
              ),
              const SizedBox(height: 64),
              FilledButton(
                onPressed: () => context.go('/intro/genre'),
                style: _largeFilledButtonStyle,
                child: const Text('Continue'),
              ),
              const SizedBox(height: 16),
              TextButton(
                onPressed: () => context.go('/modal'),
                style: _largeTextButtonStyle,
                child: const Text('Open modal'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _SelectGenrePage extends StatelessWidget {
  const _SelectGenrePage();

  @override
  Widget build(BuildContext context) {
    return SheetContentScaffold(
      appBar: _SharedAppBarHero(appbar: AppBar()),
      // 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: [
            Text(
              'What genre do you like? (1/3)',
              style: Theme.of(context).textTheme.headlineMediumBold,
            ),
            const SizedBox(height: 24),
            Wrap(
              spacing: 10,
              children: [
                for (final genre in _genres)
                  _SelectableChip(
                    label: Text(genre),
                  ),
              ],
            ),
          ],
        ),
      ),
      bottomBar: _BottomActionBar(
        label: 'Next',
        onPressed: () => context.go('/intro/genre/mood'),
      ),
    );
  }
}

class _SelectMoodPage extends StatelessWidget {
  const _SelectMoodPage();

  @override
  Widget build(BuildContext context) {
    return SheetContentScaffold(
      appBar: _SharedAppBarHero(appbar: AppBar()),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.only(top: 8, bottom: 24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 32),
                child: Text(
                  'What kind of mood are you aiming for in this playlist? (2/3)',
                  style: Theme.of(context).textTheme.headlineMediumBold,
                ),
              ),
              const SizedBox(height: 24),
              const Padding(
                padding: EdgeInsets.only(left: 16),
                child: _SelectableMoodList(),
              ),
            ],
          ),
        ),
      ),
      bottomBar: _BottomActionBar(
        label: 'Next',
        onPressed: () => context.go('/intro/genre/mood/seed-track'),
      ),
    );
  }
}

class _SelectSeedTrackPage extends StatelessWidget {
  const _SelectSeedTrackPage();

  @override
  Widget build(BuildContext context) {
    return SheetContentScaffold(
      appBar: _SharedAppBarHero(appbar: AppBar()),
      body: ListView.builder(
        itemCount: _seedTracks.length + 1,
        itemBuilder: (context, index) {
          return switch (index) {
            0 => Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 32, vertical: 8),
                child: Text(
                  'Select seed tracks to get started (3/3)',
                  style: Theme.of(context).textTheme.headlineMediumBold,
                ),
              ),
            _ => _SelectableListTile(
                padding: const EdgeInsets.only(left: 16),
                title: _seedTracks[index - 1],
              ),
          };
        },
      ),
      bottomBar: _BottomActionBar(
        label: 'Next',
        showDivider: true,
        onPressed: () => context.go('/intro/genre/mood/seed-track/confirm'),
      ),
    );
  }
}

class _ConfirmPage extends StatelessWidget {
  const _ConfirmPage();

  @override
  Widget build(BuildContext context) {
    return SheetContentScaffold(
      appBar: _SharedAppBarHero(appbar: AppBar()),
      body: Padding(
        padding: const EdgeInsets.only(left: 32),
        child: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 32),
                    child: Text(
                      'Confirm your choices',
                      style: Theme.of(context).textTheme.headlineMediumBold,
                    ),
                  ),
                  const SizedBox(height: 24),
                  ListTile(
                    title: const Text('Genres'),
                    trailing: IconButton(
                      onPressed: () => context.go('/intro/genre'),
                      icon: const Icon(Icons.edit_outlined),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: 32),
                    child: Wrap(
                      spacing: 10,
                      children: [
                        for (final genre in _genres.take(5))
                          FilterChip(
                            selected: true,
                            label: Text(genre),
                            onSelected: (_) {},
                          ),
                      ],
                    ),
                  ),
                  const Divider(height: 32),
                  ListTile(
                    title: const Text('Mood'),
                    trailing: IconButton(
                      onPressed: () => context.go('/intro/genre/mood'),
                      icon: const Icon(Icons.edit_outlined),
                    ),
                  ),
                  RadioListTile(
                    title: Text(_moods.first.label),
                    secondary: Text(
                      _moods.first.emoji,
                      style: const TextStyle(fontSize: 24),
                    ),
                    controlAffinity: ListTileControlAffinity.trailing,
                    value: '',
                    groupValue: '',
                    onChanged: (_) {},
                  ),
                  const Divider(height: 32),
                  ListTile(
                    title: const Text('Seed tracks'),
                    trailing: IconButton(
                      onPressed: () =>
                          context.go('/intro/genre/mood/seed-track'),
                      icon: const Icon(Icons.edit_outlined),
                    ),
                  ),
                ],
              ),
            ),
            SliverList.builder(
              itemCount: (_seedTracks.length * 0.4).floor(),
              itemBuilder: (context, index) {
                return CheckboxListTile(
                  title: Text(_seedTracks[index]),
                  value: true,
                  onChanged: (_) {},
                );
              },
            ),
          ],
        ),
      ),
      bottomBar: _BottomActionBar(
        label: "OK, let's go!",
        showDivider: true,
        onPressed: () async {
          context.go('/intro/genre/mood/seed-track/confirm/generate');
          await Future<void>.delayed(const Duration(seconds: 2));
          if (context.mounted) {
            context.go('/');
          }
        },
      ),
    );
  }
}

class _GeneratingPage extends StatelessWidget {
  const _GeneratingPage();

  @override
  Widget build(BuildContext context) {
    return SheetContentScaffold(
      appBar: _SharedAppBarHero(appbar: AppBar()),
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 32),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'Generating your playlist...',
                  style: Theme.of(context).textTheme.headlineMediumBold,
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 64),
                  child: CircularProgressIndicator(strokeWidth: 6),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// ----------------------------------------------------------
// Utilities
// ----------------------------------------------------------

extension on TextTheme {
  TextStyle? get headlineMediumBold =>
      headlineMedium?.copyWith(fontWeight: FontWeight.bold);
}

final _largeFilledButtonStyle = FilledButton.styleFrom(
  minimumSize: const Size.fromHeight(56),
);

final _largeTextButtonStyle = TextButton.styleFrom(
  minimumSize: const Size.fromHeight(56),
);

class _SelectableChip extends StatefulWidget {
  const _SelectableChip({
    required this.label,
  });

  final Widget label;

  @override
  State<_SelectableChip> createState() => _SelectableChipState();
}

class _SelectableChipState extends State<_SelectableChip> {
  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return FilterChip(
      onSelected: (isSelected) {
        setState(() => this.isSelected = isSelected);
      },
      selected: isSelected,
      label: widget.label,
    );
  }
}

class _SelectableListTile extends StatefulWidget {
  const _SelectableListTile({
    required this.title,
    required this.padding,
  });

  final String title;
  final EdgeInsets padding;

  @override
  State<_SelectableListTile> createState() => _SelectableListTileState();
}

class _SelectableListTileState extends State<_SelectableListTile> {
  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: widget.padding,
      child: CheckboxListTile(
        title: Text(widget.title),
        value: isSelected,
        onChanged: (selected) {
          setState(() => isSelected = selected!);
        },
      ),
    );
  }
}

class _SelectableMoodList extends StatefulWidget {
  const _SelectableMoodList();

  @override
  State<_SelectableMoodList> createState() => _SelectableMoodListState();
}

class _SelectableMoodListState extends State<_SelectableMoodList> {
  String? selectedMood = _moods.first.label;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        for (final mood in _moods)
          RadioListTile(
            title: Text(mood.label),
            secondary: Text(
              mood.emoji,
              style: const TextStyle(fontSize: 24),
            ),
            controlAffinity: ListTileControlAffinity.trailing,
            selected: mood.label == selectedMood,
            value: mood.label,
            groupValue: selectedMood,
            onChanged: (newMooed) => setState(() {
              selectedMood = newMooed;
            }),
          ),
      ],
    );
  }
}

class _BottomActionBar extends StatelessWidget {
  const _BottomActionBar({
    required this.label,
    required this.onPressed,
    this.showDivider = false,
  });

  final String label;
  final VoidCallback? onPressed;
  final bool showDivider;

  @override
  Widget build(BuildContext context) {
    const horizontalPadding = 32.0;
    const verticalPadding = 16.0;

    // Insert bottom padding only if there's no system viewport bottom inset.
    final systemBottomInset = MediaQuery.of(context).padding.bottom;

    return StickyBottomBarVisibility(
      child: ColoredBox(
        color: Theme.of(context).colorScheme.surface,
        child: SafeArea(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              if (showDivider) const Divider(height: 1),
              Padding(
                padding: EdgeInsets.fromLTRB(
                  horizontalPadding,
                  verticalPadding,
                  horizontalPadding,
                  systemBottomInset == 0 ? verticalPadding : 0,
                ),
                child: FilledButton(
                  onPressed: onPressed,
                  style: _largeFilledButtonStyle,
                  child: Text(label),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

/// This widget makes it possible to create a (visually) shared appbar across the pages.
///
/// For better maintainability, it is recommended to create a page-specific app bar for each page
/// instead of a single 'super' shared app bar that includes all the functionality for every page.
class _SharedAppBarHero extends StatelessWidget implements PreferredSizeWidget {
  const _SharedAppBarHero({
    required this.appbar,
  });

  final AppBar appbar;

  @override
  Size get preferredSize => appbar.preferredSize;

  @override
  Widget build(BuildContext context) {
    return Hero(tag: 'HeroAppBar', child: appbar);
  }
}

// ----------------------------------------------------------
// Constants
// ----------------------------------------------------------

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',
];

const _moods = [
  (label: 'Energetic and Upbeat', emoji: '🎉'),
  (label: 'Laid-back and Chill:', emoji: '🍹'),
  (label: 'Mellow and Reflective', emoji: '🛌'),
  (label: 'Uplifting and Positive', emoji: '💪'),
];

const _seedTracks = [
  "Groove Odyssey",
  "Funky Fusion Fiesta",
  "Soul Serenade Shuffle",
  "Rhythm Revival Rendezvous",
  "Bassline Bliss",
  "Jazzed-up Jamboree",
  "Funkadelic Dreamscape",
  "Smooth Sunset Serenity",
  "Electric Euphoria Express",
  "Syncopation Celebration",
  "Funky Mirage Melody",
  "Saxophone Sunshine Soiree",
  "Dancefloor Diplomacy",
  "Bass Bounce Bonanza",
  "Vibraphone Voyage",
  "Funk Frontier Fantasy",
  "Sonic Soul Safari",
  "Guitar Groove Gala",
  "Brass Bliss Bouquet",
  "Funky Cosmic Carnival",
];

0 replies

fujidaiti · 2024-04-01T11:31:45Z

fujidaiti
Apr 1, 2024
Maintainer

How about putting the modal route in the root navigator?

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

0 replies

QuentinSc · 2024-04-01T16:11:00Z

QuentinSc
Apr 1, 2024
Author

How about putting the modal route in the root navigator?

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

Same error in debugger
The sheet display correctly but the previous sheet disapear :/

0 replies

fujidaiti · 2024-04-02T04:48:50Z

fujidaiti
Apr 2, 2024
Maintainer

The sheet display correctly but the previous sheet disapear :/

This is how context.go('/modal') works. For your purposes, context.push('/modal') would be more appropriate.

0 replies

QuentinSc · 2024-04-02T14:51:18Z

QuentinSc
Apr 2, 2024
Author

The sheet display correctly but the previous sheet disapear :/

This is how context.go('/modal') works. For your purposes, context.push('/modal') would be more appropriate.

Yup I did mi test with '.push' before answer 😉

Updated code - Click to expand

import 'dart:io';

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

void main() {
  // Make the system navigation bar transparent on Android.
  if (Platform.isAndroid) {
    WidgetsFlutterBinding.ensureInitialized();
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.edgeToEdge,
      overlays: [SystemUiOverlay.top],
    ).then((_) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
        systemNavigationBarColor: Colors.transparent,
        systemNavigationBarDividerColor: Colors.transparent,
      ));
    });
  }

  runApp(const _AiPlaylistGeneratorExample());
}

class _AiPlaylistGeneratorExample extends StatelessWidget {
  const _AiPlaylistGeneratorExample();

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

// ----------------------------------------------------------
// Routes
// ----------------------------------------------------------

final sheetTransitionObserver = NavigationSheetTransitionObserver();

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

final _modal = GoRoute(
  path: '/modal',
  pageBuilder: (context, state) => ModalSheetPage(
      child: SheetDismissible(
    child: DraggableSheet(
      child: Card(
        color: Theme.of(context).colorScheme.secondaryContainer,
        margin: EdgeInsets.zero,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: const SizedBox(
          height: 500,
          width: double.infinity,
        ),
      ),
    ),
  )),
);

// 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 ModalSheetPage(
      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],
);

final _moodRoute = GoRoute(
  path: 'mood',
  pageBuilder: (context, state) {
    return const DraggableNavigationSheetPage(child: _SelectMoodPage());
  },
  routes: [_seedTrackRoute],
);

final _seedTrackRoute = GoRoute(
  path: 'seed-track',
  pageBuilder: (context, state) {
    return const ScrollableNavigationSheetPage(child: _SelectSeedTrackPage());
  },
  routes: [_confirmRoute],
);

final _confirmRoute = GoRoute(
  path: 'confirm',
  pageBuilder: (context, state) {
    return const ScrollableNavigationSheetPage(
      initialExtent: Extent.proportional(0.7),
      minExtent: Extent.proportional(0.7),
      physics: StretchingSheetPhysics(
        parent: SnappingSheetPhysics(),
      ),
      child: _ConfirmPage(),
    );
  },
  routes: [_generateRoute],
);

final _generateRoute = GoRoute(
  path: 'generate',
  pageBuilder: (context, state) {
    return const DraggableNavigationSheetPage(child: _GeneratingPage());
  },
);

// ----------------------------------------------------------
// Pages
// ----------------------------------------------------------

class _Root extends StatelessWidget {
  const _Root();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ElevatedButton(
        onPressed: () => context.go('/intro'),
        child: const Text('Generate Playlist'),
      ),
    ));
  }
}

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

  final NavigationSheetTransitionObserver transitionObserver;
  final Widget navigator;

  @override
  Widget build(BuildContext context) {
    void showCancelDialog() {
      showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text('Are you sure?'),
            content:
                const Text('Do you want to cancel the playlist generation?'),
            actions: [
              TextButton(
                onPressed: () => context.go('/'),
                child: const Text('Yes'),
              ),
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: const Text('No'),
              ),
            ],
          );
        },
      );
    }

    return SafeArea(
      bottom: false,
      // Wrap the sheet in a SheetDismissible to enable pull-to-dismiss action.
      child: SheetDismissible(
        // This callback is invoked when the user tries
        // to dismiss the sheet by dragging it down.
        onDismiss: () {
          // Prompt the user to confirm if they want to dismiss the sheet.
          showCancelDialog();
          // Returns false to disable automatic modal sheet popping.
          return 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 SheetContentScaffold(
      appBar: _SharedAppBarHero(
        appbar: AppBar(
          leading: IconButton(
            onPressed: () => context.go('/'),
            icon: const Icon(Icons.close),
          ),
        ),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 32,
            vertical: 8,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                "Hello there!\n"
                "I'm your AI music assistant. "
                "Ready to create the perfect playlist for you. 😊",
                textAlign: TextAlign.center,
                style: Theme.of(context).textTheme.headlineMediumBold,
              ),
              const SizedBox(height: 64),
              FilledButton(
                onPressed: () => context.go('/intro/genre'),
                style: _largeFilledButtonStyle,
                child: const Text('Continue'),
              ),
              const SizedBox(height: 16),
              TextButton(
                onPressed: () => context.push('/modal'),
                style: _largeTextButtonStyle,
                child: const Text('Open modal'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _SelectGenrePage extends StatelessWidget {
  const _SelectGenrePage();

  @override
  Widget build(BuildContext context) {
    return SheetContentScaffold(
      appBar: _SharedAppBarHero(appbar: AppBar()),
      // 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: [
            Text(
              'What genre do you like? (1/3)',
              style: Theme.of(context).textTheme.headlineMediumBold,
            ),
            const SizedBox(height: 24),
            Wrap(
              spacing: 10,
              children: [
                for (final genre in _genres)
                  _SelectableChip(
                    label: Text(genre),
                  ),
              ],
            ),
          ],
        ),
      ),
      bottomBar: _BottomActionBar(
        label: 'Next',
        onPressed: () => context.go('/intro/genre/mood'),
      ),
    );
  }
}

class _SelectMoodPage extends StatelessWidget {
  const _SelectMoodPage();

  @override
  Widget build(BuildContext context) {
    return SheetContentScaffold(
      appBar: _SharedAppBarHero(appbar: AppBar()),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.only(top: 8, bottom: 24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 32),
                child: Text(
                  'What kind of mood are you aiming for in this playlist? (2/3)',
                  style: Theme.of(context).textTheme.headlineMediumBold,
                ),
              ),
              const SizedBox(height: 24),
              const Padding(
                padding: EdgeInsets.only(left: 16),
                child: _SelectableMoodList(),
              ),
            ],
          ),
        ),
      ),
      bottomBar: _BottomActionBar(
        label: 'Next',
        onPressed: () => context.go('/intro/genre/mood/seed-track'),
      ),
    );
  }
}

class _SelectSeedTrackPage extends StatelessWidget {
  const _SelectSeedTrackPage();

  @override
  Widget build(BuildContext context) {
    return SheetContentScaffold(
      appBar: _SharedAppBarHero(appbar: AppBar()),
      body: ListView.builder(
        itemCount: _seedTracks.length + 1,
        itemBuilder: (context, index) {
          return switch (index) {
            0 => Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 32, vertical: 8),
                child: Text(
                  'Select seed tracks to get started (3/3)',
                  style: Theme.of(context).textTheme.headlineMediumBold,
                ),
              ),
            _ => _SelectableListTile(
                padding: const EdgeInsets.only(left: 16),
                title: _seedTracks[index - 1],
              ),
          };
        },
      ),
      bottomBar: _BottomActionBar(
        label: 'Next',
        showDivider: true,
        onPressed: () => context.go('/intro/genre/mood/seed-track/confirm'),
      ),
    );
  }
}

class _ConfirmPage extends StatelessWidget {
  const _ConfirmPage();

  @override
  Widget build(BuildContext context) {
    return SheetContentScaffold(
      appBar: _SharedAppBarHero(appbar: AppBar()),
      body: Padding(
        padding: const EdgeInsets.only(left: 32),
        child: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 32),
                    child: Text(
                      'Confirm your choices',
                      style: Theme.of(context).textTheme.headlineMediumBold,
                    ),
                  ),
                  const SizedBox(height: 24),
                  ListTile(
                    title: const Text('Genres'),
                    trailing: IconButton(
                      onPressed: () => context.go('/intro/genre'),
                      icon: const Icon(Icons.edit_outlined),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: 32),
                    child: Wrap(
                      spacing: 10,
                      children: [
                        for (final genre in _genres.take(5))
                          FilterChip(
                            selected: true,
                            label: Text(genre),
                            onSelected: (_) {},
                          ),
                      ],
                    ),
                  ),
                  const Divider(height: 32),
                  ListTile(
                    title: const Text('Mood'),
                    trailing: IconButton(
                      onPressed: () => context.go('/intro/genre/mood'),
                      icon: const Icon(Icons.edit_outlined),
                    ),
                  ),
                  RadioListTile(
                    title: Text(_moods.first.label),
                    secondary: Text(
                      _moods.first.emoji,
                      style: const TextStyle(fontSize: 24),
                    ),
                    controlAffinity: ListTileControlAffinity.trailing,
                    value: '',
                    groupValue: '',
                    onChanged: (_) {},
                  ),
                  const Divider(height: 32),
                  ListTile(
                    title: const Text('Seed tracks'),
                    trailing: IconButton(
                      onPressed: () =>
                          context.go('/intro/genre/mood/seed-track'),
                      icon: const Icon(Icons.edit_outlined),
                    ),
                  ),
                ],
              ),
            ),
            SliverList.builder(
              itemCount: (_seedTracks.length * 0.4).floor(),
              itemBuilder: (context, index) {
                return CheckboxListTile(
                  title: Text(_seedTracks[index]),
                  value: true,
                  onChanged: (_) {},
                );
              },
            ),
          ],
        ),
      ),
      bottomBar: _BottomActionBar(
        label: "OK, let's go!",
        showDivider: true,
        onPressed: () async {
          context.go('/intro/genre/mood/seed-track/confirm/generate');
          await Future<void>.delayed(const Duration(seconds: 2));
          if (context.mounted) {
            context.go('/');
          }
        },
      ),
    );
  }
}

class _GeneratingPage extends StatelessWidget {
  const _GeneratingPage();

  @override
  Widget build(BuildContext context) {
    return SheetContentScaffold(
      appBar: _SharedAppBarHero(appbar: AppBar()),
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 32),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'Generating your playlist...',
                  style: Theme.of(context).textTheme.headlineMediumBold,
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 64),
                  child: CircularProgressIndicator(strokeWidth: 6),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// ----------------------------------------------------------
// Utilities
// ----------------------------------------------------------

extension on TextTheme {
  TextStyle? get headlineMediumBold =>
      headlineMedium?.copyWith(fontWeight: FontWeight.bold);
}

final _largeFilledButtonStyle = FilledButton.styleFrom(
  minimumSize: const Size.fromHeight(56),
);

final _largeTextButtonStyle = TextButton.styleFrom(
  minimumSize: const Size.fromHeight(56),
);

class _SelectableChip extends StatefulWidget {
  const _SelectableChip({
    required this.label,
  });

  final Widget label;

  @override
  State<_SelectableChip> createState() => _SelectableChipState();
}

class _SelectableChipState extends State<_SelectableChip> {
  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return FilterChip(
      onSelected: (isSelected) {
        setState(() => this.isSelected = isSelected);
      },
      selected: isSelected,
      label: widget.label,
    );
  }
}

class _SelectableListTile extends StatefulWidget {
  const _SelectableListTile({
    required this.title,
    required this.padding,
  });

  final String title;
  final EdgeInsets padding;

  @override
  State<_SelectableListTile> createState() => _SelectableListTileState();
}

class _SelectableListTileState extends State<_SelectableListTile> {
  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: widget.padding,
      child: CheckboxListTile(
        title: Text(widget.title),
        value: isSelected,
        onChanged: (selected) {
          setState(() => isSelected = selected!);
        },
      ),
    );
  }
}

class _SelectableMoodList extends StatefulWidget {
  const _SelectableMoodList();

  @override
  State<_SelectableMoodList> createState() => _SelectableMoodListState();
}

class _SelectableMoodListState extends State<_SelectableMoodList> {
  String? selectedMood = _moods.first.label;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        for (final mood in _moods)
          RadioListTile(
            title: Text(mood.label),
            secondary: Text(
              mood.emoji,
              style: const TextStyle(fontSize: 24),
            ),
            controlAffinity: ListTileControlAffinity.trailing,
            selected: mood.label == selectedMood,
            value: mood.label,
            groupValue: selectedMood,
            onChanged: (newMooed) => setState(() {
              selectedMood = newMooed;
            }),
          ),
      ],
    );
  }
}

class _BottomActionBar extends StatelessWidget {
  const _BottomActionBar({
    required this.label,
    required this.onPressed,
    this.showDivider = false,
  });

  final String label;
  final VoidCallback? onPressed;
  final bool showDivider;

  @override
  Widget build(BuildContext context) {
    const horizontalPadding = 32.0;
    const verticalPadding = 16.0;

    // Insert bottom padding only if there's no system viewport bottom inset.
    final systemBottomInset = MediaQuery.of(context).padding.bottom;

    return StickyBottomBarVisibility(
      child: ColoredBox(
        color: Theme.of(context).colorScheme.surface,
        child: SafeArea(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              if (showDivider) const Divider(height: 1),
              Padding(
                padding: EdgeInsets.fromLTRB(
                  horizontalPadding,
                  verticalPadding,
                  horizontalPadding,
                  systemBottomInset == 0 ? verticalPadding : 0,
                ),
                child: FilledButton(
                  onPressed: onPressed,
                  style: _largeFilledButtonStyle,
                  child: Text(label),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

/// This widget makes it possible to create a (visually) shared appbar across the pages.
///
/// For better maintainability, it is recommended to create a page-specific app bar for each page
/// instead of a single 'super' shared app bar that includes all the functionality for every page.
class _SharedAppBarHero extends StatelessWidget implements PreferredSizeWidget {
  const _SharedAppBarHero({
    required this.appbar,
  });

  final AppBar appbar;

  @override
  Size get preferredSize => appbar.preferredSize;

  @override
  Widget build(BuildContext context) {
    return Hero(tag: 'HeroAppBar', child: appbar);
  }
}

// ----------------------------------------------------------
// Constants
// ----------------------------------------------------------

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',
];

const _moods = [
  (label: 'Energetic and Upbeat', emoji: '🎉'),
  (label: 'Laid-back and Chill:', emoji: '🍹'),
  (label: 'Mellow and Reflective', emoji: '🛌'),
  (label: 'Uplifting and Positive', emoji: '💪'),
];

const _seedTracks = [
  "Groove Odyssey",
  "Funky Fusion Fiesta",
  "Soul Serenade Shuffle",
  "Rhythm Revival Rendezvous",
  "Bassline Bliss",
  "Jazzed-up Jamboree",
  "Funkadelic Dreamscape",
  "Smooth Sunset Serenity",
  "Electric Euphoria Express",
  "Syncopation Celebration",
  "Funky Mirage Melody",
  "Saxophone Sunshine Soiree",
  "Dancefloor Diplomacy",
  "Bass Bounce Bonanza",
  "Vibraphone Voyage",
  "Funk Frontier Fantasy",
  "Sonic Soul Safari",
  "Guitar Groove Gala",
  "Brass Bliss Bouquet",
  "Funky Cosmic Carnival",
];

0 replies

QuentinSc · 2024-04-03T13:36:11Z

QuentinSc
Apr 3, 2024
Author

Apologies if there's been a misunderstanding, but I'm still having trouble implementing this use case.

11 replies

fujidaiti Apr 6, 2024
Maintainer

I have confirmed that this code works on Android 13 emulator.
Please carefully retry it in your environment again and feel free to ask any questions you may have.

2024-04-06.10.50.56.mov

QuentinSc Apr 6, 2024
Author

It drives me crazy 🤪 It works on none of my device/emulatiors 😕
Just to be sure, I made a fork here : https://github.com/QuentinSc/qsc_smooth_sheets/tree/main
My flutter doctor :

[√] Flutter (Channel stable, 3.19.5, on Microsoft Windows [version 10.0.22631.3374], locale fr-FR)
    • Flutter version 3.19.5 on channel stable at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 300451adae (9 days ago), 2024-03-27 21:54:07 -0500
    • Engine revision e76c956498
    • Dart version 3.3.3
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\qschneider\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.34)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
    • Visual Studio Build Tools 2019 version 16.11.34601.136
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2023.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)

[√] VS Code (version 1.88.0)
    • VS Code at C:\Users\qschneider\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.84.0

[√] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 14 (API 34) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [version 10.0.22631.3374]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 123.0.6312.86
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 123.0.2420.81

[√] Network resources
    • All expected network resources are available.

QuentinSc Apr 12, 2024
Author

@fujidaiti Hello,
I've got this behaviour on multiple computer running different versions of Flutter running on different Android devices :/

fujidaiti Apr 12, 2024
Maintainer

@QuentinSc

I think this is a problem related to the go_router rather than this package.
Using the following modal route will give us a hint:

final _modal = GoRoute(
  path: '/modal',
  pageBuilder: (context, state) {
    return MaterialPage(
        child: Scaffold(
      appBar: AppBar(
        title: const Text('Modal Sheet'),
      ),
    ));
  },
);

With the above route, we can see that the /modal is pushed to the nested navigator rather than the root. (If the route was pushed to the root, it would be full screen.)

RocketSim_Recording_iPhone_15_6.1_2024-04-12_22.27.38.mp4

The NavigationSheet can only accept *NavigationSheetRoutes and *NavigationSheetPages, so showing a MaterialPage in the NavigationSheet causes the error and this is the intended behavior. (The same is true with ModalSheetPage.)

I think you need to find a way to push a route from the nested navigator to the root navigator in the go_router. This article might help you.

QuentinSc Apr 27, 2024
Author

Thank you for your time

QuentinSc · 2024-04-27T15:31:45Z

QuentinSc
Apr 27, 2024
Author

For those who, like me, find GoRouter documentation somewhat unclear, here's the small change I added to properly display the Modal route.

QuentinSc@fe34d50

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cookbook - How to show modalsheet above existing modalsheet #85

{{title}}

Replies: 8 comments 11 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Cookbook - How to show modalsheet above existing modalsheet #85

QuentinSc Mar 31, 2024

Replies: 8 comments · 11 replies

fujidaiti Apr 1, 2024 Maintainer

QuentinSc Apr 1, 2024 Author

fujidaiti Apr 1, 2024 Maintainer

QuentinSc Apr 1, 2024 Author

fujidaiti Apr 2, 2024 Maintainer

QuentinSc Apr 2, 2024 Author

QuentinSc Apr 3, 2024 Author

fujidaiti Apr 6, 2024 Maintainer

QuentinSc Apr 6, 2024 Author

QuentinSc Apr 12, 2024 Author

fujidaiti Apr 12, 2024 Maintainer

QuentinSc Apr 27, 2024 Author

QuentinSc Apr 27, 2024 Author

QuentinSc
Mar 31, 2024

Replies: 8 comments 11 replies

fujidaiti
Apr 1, 2024
Maintainer

QuentinSc
Apr 1, 2024
Author

fujidaiti
Apr 1, 2024
Maintainer

QuentinSc
Apr 1, 2024
Author

fujidaiti
Apr 2, 2024
Maintainer

QuentinSc
Apr 2, 2024
Author

QuentinSc
Apr 3, 2024
Author

fujidaiti Apr 6, 2024
Maintainer

QuentinSc Apr 6, 2024
Author

QuentinSc Apr 12, 2024
Author

fujidaiti Apr 12, 2024
Maintainer

QuentinSc Apr 27, 2024
Author

QuentinSc
Apr 27, 2024
Author