Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[Flutter]画面遷移のやり方

「Navigate to a new screen and back」を使った画面遷移

(1). ボタンを作成

      body: Center(
        child: RaisedButton(
          child: Text('次へ'),
          onPressed: (){
            // 押したら反応するコードを書く
            // 画面遷移のコード
          },
        ),
      ),

(2). 遷移先のページを作成

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,
      ),
    );
  }
}

(3). (1)で作成したボタンに「押下したらページ遷移」の処理を追加
*「NextPage()」の部分に次ページのclassを書く

      body: Center(
        child: RaisedButton(
          child: Text('次へ'),
          onPressed: (){
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => NextPage(),
              )
            )
          },
        ),
      ),

(4). (2)で作成したクラスに「1つ前のページに戻る」処理を加えたボタンを作成

      body: Container(
        height: double.infinity,
        color: Colors.red,
        child: Center(
          child: RaisedButton(
            child: Text('戻る'),
            onPressed: (){
              // 1つ前に戻る
              Navigator.pop(context);
            },
          ),
        ),
      ),

「Navigate with named routes」を使った画面遷移

(1). 初期画面にinitialRoute, routesを設定
*homeを指定してはいけない
*initialRouteに指定しているものが初期画面となる

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/',
      routes: {
        // 初期画面のclassを指定
        '/': (context) => MyHomePage(),
        // 次ページのclassを指定
        '/next': (context) => NextPage(),
      },
    );
  }
}

(2). 「押下したらページ遷移」の処理を追加

      body: Center(
        child: RaisedButton(
          child: Text('次へ'),
          onPressed: (){
            Navigator.pushNamed(context, '/next');
          },
        ),
      ),
welmo
介護福祉の課題をテクノロジーで解決するサービスの開発と、子どもの可能性を解放する障がい児支援施設を運営しています。
https://welmo.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away