Navigation in v4 seems broken ?

[Tiska]

Hi, thanks a lot for your amazing work on this package :) I tried the migration on v4, but all the navigation seems broken :

`The following assertion was thrown while handling a gesture:
Could not find a generator for route RouteSettings("/stories/my-widget", null) in the _WidgetsAppState.

Make sure your root app widget has provided a way to generate
this route.
Generators for routes are searched for in the following order:

1. For the "/" route, the "home" property, if non-null, is used.
2. Otherwise, the "routes" table is used, if it has an entry for the route.
3. Otherwise, onGenerateRoute is called. It should return a non-null value for any valid route not handled by "home" and "routes".
4. Finally if all else fails onUnknownRoute is called.
   Unfortunately, onUnknownRoute was not set.`

Did I miss something new ?

[ookami-kb]

Hi, thank you!

That's weird, I cannot reproduce it. Can you please provide your storybook code, and which platform and flutter version do you use?

[Tiska]

I :) we use flutter 2.0.2 stable, it's broken both on web and mobile. We needed to have 3 level entries, so we used storybook in a sub child, maybe thats the problem ? Here is my storybook code :

`
void main() => runApp(MaterialApp(
title: 'Stories',
// used only to have a nice top bar, theme is handled in storybook
darkTheme: AppTheme.themeData,
themeMode: ThemeMode.dark,
localizationsDelegates: [
I18n.delegate,
I18nTech.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [...I18n.delegate.supportedLocales, ...I18nTech.delegate.supportedLocales],
debugShowCheckedModeBanner: false,
home: StorybookStories(),
));

class MenuEntry {
final String name;
final List stories;

MenuEntry(this.name, this.stories);
}

class StorybookStories extends StatefulWidget {
@OverRide
_StorybookStoriesState createState() => _StorybookStoriesState();
}

class _StorybookStoriesState extends State {
MenuEntry? dropDownValue;
List currentStories = List.empty();

static final List figmaEntries = [
MenuEntry('Colors', ColorsStories.colors()),
];

@OverRide
void initState() {
currentStories = figmaEntries.first.stories;
super.initState();
}

@OverRide
Widget build(BuildContext context) => Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
elevation: 0,
title: _selectFigmaEntry(context),
),
body: Storybook(
darkTheme: AppTheme.themeData,
themeMode: ThemeMode.dark,
children: currentStories,
));

Row _selectFigmaEntry(BuildContext context) => Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
if (kIsWeb)
Padding(
padding: const EdgeInsets.only(right: Dimens.standardPadding),
child: Text(
'Storybook',
),
),
Text(
'Choose figma entry ?',
style: Theme.of(context).textTheme.bodyText2,
),
SizedBox(width: Dimens.halfSpacing),
Container(
padding: const EdgeInsets.symmetric(horizontal: Dimens.halfPadding),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.all(Radius.circular(Dimens.standardRadius)),
),
child: DropdownButton(
value: dropDownValue,
dropdownColor: Theme.of(context).colorScheme.surface,
underline: Container(),
items: figmaEntries
.map((e) => DropdownMenuItem(
child: Text(e.name),
value: e,
onTap: () {
setState(() {
currentStories = e.stories;
dropDownValue = e;
});
},
))
.toList(),
onChanged: (value) {},
hint: Container(
child: Text(figmaEntries.first.name, style: Theme.of(context).textTheme.bodyText2),
),
),
),
],
);
}

`

[ookami-kb]

Yeah, I see now. The problem is that Storybook actually uses MaterialApp and Scaffold internally, and nesting these widgets can lead to some problem. I would suggest to use CustomStorybook instead. You'll have to define your own layout, but it can be something simple, like that:

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: CustomStorybook(
            builder: (context) => Row(
              children: [
                SizedBox(
                  width: 200,
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border(
                        right: BorderSide(
                          color: Theme.of(context).dividerColor,
                        ),
                      ),
                      color: Theme.of(context).cardColor,
                    ),
                    child: const Contents(),
                  ),
                ),
                const Expanded(child: CurrentStory()),
                const SizedBox(width: 200, child: KnobPanel()),
              ],
            ),
            children: _stories,
          ),
        ),
      );
}

In that case, the storybook part will look like this:

[Tiska]

thanks a lot :) i will try that