常連

### 前提・実現したいこと

現在、UdacityのBuild Native Mobile Apps with Flutterを進めています。
この講座のLesson2-11でエラーが出てしまい、先に進めません。
解決方法を教えていただきたく存じます。

### 発生している問題・エラーメッセージ

```
LateInitializationError: Field '_currentCategory@24037776' has not been initialized.

```

### 該当のソースコード

```ここに言語名を入力
import 'package:flutter/material.dart';

import 'backdrop.dart';
import 'category.dart';
import 'category_tile.dart';
import 'unit.dart';
import 'unit_converter.dart';

class CategoryRoute extends StatefulWidget {
  const CategoryRoute();

  @override
  _CategoryRouteState createState() => _CategoryRouteState();
}

class _CategoryRouteState extends State<CategoryRoute> {
  late Category _defaultCategory;
  late Category _currentCategory;
  final _categories = <Category>[];
  static const _categoryNames = <String>[
    'Length',
    'Area',
    'Volume',
    'Mass',
    'Time',
    'Digital Storage',
    'Energy',
    'Currency',
  ];
 static const _baseColors = <ColorSwatch>[
   Colors.teal,
   Colors.orange,
   Colors.pinkAccent,
   Colors.blueAccent,
   Colors.yellow,
   Colors.greenAccent,
   Colors.purpleAccent,
   Colors.red,
 ];

 static const _categoryIcon = <IconData> [
   Icons.thumb_up,
   Icons.thumb_down,
   Icons.accessibility,
   Icons.accessible,
   Icons.accessible_outlined,
   Icons.account_box,
   Icons.adb,
   Icons.add_a_photo,
   Icons.add_alarm,
 ];

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < _categoryNames.length; i++) {
      var category = Category(
        name: _categoryNames[i],
        color: _baseColors[i],
        icon: _categoryIcon[i],
        units: _retrieveUnitList(_categoryNames[i]),
      );
      if (i == 0) {
        _defaultCategory = category;
      }
      _categories.add(category);
    }
  }

  void _onCategoryTap(Category category) {
    setState(() {
      _currentCategory = category;
    });
  }

  Widget _buildCategoryWidgets() {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return CategoryTile(
          category: _categories[index],
          onTap: _onCategoryTap,
        );
      },
      itemCount: _categories.length,
    );
  }

  List<Unit> _retrieveUnitList(String categoryName) {
    return List.generate(10, (int i) {
      i += 1;
      return Unit(
        name: '$categoryName Unit $i',
        conversion: i.toDouble(),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    final listView = Padding(
      padding: EdgeInsets.only(
        left: 8.0,
        right: 8.0,
        bottom: 48.0,
      ),
      child: _buildCategoryWidgets(),
    );

    return Backdrop(
      currentCategory:
          _currentCategory == null ? _defaultCategory : _currentCategory,
      frontPanel: _currentCategory == null
          ? UnitConverter(category: _defaultCategory)
          : UnitConverter(category: _currentCategory),
      backPanel: listView,
      frontTitle: Text('Unit Converter'),
      backTitle: Text('Select a Category'),
    );
  }
}
```

