ookami-kb / storybook_flutter

A storybook for Flutter widgets.
https://pub.dev/packages/storybook_flutter
MIT License
288 stars 66 forks source link

knob to switch locale #48

Open laynor opened 3 years ago

laynor commented 3 years ago

It would be great being able to switch locale with a knob or some control in the storybook interface. Is there a way to do that?

ookami-kb commented 3 years ago

No simple way to do it right now, but it sounds like a useful feature, I will look into it.

heralight commented 1 year ago

You could simply do that by overriding materialWrapper like this:

Widget materialWrapper(BuildContext _, Widget? child) => MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      useInheritedMediaQuery: true,
      locale: TranslationProvider.of(_).flutterLocale,
      supportedLocales: AppLocaleUtils.supportedLocales,
      localizationsDelegates: GlobalMaterialLocalizations.delegates,
      home: Scaffold(body: Center(child: child)),
    );

in my case I use slang for translation.

And to have a switch button:

void main() {
  WidgetsFlutterBinding.ensureInitialized(); //
  LocaleSettings.useDeviceLocale(); // an
  runApp(TranslationProvider(child: const MyApp()));
}

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

  @override
  Widget build(BuildContext context) => ZStack(
        [
Storybook( .....),
      Container(
              height: 50,
              width: 100,
              child: Directionality(
                  textDirection: TextDirection.rtl,
                  child: ElevatedButton(
                    onPressed: () {
                      if (LocaleSettings.instance.currentLocale.name == "fr") {
                        LocaleSettings.setLocaleRaw("en");
                        print("set Locale1");
                      } else
                        LocaleSettings.setLocaleRaw("fr");
                      print("set Locale");
                    },
                    style: ElevatedButton.styleFrom(
                        elevation: 12.0,
                        textStyle: const TextStyle(color: Colors.white)),
                    child: const Text(
                      'Lang',
                    ),
                  ))),
        ],
        alignment: Alignment.topRight,
      );
}