質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.59%

flutter:画面遷移時の”The builder for route "/" returned null.”エラー

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 408

Inete6Q

score 3

前提・実現したいこと

flutter学習で画面遷移を実装しようとしています。
KboyさんのYouTube動画を見て、写経していました。
Navigate with named routesを使おうとしています。

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

The builder for route "/" returned null.

Route builders must never return null.
The relevant error-causing widget was: 
  MaterialApp file:///Users/to/AndroidStudioProjects/coriander3/lib/main.dart:12:12
When the exception was thrown, this was the stack: 
#0      MaterialRouteTransitionMixin.buildPage.<anonymous closure> (package:flutter/src/material/page.dart:107:9)
#1      MaterialRouteTransitionMixin.buildPage (package:flutter/src/material/page.dart:113:6)
#2      _ModalScopeState.build.<anonymous closure> (package:flutter/src/widgets/routes.dart:826:45)
#3      Builder.build (package:flutter/src/widgets/basic.dart:7118:48)
#4      StatelessElement.build (package:flutter/src/widgets/framework.dart:4620:28)

該当のソースコード

//以下、main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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



  final String title;

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

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

  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(

        child: RaisedButton(
          child: Text('次へ'),
          onPressed: (){
            Navigator.pushNamed(context, '/next');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}



//以下、next_page.dart
import 'package:flutter/material.dart';

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(

        title: Text('次の画面'),
      ),
      body: Container(
        height: double.infinity,
        color: Colors.red,
        child: Center(
          child: RaisedButton(
          child: Text('戻る'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      ),
    );
  }

}

試したこと

home: MyHomePage(title: 'Flutter Demo Home Page'),


の記述を削除後、initialRoute以下を追加した際にエラーが起きました。
(その前まではエラーなく動きました。)

//以下を追加
initialRoute: '/',
      routes: {

        '/': (context) => MyHomePage(),

        '/next': (context) => NextPage(),
      },

補足情報(FW/ツールのバージョンなど)

Android studio 4.0.1
Xcode 11.3.1
MacBook Air (13-inch, 2017)
MacOS Catalina 10.15.1
エミュレータ iPhone8(mobile)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

コードが綺麗に貼れないかったで新しく回答を作らせてもらいました.

これは,Textに指定していない変数widget.titleを入れようとしているからだと思います.
エラーをとるためには,main.dartのコードを以下のように修正してください.

//以下、main.dart
import 'package:flutter/material.dart';
import './next_page.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(),
        '/next': (context) => NextPage(),
      },
    );
  }
}

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

  final String title;

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('元の画面'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('次へ'),
          onPressed: () {
            Navigator.pushNamed(context, '/next');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

ご確認お願いいたします.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/09/02 00:03

    ありがとうございます!!!助かりました。解決できました!
    ちなみになんですが、このエラー文の読み方がさっぱりわからないのですが、この文章でどの部分でエラーが発生しているとかってわかるんでしょうか?
    お手隙な時でいいので回答いただけるとうれしいです。

    キャンセル

  • 2020/09/02 09:54

    よかったです.よかったです.
    質問のエラーは二つあるのでまずは一つ目から説明したいと思います.
    The builder for route "/" returned null.
    ですが,これはNavigatorを使って画面遷移を行おうとしている中で,route / の遷移先が見つからなかった(null)ことが原因です.
    しっかりとルーティングのコードを書いてあげることで直ったはずです.
    二つ目の,
    A non-null String must be provided to a Text widget.
    'package:flutter/src/widgets/text.dart':
    Failed assertion: line 360 pos 10: 'data != null'
    ですが,これは元のコードがText widgetに渡そうとしている値を確認してみてください.
    title: Text(widget.title),
    この部分です.サンプルコードのなごりでしょうか?
    titleという変数に値を入れずにルーティングしているんです.
    もし上記のコードのままエラーを取りたかったら,
    routes: {
    '/': (context) => MyHomePage(title: '元の画面'),
    '/next': (context) => NextPage(),
    },
    としてあげるべきでした.
    こちらでも動くのを確認してみてくださいね.

    キャンセル

  • 2020/09/04 11:17

    そうなんですね!わかりました。
    丁寧なご回答ありがとうございます!

    キャンセル

0

再ビルド後も同じエラーが出ましたでしょうか?
ご確認お願いします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/31 03:25

    コメントありがとうございます。
    いじってしまっていたので、コピペして再度実行してみたらエラーコメントが下記に変わりました。

    ════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
    The following assertion was thrown building MyHomePage(dirty, state: _MyHomePageState#12cca):
    A non-null String must be provided to a Text widget.
    'package:flutter/src/widgets/text.dart':
    Failed assertion: line 360 pos 10: 'data != null'

    The relevant error-causing widget was:
    MyHomePage file:///Users/to/AndroidStudioProjects/coriander2/lib/main.dart:23:27
    When the exception was thrown, this was the stack:
    #2 new Text (package:flutter/src/widgets/text.dart:360:10)
    #3 _MyHomePageState.build (package:coriander2/main.dart:57:16)
    #4 StatefulElement.build (package:flutter/src/widgets/framework.dart:4663:28)
    #5 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4546:15)
    #6 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4719:11)

    キャンセル

  • 2020/09/01 13:28

    これは,Textに指定していない変数widget.titleを入れようとしているからだと思います.
    エラーをとるためには,main.dartのコードを以下のように修正してください.

    ```
    //以下、main.dart
    import 'package:flutter/material.dart';
    import './next_page.dart';

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

    class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
    primarySwatch: Colors.blue,
    ),
    initialRoute: '/',
    routes: {
    '/': (context) => MyHomePage(),
    '/next': (context) => NextPage(),
    },
    );
    }
    }

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

    final String title;

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

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

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

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text('元の画面'),
    ),
    body: Center(
    child: RaisedButton(
    child: Text('次へ'),
    onPressed: () {
    Navigator.pushNamed(context, '/next');
    },
    ),
    ),
    floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
    );
    }
    }

    ```

    動きましたら,是非ベストアンサーにお願いします.

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る