### 試したこと
[試した解決方法(リンク先はstackoverflowです）](https://stackoverflow.com/questions/67401385/lateinitializationerror-field-data-has-not-been-initialized-got-error)



### 補足情報（FW/ツールのバージョンなど）

Flutter 2.20
Dart 2.13.0
VSCode 1.56.2

LateInitializatioinErrorの対処法を教えてください。

AndroidStudioにてDartSDKのバージョン変更の方法を知りたいです。

FlutterでRiverpodを導入しようとしたところ、以下エラーが出てきて先へ進めません。

```
The current Dart SDK version is 2.13.4.

Because riverpod_sample requires SDK version >=2.14.0 <3.0.0, version solving failed.
pub get failed (1; Because riverpod_sample requires SDK version >=2.14.0 <3.0.0, version solving failed.)
```

pubspec.yamlにて、
```ここに言語を入力
environment:
  sdk: ">=2.14.0 <3.0.0"
```
上記のように変更をしてから「Pub get」を行おうとしても、同様のエラーが出てきて、先へは進めません。

AndroidStudioで進めており、Dart SDKのバージョンは以下の通りです。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-13/85be1806-7b78-45bd-b14d-6530b426bae6.png)

Dart SDKのバージョンを変更したいのですが、変更方法がわからないため、教えていただきたいです。
以下リンクの内容も試してみましたが、「2.14.0」への変更ができませんでした。
[https://dart.dev/get-dart](url)

「flutter upgrade」を行っても、DartSDKのバージョンは更新されませんでした。

どのようにしたら良いでしょうか？
よろしくお願いいたします。

【Flutter】Dart SDKのバージョン変更をしたい【AndroidStudio】

### 実現したいこと
こんにちは。現在RiverpodのStateNotifierProvider.autoDisposeを使用してログイン画面のViewModelを実装しています。ViewModel内にはフォーム用のGlobalKeyを持たせており、Widgetからそのキーを参照しています。

### 発生している問題・分からないこと
1. Duplicate GlobalKeyエラー: ログイン後にログアウトして再びログイン画面に遷移すると、『Duplicate GlobalKey detected in widget tree.』というエラーが表示されます。
2. 状態の維持: StateNotifierProvider.autoDisposeを使用しているにもかかわらず、画面遷移後も前回入力したログイン情報が残っており、状態が維持されています。状態は破棄されるべきだと思いますが、破棄されていないようです。
3. onDisposeが呼び出されない: ref.onDisposeで破棄時にログを出力するように設定しましたが、画面遷移時にログが出力されません。他のautoDisposeのproviderを使用している画面でも同様にref.onDisposeが呼び出されていないことから、providerが破棄されていない原因があると考えています。

質問
1. RiverpodのStateNotifier.autoDisposeを使用する際に、GlobalKeyをViewModel内で管理することは適切でしょうか？
2. Duplicate GlobalKeyエラーを回避するためのベストプラクティスがあれば教えてください。
3. autoDisposeが期待通りに動作しておらず、状態が維持されてしまう問題について、何か考えられる原因や解決策はありますか？
4.ref.onDisposeが呼び出されない理由について、考えられる点やデバッグ方法を教えてください。

アドバイスや経験談があれば教えていただけると助かります。

よろしくお願いします。

### エラーメッセージ
```error
======== Exception caught by widgets library =======================================================
The following assertion was thrown while finalizing the widget tree:
Duplicate GlobalKey detected in widget tree.

The following GlobalKey was specified multiple times in the widget tree. This will lead to parts of the widget tree being truncated unexpectedly, because the second time a key is seen, the previous instance is moved to the new location. The key was:
- [LabeledGlobalKey<FormState>#2ae82]
This was determined by noticing that after the widget with the above global key was moved out of its previous parent, that previous parent never updated during this frame, meaning that it either did not update at all or updated before the widget was moved, in either case implying that it still thinks that it should have a child with that global key.
The specific parent that did not update after having one or more children forcibly removed due to GlobalKey reparenting is:
- Padding(padding: EdgeInsets(41.3, 0.0, 41.3, 0.0), dependencies: [Directionality], renderObject: RenderPadding#cf18c relayoutBoundary=up2 NEEDS-PAINT)
A GlobalKey can only be specified on one widget at a time in the widget tree.
When the exception was thrown, this was the stack: 
#0      BuildOwner.finalizeTree.<anonymous closure> (package:flutter/src/widgets/framework.dart:3235:15)
#1      BuildOwner.finalizeTree (package:flutter/src/widgets/framework.dart:3260:8)
#2      WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:1143:19)
#3      RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:443:5)
#4      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1392:15)
#5      SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1313:9)
#6      SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1171:5)
#7      _invoke (dart:ui/hooks.dart:312:13)
#8      PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:419:5)
#9      _drawFrame (dart:ui/hooks.dart:283:31)
====================================================================================================

```

### 該当のソースコード

```Dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:vparty/repositories/user_repository.dart';
import 'package:vparty/repositories/vrchat_repository.dart';
import 'package:vparty/services/user_service.dart';
import 'package:vparty/services/vrchat_service.dart';
import 'package:vparty/ui/screens/bottom_navigation_screen.dart';
import 'package:vparty/ui/screens/create_account_screen.dart';
import 'package:vparty/ui/screens/email_one_time_code_screen.dart';
import 'package:vparty/ui/utils/show_loading_dialog.dart';
import 'package:vparty/utils/shared_prefs.dart';
import 'package:vparty/view_model/base_view_model.dart';

part 'login_view_model.freezed.dart';

@freezed
class LoginState with _$LoginState {
  const factory LoginState({
    @Default("") String username,
    @Default("") String password,
    Exception? exception,
  }) = _LoginState;
}

final loginProvider =
    StateNotifierProvider.autoDispose<LoginViewModel, LoginState>((ref) {
  ref.onDispose(() {
    print('disposed');
  });
  return LoginViewModel();
});

class LoginViewModel extends BaseViewModel<LoginState> {
  LoginViewModel() : super(const LoginState());

  GlobalKey<FormState> formKey = GlobalKey<FormState>();

  void inputUsername(String username) {
    state = state.copyWith(username: username);
  }

  void inputPassword(String password) {
    state = state.copyWith(password: password);
  }

  void login(BuildContext context) async {
    if (!formKey.currentState!.validate()) return;
    await LoadingDialog.show(context);
    try {
      final repository = await VRChatRepository.create();
      final service = VRChatService(repository);
      final isRequireTwoFactorAuth =
          await service.login(state.username, state.password);

      Widget screen;
      if (isRequireTwoFactorAuth) {
        screen = const EmailOneTimeCodeScreen();
      } else {
        //Firebase上にuserIDが存在するか確認する。
        final userService = UserService(repository: UserRepository());
        final uid = await SharedPrefs.getVRChatUid();
        if (uid == null) throw Exception('uid is null');
        final isExistUserID = await userService.isExistUserID(uid);
        screen = isExistUserID
            ? BottomNavigationScreen()
            : const CreateAccountScreen();
      }

      Navigator.pushReplacement(
          context, MaterialPageRoute(builder: (context) => screen));
    } catch (e) {
      state = state.copyWith(exception: e as Exception);
    } finally {
      LoadingDialog.close(context);
    }
  }

  @override
  void dismissException() {
    state = state.copyWith(exception: null);
  }
}

```

```Dart
@override
  Widget build(BuildContext context, ref) {
    final notifier = ref.read(loginProvider.notifier);
    final state = ref.watch(loginProvider);
    showError(context, state.exception, notifier);
    return LoginScaffold(
        child: Stack(
      children: [
        buildInfoIcon(onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return const ContactUsScreen();
          }));
        }),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: SizeConfig.width * 11),
          child: Form(
            key: notifier.formKey,
            child: Column(
              children: [
                Gap(SizeConfig.height * 10),
                Image.asset('assets/images/logos/VRChatLogo.png'),
                Gap(SizeConfig.height * 10),
                buildLoginTextField(
                  hintText: AppString.usernameOrEmail,
                  obscureText: false,
                  onChanged: (text) => notifier.inputUsername(text),
                  validator: Validators.validateUsernameOrEmail,
                ),
                Gap(SizeConfig.height * 5),
                buildLoginTextField(
                  hintText: AppString.password,
                  obscureText: true,
                  onChanged: (text) => notifier.inputPassword(text),
                  validator: Validators.validatePassword,
                ),
                Gap(SizeConfig.height * 10),
                buildLoginButton(onPressed: () => notifier.login(context)),
              ],
            ),
          ),
        ),
      ],
    ));
  }
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [x] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
StackOverFlowでautodisposeをつけてporivderが破棄されないケースを調べましたが、よくわかりませんでした。

### 補足
先ほどNavigator.pushメソッドの前にNavigator.popメソッドを走らせたら、無事providerが破棄されました。

Flutterで前の画面に遷移すると『Duplicate GlobalKey detected in widget tree.』とエラーが表示される

### 実現したいこと

- [ ] The expression doesn't evaluate to a function, so it can't be invoked.を解決させて、正常な挙動にする。

### 前提

FlutterのUI構築の仕方を勉強するにあたり、Youtubeの動画を真似して勉強しています。

### 発生している問題・エラーメッセージ

```
The expression doesn't evaluate to a function, so it can't be invoked.
```

### 該当のソースコード

```nav_screen.dart
import 'package:facebook_clone/screens/screens.dart';
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'home_screen.dart';

import '../widgets/widgets.dart';

class NavScreen extends StatefulWidget {
  const NavScreen({super.key});

  @override
  State<NavScreen> createState() => _NavScreenState();
}

class _NavScreenState extends State<NavScreen> {
  final List<Widget> _screens = [
    HomeScreen(),
    Scaffold(),
    Scaffold(),
    Scaffold(),
    Scaffold(),
    Scaffold(),
  ];
  final List<IconData> _icons = [
    Icons.home,
    Icons.ondemand_video,
    MdiIcons.accountCircleOutline,
    MdiIcons.accountGroupOutline,
    MdiIcons.bellOutline,
    Icons.menu,
  ];
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: _icons.length,
      child: Scaffold(
        body: _screens(_selectedIndex),
        bottomNavigationBar: CustomTabBar(
          icons: _icons,
          selectedIndex: _selectedIndex,
          onTap: (index) => setState(() => _selectedIndex = index),
        ),
      ),
    );
  }
}

