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

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

ただいまの
回答率

88.59%

Flutterの画面遷移に関して

受付中

回答 2

投稿

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

murosan

score 6

flutterの学習を始めた初心者なのですが画面遷移の場面でつまづいております。
ボタンを押して次の画面へ遷移するというものなのですがドキュメント通りにしたつもりが遷移できません。

以下main.dartです。

import 'package:as_if_youtube/booklist.dart';
import 'package:as_if_youtube/test.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("pretend Yourtube",
            style: TextStyle(
              fontSize: 18,
            ),
          ),
          actions: <Widget>[
            FlatButton(
              child: Icon(Icons.search),
            ),
            FlatButton(
              child: Icon(Icons.favorite),
            ),
          ],
        ),
        body: Center(
            child: RaisedButton(
            child: Text(
                "今日のやることを!",
            ),
              color: Colors.orange,
              textColor: Colors.white,
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => test()),

                );
              },
          )

        ),

       // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}


こちらがtest.dartです。

import 'package:flutter/material.dart';

void main() => runApp(test());

class test 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: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

main.dart内のボタンを押すとtest.dartに遷移するようなシステムを考えております。

申し訳ございませんがどなたかご回答いただけないでしょうか。
何卒よろしくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

0

onPressedの箇所を以下のように書き換えることで繊維可能です。が、
routingを使った方法をおすすめします。
参考記事
https://flutter.ctrnost.com/basic/routing/https://flutter.ctrnost.com/basic/routing/

onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) {
    return test();
})

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/05 01:27

    ご回答いただきありがとうございます。
    https://webbibouroku.com/Blog/Article/flutter-nav

    ご回答いただいたルーティングとこちらの記事を参考にすることで画面遷移可能になりました!

    キャンセル

  • 2020/07/06 18:33

    お力になれて、良かったです。

    キャンセル

0

質問のコードを試してみましたが、以下のエラーが出ていませんか?
まずはエラーが発生していないか確認するようにしてみてください。
Navigator operation requested with a context that does not include a Navigator.

そしてこのエラーメッセージを teratail で検索すると、以下の質問が該当します。
https://teratail.com/questions/265504
私が回答していますが、同じ原因です。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/05 01:25

    ご回答いただきありがとうございます。
    いただいたエラーに関してなのですが私のandroid studioでは発生してないですね。。。

    https://webbibouroku.com/Blog/Article/flutter-nav
    こちらを参考にしてルーティング情報を記述した場合遷移することが可能になりました!

    キャンセル

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

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

関連した質問

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