The argument type 'Null' can't be assigned to the parameter type 'Widget'.

Question

実現したいこと

• The argument type 'Null' can't be assigned to the parameter type 'Widget'.を解決させて理想的な挙動を実現させる。

前提

FlutterのUI構築及びレスポンシブ対応の仕方を勉強するにあたり、Youtubeの動画を真似して勉強しています。

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

The argument type 'Null' can't be assigned to the parameter type 'Widget'.

該当のソースコード

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 GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      child: Scaffold(
        body: Responsive(
          mobile: _HomeScreenMobile(),
          desktop: _HomeScreenDesktop(),
          tablet: null, 
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return 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,
          ),
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          flex: 2,
          child: Container(
            color: Colors.orange,
          ),
        ),
        Spacer(),
        Container(
          width: 600.0,
          color: Colors.red,
        ),
        Spacer(),
        Flexible(
          flex: 2,
          child: Container(
            color: Colors.blue,
          ),
        ),
      ],
    );
  }
}

import 'package:flutter/material.dart';

class Responsive extends StatelessWidget {
  final Widget mobile;
  final Widget tablet;
  final Widget desktop;
  const Responsive({
    super.key,
    required this.mobile,
    required this.tablet,
    required this.desktop,
  });

  static bool isMobile(BuildContext context) =>
      MediaQuery.of(context).size.width < 800;

  static bool isTablet(BuildContext context) =>
      MediaQuery.of(context).size.width >= 800 &&
      MediaQuery.of(context).size.width < 1200;

  static bool isDesktop(BuildContext context) =>
      MediaQuery.of(context).size.width >= 1200;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 1200) {
          return desktop;
        } else if (constraints.maxWidth >= 800) {
          return tablet;
        } else {
          return mobile;
        }
      },
    );
  }
}

試したこと

警告メッセージはhome_screen.dart内の21行目tablet: null, で発生しており、responsive.dart内で定義したResponsiveクラス内に変数tabletとして定義しているが、home_screen.dart内ではnullになっているために発生したエラーです。
Responsiveクラスの定義内でmobile, tablet, desktopに対してnull check operatorを使用しているので、mobile, tablet, やdesktopは必須である(必ず引数として渡される)前提のロジックです。ここでの最適な解決法（変数宣言時にnullを許容したり）をググったり、試したりというのを20分ほど試行錯誤しましたが解決に至らなかったので有識者の方にご教示していただきたいです。さらなる情報提供依頼はコメントにてよろしくお願いします。responsive.dartはwidgets.dartにexportされ、home_screen.dartがwidgets.dartをimportする形となっています。よろしくお願いします。

補足情報（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

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

Answer 1

提示されたyoutubeチャンネルとそれにリンクするgithubのソースを見ると以下の様になってます。

https://github.com/MarcusNg/flutter_facebook_responsive_ui/blob/master/lib/widgets/responsive.dart

Null対応されていませんがもし対応するとしたら以下の様な感じになるのでしょうか。

import 'package:flutter/material.dart';

class Responsive extends StatelessWidget {
  final Widget mobile;
  final Widget? tablet;// これがnull許容な変数
  final Widget desktop;

  const Responsive({
    Key? key,
    required this.mobile,
    this.tablet, // null許容なので必須パラメータではない
    required this.desktop,
  }) : super(key: key);

  static bool isMobile(BuildContext context) =>
      MediaQuery.of(context).size.width < 800;

  static bool isTablet(BuildContext context) =>
      MediaQuery.of(context).size.width >= 800 &&
      MediaQuery.of(context).size.width < 1200;

  static bool isDesktop(BuildContext context) =>
      MediaQuery.of(context).size.width >= 1200;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 1200) {
          return desktop;
        } else if (constraints.maxWidth >= 800) {
          return tablet ?? mobile; // tabletがnullならmobileを使う
        } else {
          return mobile;
        }
      },
    );
  }
}

tabletがnull許容でnullだったらmobileを充当するという実装になってます。

オリジナルのソースもしくは動画をきちんと見てれば、とりあえず違いは分かるのでは？
まあ、それ以前にnull許容非対応のソースを参考にするのは、初心者の教育用としてはどうかとは思いますが。

Answer 2

まず「アプリをどういう挙動にしたいのか」という要求があって、その要求に対する最適な解決法が決まる、ということですよね。
とりあえずエラーが出ないようにするには、nullを渡さずに下記のように非null値を渡したら良いと思います。

        body: Responsive(
          mobile: _HomeScreenMobile(),
          desktop: _HomeScreenDesktop(),
          tablet: _HomeScreenTablet(), //←非null値を渡す
        ),

class _HomeScreenTablet extends StatelessWidget {
  //必要な定義用コード
  //...
}

あるいは、tabletは不要、ということならResponsiveクラスのtabletフィールドと関連するロジック箇所を削除することになりますよね。

Comments

[Jedda]

回答ありがとうございます。
確かにnullでエラーメッセージが出るなら、最初の定義時にtabletフィールドは定義しないということも考えましたが、参考動画では定義したままエラーが発生せずに進んでいたので、とりあえずクラスなども定義せずにエラーメッセージも出てこない簡単な解決法などがあるのかな？という認識でした。

[Jedda]

適切な回答ありがとうございました。基本に対してぼんやりしているところがあったので、それに対しての明示的な回答をいただくことができ解決できました！