```
```home_screen.dart
import 'package:facebook_clone/config/palette.dart';
import 'package:facebook_clone/data/data.dart';
import 'package:facebook_clone/widgets/circle_button.dart';
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:facebook_clone/widgets/widgets.dart';

import '../models/models.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            brightness: Brightness.light,
            backgroundColor: Colors.white,
            title: Text(
              "facebook",
              style: TextStyle(
                color: Palette.facebookBlue,
                fontSize: 28.0,
                fontWeight: FontWeight.bold,
                letterSpacing: -1.2,
              ),
            ),
            centerTitle: false,
            floating: true,
            actions: [
              CircleButton(
                icon: Icons.search,
                iconSize: 30.0,
                onPressed: () => print("Search"),
              ),
              CircleButton(
                icon: MdiIcons.facebookMessenger,
                iconSize: 30.0,
                onPressed: () => print("Messenger"),
              ),
            ],
          ),
          SliverToBoxAdapter(
            child: CreatePostContainer(currentUser: currentUser),
          ),
          SliverPadding(
            padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 5.0),
            sliver: SliverToBoxAdapter(
              child: Rooms(onlineUsers: onlineUsers),
            ),
          ),
          SliverPadding(
            padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0),
            sliver: SliverToBoxAdapter(
              child: Stories(
                currentUser: currentUser,
                stories: stories,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                final Post post = posts[index];
                return PostContainer(post: post);
              },
              childCount: posts.length,
            ),
          ),
        ],
      ),
    );
  }
}

