🐛 Crash when using NavigationView with an unsupported locale

[Amin]

Describe the bug
When you set locale to an unsupported language, NavigationView causes a crash.

EDIT: looks like it crashes with same error even when I use English locale.

To Reproduce

import 'package:fluent_ui/fluent_ui.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const FluentApp(
      title: 'Fluent UI Test',
      supportedLocales: [
        Locale('fa'),
      ],
      locale: Locale('fa'),
      home: MyHomePage(title: 'شمارنده'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return NavigationView(
      appBar: const NavigationAppBar(
        title: Text('شمارنده'),
      ),
      content: NavigationBody(
        index: 0,
        children: [
          ScaffoldPage(
            header: PageHeader(
              title: Text(widget.title),
              commandBar: CommandBar(
                primaryItems: [
                  CommandBarButton(
                    onPressed: () {
                      _incrementCounter();
                    },
                    icon: const Icon(FluentIcons.add),
                  ),
                ],
              ),
            ),
            content: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text(
                    'شما این دکمه را این تعداد دفعه فشار داده‌اید:',
                  ),
                  Text(
                    '$_counter',
                    style: FluentTheme.of(context).typography.bodyLarge,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Screenshots

Additional context

════════ Exception caught by widgets ═══════════════════════════════════════════
The following message was thrown:
Warning: This application's locale, fa, is not supported by all of its localization delegates.

• A FluentLocalizations delegate that supports the fa locale was not found.

The declared supported locales for this app are: fa

See https://flutter.dev/tutorials/internationalization/ for more information about configuring an app's locale, supportedLocales, and localizationsDelegates parameters.
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
No FluentLocalizations found.
The ancestors of this widget were
    MyHomePage
        dependencies: [_FluentTheme]
        state: _MyHomePageState#c21c1
    ScaleTransition
        animation: AnimationController#b5b2d(⏭ 1.000; paused; for FluentPageRoute<dynamic>)➩ProxyAnimation➩Cubic(0.42, 0.00, 0.58, 1.00)➩Tween<double>(0.88 → 1.0)➩1.0
        state: _AnimatedState#1af73
    FadeTransition
        opacity: AnimationController#b5b2d(⏭ 1.000; paused; for FluentPageRoute<dynamic>)➩ProxyAnimation➩Cubic(0.42, 0.00, 0.58, 1.00)
        renderObject: RenderAnimatedOpacity#f4f2c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    DrillInPageTransition
        animationValue: 100.0%
    Semantics
        container: false
        properties: SemanticsProperties
        renderObject: RenderSemanticsAnnotations#e5e80 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    AnimatedDefaultTextStyle
        duration: 200ms
        inherit: true
        color: Color(0xe4000000)
        size: 14.0
        weight: 400
        softWrap: wrapping at box width
        overflow: clip
        state: _AnimatedDefaultTextStyleState#bd2cd(ticker inactive)
    IconTheme
        color: Color(0xff000000)
        size: 18.0
    _FluentTheme
    FluentTheme
    AnimatedFluentTheme
        duration: 200ms
        state: _AnimatedFluentThemeState#01a2a(ticker inactive, ThemeDataTween(ThemeData#f3cdd(accentColor: AccentColor(primary value: Color(0xff0078d4)), activeColor: Color(0xffffffff), inactiveColor: Color(0xff000000), inactiveBackgroundColor: Color(0xffd6d6d6), disabledColor: Color(0xff838383), shadowColor: Color(0xff000000), scaffoldBackgroundColor: Color(0xffffffff), acrylicBackgroundColor: Color(0xccffffff), micaBackgroundColor: Color(0xfff3f3f3), menuColor: Color(0xfff9f9f9), cardColor: Color(0xfff3f3f3), brightness: light, slowAnimationDuration: 0:00:00.358000, mediumAnimationDuration: 0:00:00.250000, fastAnimationDuration: 0:00:00.167000, fasterAnimationDuration: 0:00:00.083000, animationCurve: Cubic(0.42, 0.00, 0.58, 1.00)) → null))
    AnimatedTheme
        duration: 200ms
        state: _AnimatedThemeState#43a93(ticker inactive, ThemeDataTween(ThemeData#52c40 → null))
    WidgetsApp-[GlobalObjectKey _FluentAppState#3e953]
        state: _WidgetsAppState#06c46
    HeroControllerScope
    ScrollConfiguration
        behavior: FluentScrollBehavior
    FluentApp
        state: _FluentAppState#3e953
    MyApp
    ...
The relevant error-causing widget was
NavigationView
════════════════════════════════════════════════════════════════════════════════

[Enrique Cardona]

I think this is an expected behavior. Probably NavigationView fires the lookup of some L10n strings and the subsequent error message. But this doesn't means that this is an issue.

For example, when using material, if you use a language other than English you have to add the localizations, as reflected in the documentation: https://docs.flutter.dev/development/accessibility-and-localization/internationalization#setting-up.

If you don't you would have similar errors, you can see it below using this code:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Material localization Test',
      supportedLocales: [
        Locale('fa'),
      ],
      locale: Locale('fa'),
      home: MyHomePage(title: 'شمارنده'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: TextField(

      ),
    ));
  }
}

That generates the same error:

The following message was thrown:
Warning: This application's locale, fa, is not supported by all of its localization delegates.

• A MaterialLocalizations delegate that supports the fa locale was not found.
• A CupertinoLocalizations delegate that supports the fa locale was not found.

The declared supported locales for this app are: fa

See https://flutter.dev/tutorials/internationalization/ for more information about configuring an app's locale, supportedLocales, and localizationsDelegates parameters.

// cc @bdlukaa

[Amin]

I think this is an expected behavior.

me too, but at #354 @bdlukaa said open an issue for it and I just did it.

[Bruno D'Luka]

I believe it should fallback to english, no?

[Enrique Cardona]

As far as I know, it doesn't.

User locale can be anything. But supported and default locales depends of developer implementation, so everyone must be responsible to add proper implementations for every widget subset (Material, Cupertino, Fluent...)

I think we should adhere to the same behaviour of Material or Cupertino, which is in fact the current one.

[Enrique Cardona]

@bdlukaa Agree! We can solve this via docs. Great idea 👍🏻