Zenn
🐛

[Flutter] No Directionality widget found.

2021/12/07に公開
Flutter
マテリアルデザイン
Dart
tech

エラー

「Directionality widget が見つからない」と怒られた。
text directionを設定してくれということらしい。

FlutterError (No Directionality widget found.
Stack widgets require a Directionality widget ancestor to resolve the 'alignment' argument.
The default value for 'alignment' is AlignmentDirectional.topStart, which requires a text direction.
The specific widget that could not find a Directionality ancestor was:
  Stack
The ownership chain for the affected widget is: "Stack ← ModalProgressHUD ← App ← UncontrolledProviderScope ← ProviderScope ← [root]"
Typically, the Directionality widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree. It determines the ambient reading direction and is used, for example, to determine how to lay out text, how to interpret "start" and "end" values, and to resolve EdgeInsetsDirectional, AlignmentDirectional, and other *Directional objects.
Instead of providing a Directionality widget, another solution would be passing a non-directional 'alignment', or an explicit 'textDirection', to the Stack.)

エラーが発生したコード。

class App extends HookConsumerWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ModalProgressHUD(
      inAsyncCall: true,
      child: MaterialApp(
        title: "NavigatorApp",
        home: SplashPage(),
      ),
    );
  }
}

解決策 1

ModalProgressHUDをMaterialAppの子となる部分に置く。

class App extends HookConsumerWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return: MaterialApp(
      title: "NavigatorApp",
      home: ModalProgressHUD(
        inAsyncCall: true,
	child: SplashPage(),
      ),
    );
  }
}

キャッシュが残っていて、エラーが消えない場合は下記コマンド。

flutter clean
flutter pub get

解決策 2

Directionality で囲む。

class App extends HookConsumerWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Directionality(
        textDirection: TextDirection.ltr,
	child : ModalProgressHUD(
          inAsyncCall: true,
          child: MaterialApp(
            title: "NavigatorApp",
            home: SplashPage(),
	  ),
	),
      ),
    );
  }
}

キャッシュが残っていて、エラーが消えない場合は下記コマンド。

flutter clean
flutter pub get

MaterialAppとは？

マテリアルデザインを使用するアプリケーション。
マテリアルデザインアプリケーションで一般的に必要とされる多数のウィジェットをラップする便利なウィジェット。 AnimatedThemeやGridPaperなどのマテリアルデザイン固有の機能を追加することにより、WidgetsAppに基づいて構築されています。
MaterialAppは、次の順序でルートを検索するようにトップレベルのナビゲーターを構成します。

  1. /ルートには、nullでない場合はhomeプロパティが使用されます。
  2. それ以外の場合、ルートのエントリがある場合は、ルートテーブルが使用されます。
  3. それ以外の場合は、onGenerateRouteが呼び出されます（提供されている場合）。 homeおよびroutesによって処理されない有効なルートに対してnull以外の値を返す必要があります。
  4. 最後に、他のすべてが失敗した場合、onUnknownRouteが呼び出されます。

参考

https://api.flutter.dev/flutter/material/MaterialApp-class.html
https://stackoverflow.com/questions/53923928/no-directionality-widget-found-inkwell-widgets-require-a-directionality-widget

Discussion