```

```widgets.dart
export 'circle_button.dart';
export 'create_post_container.dart';
export 'rooms.dart';
export 'profile_avatar.dart';
export 'stories.dart';
export 'post_container.dart';
export 'custom_tab_bar.dart';

```


### 試したこと

The expression doesn't evaluate to a function, so it can't be invoked.を和訳したところ、
この式は関数として評価されないので、呼び出すことはできません。という意味だと判明。
The expression doesn't evaluate to a function, so it can't be invoked.でググったところ、以下のページに行き着く。
https://stackoverflow.com/questions/63667623/currentuser-is-not-working-type-why-i-am-seeing-the-expression-doesnt-evaluat
上記のページをもとにして考えてみたところ、nav_screen.dart38行目での記述body: _screens(_selectedIndex),は関数の呼び出しで使っているはずなのに記述として間違っていることはわかりました。しかしお手本にしている動画(1:05:30秒辺り)https://www.youtube.com/watch?v=HvLb5gdUfDE&t=62s
では関数の呼び出しとして機能しています。いろいろ自分なりに調べてみましたが今回の場合どう対応させれば良いのかというのが30分ほど考えてみましたがわからなかったので質問させてください。
現在FlutterのUIの構築のやり方を勉強するという段階なので今回の場合だとどううまく対応させれば良いかがわからない状況です。widgets.dartにexportしている各ファイルは記述量が多くなってしまうのでコメント欄に記載させていただきます。情報の追加依頼などありましたらコメントお願いします。
### 補足情報（FW/ツールのバージョンなど）
[✓] Flutter (Channel stable, 3.7.0, on macOS 13.1 22C65
darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices
(Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.74.3)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

参考にしている動画
https://www.youtube.com/watch?v=HvLb5gdUfDE&t=62s






The expression doesn't evaluate to a function, so it can't be invoked.

flutter学習中です。

## テーマ、知りたいこと

任意の画面の初回描画時のみ処理を書いていますが（ボタンを押した後は実行されない）、こういった際は、StatefulWidgetのinitState()を使用するのが一般的でしょうか？
又、他に選択肢はあるのでしょうか？

## 背景

色々なサイトで学習していると現在はriverpodを使用するのが主流と書いてあり、StatefulWidgetはあまり使わないと書いてます。riverpodで書く事は出来るのでしょうか？また、riverpod（他の方法でも）に置き換えることは妥当なのでしょうか？

## 状況

念の為に、下にコードも出します。簡略化しているので動作しなければご容赦下さい。
CRUD対応のツイッター的なアプリを作っています。

＊入力画面から遷移して来る
＊初回描画にfirestoreにデータを作成。
＊登録完了を表示
＊ボタンを押して一覧画面へ遷移

このコードの中でinitState()を使用しないと、初回描画とボタンを押した際で２回
    await db.collection('tweets').doc().set(
      {
        'userName': widget.tweet_username,
        'text': widget.tweet_text,
      },
が実行されてしまいました。

よろしくお願いします。


```dart
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class TweetAddexec extends StatefulWidget {
  final String tweet_username;
  final String tweet_text;

  const TweetAddexec({
    Key? key,
    required this.tweet_username,
    required this.tweet_text,
  }) : super(key: key);

  @override
  _TweetAddexecState createState() => _TweetAddexecState();
}

