Flutter 画面遷移 エラーについて

Flutter

初めに

最近個人開発でios,Androidアプリを開発

することができるFlutterを学習しています。

元々、ネイティブアプリ開発をしたいと

思っていたので、個人開発ベースになりますが

毎日楽しく開発をしています。

今回私が開発をする上で直面した画面遷移エラーについて

備忘録を兼ねて記事として残していくことにしました。

もし私と同じエラーに直面した人の助けになれば

幸いです。では早速いきましょう!

前提条件

環境構築については解説はしません。

もし、環境構築をしていない方は

ぜひ以下のkboyさんの環境構築の動画を

見てみてください!

kboyさんのFlutter環境構築

発生したエラー

今回は単純にボタンを押したら画面遷移をするという

シンプルな機能でしたのですがなかなか思い通りに

遷移してくれないという問題でした。

ソースコードは以下のものです。

import 'package:flutter/material.dart';

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

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

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

        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('次へ'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => NextPage()),
              );
            }
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

遷移先のページは以下のコードです。



import 'package:flutter/material.dart';

class NextPage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('次の画面'),
     ),
     body: Container(
        height:double.infinity,
        color: Colors.red,
       child : Center(
         child: RaisedButton(
             child: Text('戻る'),
                onPressed: () {
                  Navigator.pop(context);
                },
               ),
            ),
         ),
       );
    }
}

実行をしてもエラーが出力されて内容は以下の通りです。

lib/main.dart:64:57: Error: The method 'NextPage' isn't defined for the class '_MyHomePageState'.

main.dartの64行目にエラーが出ているのがわかります。

該当箇所は以下の部分です。

MaterialPageRoute(builder: (context) => NextPage()),

なんでだろうなと思った結果

画面遷移先のクラスをインポートしていないことが

わかりました。

main.dartの上に遷移先のNextPageクラスを

インポートする必要がありました。

//以下を追記
import 'package:flutter_app/next_page.dart';

追記をすると動作は正常に動くことが確認できました。

正常動作

最後に

普段はWebアプリを作っているので

ネイティブアプリの開発は別物ですね。。

でも全く別物なので逆に楽しいです!

これからも誰かの助けになるような記事を

書いて行きます!