class _TweetAddexecState extends State<TweetAddexec> {
  @override
  void initState() {
    super.initState();

    final db = FirebaseFirestore.instance;
    await db.collection('tweets').doc().set(
      {
        'userName': widget.tweet_username,
        'text': widget.tweet_text,
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      appBar: AppBar(
        title: Text('登録完了'),
        automaticallyImplyLeading: false,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => GoRouter.of(context).push('/tweet/index'),
        child: const Text('一覧画面へ'),
      ),
    );
  }
}

```

flutter、dart 初回描画時のみ実行される

# 解決したいこと
![m1](4716be4099b700e939d68260818cb991.jpeg)

「作品の見所」と言うテキストを、黄色の枠内で**上下だけ中央にしたいです！**

**「縦だけ中央」のイメージとしては下記????のような状態です。**
上下に中央で左に少しのpaddingを持たせるイメージです。
![m2](5b307552ebe501a14c4667da50654520.jpeg)

このようなデザインにするにはどうすれば良いでしょうか？？


#該当のソース

```dart
Container(
    width: MediaQuery.of(context).size.width,
    height: 50,
    color: Theme.of(context).primaryColor,
      child: Text(
         '作品の見所',
          style: Theme.of(context).textTheme.headline5,
           ),
      )
```

Flutter テキストを上下だけ中央にするには？

### 前提

FlutterのUI構築の仕方を勉強するにあたり、Youtubeの動画を真似して勉強しています。

### 実現したいこと


- [ ] type 'Null' is not a subtype of type 'String'を解決させて正常な挙動にする。
### 発生している問題・エラーメッセージ

```
The following _TypeError was thrown building CastCard(dirty):
type 'Null' is not a subtype of type 'String'

The relevant error-causing widget was:
  CastCard
  CastCard:file:///Users/User/Flutter/movie_app/movie_app/lib/screens/details/components/cast_and_crew.dart:28:48
```

### 該当のソースコード

```cast_and_crew.dart
import 'package:flutter/material.dart';
import 'package:movie_app/constants.dart';

import 'cast_card.dart';

class CastAndCrew extends StatelessWidget {
  final List casts;

  const CastAndCrew({super.key, required this.casts});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(kDefaultPadding),
      child: Column(
        children: <Widget>[
          Text(
            "Cast & Crew",
            style: Theme.of(context).textTheme.headline5,
          ),
          SizedBox(
            height: kDefaultPadding,
          ),
          SizedBox(
            height: 160,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: casts.length,
              itemBuilder: (context, index) => CastCard(cast: casts[index]),
            ),
          ),
        ],
      ),
    );
  }
}

```

```constants.dart
import 'package:flutter/material.dart';

const kSecondaryColor = Color(0xFFFE6DBE);
const kTextColor = Color(0xFF12153D);
const kTextLightColor = Color(0xFF9A9BB2);
const kFillStarColor = Color(0xFFFCC419);

const kDefaultPadding = 20.0;

const kDefaultShadow = BoxShadow(
  offset: Offset(0, 4),
  blurRadius: 4,
  color: Colors.black26,
);
```

```cast_card.dart
import 'package:flutter/material.dart';
import 'package:movie_app/constants.dart';

class CastCard extends StatelessWidget {
  final Map cast;

  const CastCard({super.key, required this.cast});
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(right: kDefaultPadding),
      width: 80,
      child: Column(
        children: <Widget>[
          Container(
            height: 80,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                image: AssetImage(
                  cast['image'],
                ),
              ),
            ),
          ),
          SizedBox(
            height: kDefaultPadding / 2,
          ),
          Text(
            cast['originalName'],
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.bodyText2,
            maxLines: 2,
          ),
          SizedBox(
            height: kDefaultPadding / 4,
          ),
          Text(
            cast['movieName'],
            maxLines: 1,
            textAlign: TextAlign.center,
            style: TextStyle(color: kTextLightColor),
          ),
        ],
      ),
    );
  }
}

```

```movie.dart
// Our movie model
class Movie {
  final int id, year, numOfRatings, criticsReview, metascoreRating;
  final double rating;
  final List<String> genra;
  final String plot, title, poster, backdrop;
  final List<Map> cast;

  Movie({
    required this.poster,
    required this.backdrop,
    required this.title,
    required this.id,
    required this.year,
    required this.numOfRatings,
    required this.criticsReview,
    required this.metascoreRating,
    required this.rating,
    required this.genra,
    required this.plot,
    required this.cast,
  });
}

// our demo data movie data
List<Movie> movies = [
  Movie(
    id: 1,
    title: "Bloodshot",
    year: 2020,
    poster: "assets/images/poster_1.jpg",
    backdrop: "assets/images/backdrop_1.jpg",
    numOfRatings: 150212,
    rating: 7.3,
    criticsReview: 50,
    metascoreRating: 76,
    genra: ["Action", "Drama"],
    plot: plotText,
    cast: [
      {
        "orginalName": "James Mangold",
        "movieName": "Director",
        "image": "assets/images/actor_1.png",
      },
      {
        "orginalName": "Matt Damon",
        "movieName": "Carroll",
        "image": "assets/images/actor_2.png",
      },
      {
        "orginalName": "Christian Bale",
        "movieName": "Ken Miles",
        "image": "assets/images/actor_3.png",
      },
      {
        "orginalName": "Caitriona Balfe",
        "movieName": "Mollie",
        "image": "assets/images/actor_4.png",
      },
    ],
  ),
  Movie(
    id: 2,
    title: "Ford v Ferrari ",
    year: 2019,
    poster: "assets/images/poster_2.jpg",
    backdrop: "assets/images/backdrop_2.jpg",
    numOfRatings: 150212,
    rating: 8.2,
    criticsReview: 50,
    metascoreRating: 76,
    genra: ["Action", "Biography", "Drama"],
    plot: plotText,
    cast: [
      {
        "orginalName": "James Mangold",
        "movieName": "Director",
        "image": "assets/images/actor_1.png",
      },
      {
        "orginalName": "Matt Damon",
        "movieName": "Carroll",
        "image": "assets/images/actor_2.png",
      },
      {
        "orginalName": "Christian Bale",
        "movieName": "Ken Miles",
        "image": "assets/images/actor_3.png",
      },
      {
        "orginalName": "Caitriona Balfe",
        "movieName": "Mollie",
        "image": "assets/images/actor_4.png",
      },
    ],
  ),
  Movie(
    id: 1,
    title: "Onward",
    year: 2020,
    poster: "assets/images/poster_3.jpg",
    backdrop: "assets/images/backdrop_3.jpg",
    numOfRatings: 150212,
    rating: 7.6,
    criticsReview: 50,
    metascoreRating: 79,
    genra: ["Action", "Drama"],
    plot: plotText,
    cast: [
      {
        "orginalName": "James Mangold",
        "movieName": "Director",
        "image": "assets/images/actor_1.png",
      },
      {
        "orginalName": "Matt Damon",
        "movieName": "Carroll",
        "image": "assets/images/actor_2.png",
      },
      {
        "orginalName": "Christian Bale",
        "movieName": "Ken Miles",
        "image": "assets/images/actor_3.png",
      },
      {
        "orginalName": "Caitriona Balfe",
        "movieName": "Mollie",
        "image": "assets/images/actor_4.png",
      },
    ],
  ),
];

String plotText =
    "American car designer Carroll Shelby and driver Kn Miles battle corporate interference and the laws of physics to build a revolutionary race car for Ford in order.";

```

### 試したこと

type 'Null' is not a subtype of type 'String'を和訳したところ、
タイプ 'Null' はタイプ 'String' のサブタイプではありません。という意味だと判明。
type 'Null' is not a subtype of type 'String'でググったところ、以下のページに行き着く。
https://yakiimosan.com/flutter-setup-error-nullsafety-to-string/
今回のエラーは、Dart2.12以降で見られるNull Safetyにあるのかな？という推測で、メッセージにCastCard:file:///Users/User/Flutter/movie_app/movie_app/lib/screens/details/components/cast_and_crew.dart:28:48とあるので、cast_and_crew.dart:28にto Stringを追加してみましたが、The argument type 'String' can't be assigned to the parameter type 'Map<dynamic, dynamic>'.とエラーが吐かれるので解決に至らずといった状況です。
現在FlutterのUIの構築のやり方を勉強するという段階なので何をどうすれば良いかがわからない状況です。

### 補足情報（FW/ツールのバージョンなど）
[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1
    22A400 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices
    (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.74.3)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

constants.dartはコンスタントに使うpaddingだったりColorをまとめているファイルで、movie.dartはモデルファイルとなっております。



type 'Null' is not a subtype of type 'String'

### 前提・実現したいこと

Flutter(Dart)を用いて、外部APIにアクセスして情報を取得するシステムを作っています。
[HotPepperのAPI](https://webservice.recruit.co.jp/doc/hotpepper/reference.html)から情報を取得するテストとして、ターミナルに取得した情報を表示するプログラムを実行する際にエラーが発生しました。

参考にしたサイト：[https://qiita.com/abouch/items/90107b330bb126a6f742](https://qiita.com/abouch/items/90107b330bb126a6f742)

### 発生している問題・エラーメッセージ
`await http.get(Uri.parse(url)).then((response)...`の部分で、以下のエラーが発生した。

```
Error: XMLHttpRequest error.
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 909:28                get current
packages/http/src/browser_client.dart 71:22                                       <fn>
dart-sdk/lib/async/zone.dart 1613:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 155:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 707:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 736:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 533:7                                         [_complete]
dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
dart-sdk/lib/async/stream.dart 1219:7                                             <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39  dcall
dart-sdk/lib/html/dart2js/html_dart2js.dart 37307:58                              <fn>
    at Object.createErrorWithStack (http://localhost:55435/dart_sdk.js:5054:12)
    at Object._rethrow (http://localhost:55435/dart_sdk.js:37670:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:55435/dart_sdk.js:37666:13)
    at Object._microtaskLoop (http://localhost:55435/dart_sdk.js:37526:13)
    at _startMicrotaskLoop (http://localhost:55435/dart_sdk.js:37532:13)
    at http://localhost:55435/dart_sdk.js:33303:9

```

### 該当のソースコード

```dart
import 'package:flutter/material.dart'; //google提供のUIデザイン
import 'package:http/http.dart' as http; //httpリクエスト用
import 'dart:async'; //非同期処理用
import 'dart:convert'; //httpレスポンスをJSON形式に変換用

void main() {
  HotPepperClient.fetchHotPepper().then((restaurants) => {
        restaurants?.forEach((restaurant) => {print(restaurant.name)})
      });
}

class HotPepper {
  （略）
}

class HotPepperClient {
  static Future<List<HotPepper>?> fetchHotPepper() async {
    String baseUrl =
        'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=******************';
    String url = baseUrl + "&lat=**.*****&lng=**.*****&format=json";
    print(url);
    await http.get(Uri.parse(url)).then((response) {
      print(response);
      if (response.statusCode == 200) {
        final List<dynamic> jsonArray = json.decode(response.body);
        return jsonArray.map((json) => HotPepper.fromJson(json)).toList();
      } else {
        throw Exception('Failed to load article');
      }
    });
  }
}
```

### 試したこと
- URLは正しいことを確認しています（ブラウザ直打ちで、json形式で取得できた）
- エラーについて調査しましたが、サーバー側を改変しなければならないものが多く、クライアント側で解決する方法が見つかりませんでした
- https://www.fixes.pub/program/452586.html

### 実行環境
* Mac Book Pro (intel)
* VS Code
* Chrome (Web)

よろしくお願いします。