ルーティング

画面遷移

  /

ボタンを押すと別のページに遷移する

 

実装のイメージ画像

メイン画面

 

遷移先の画面

 

 

流れ

  1. 遷移先のファイルを新規作成（next_page.dart）
  2. ボタンの作成と遷移の設定（main.dart）
  3. 遷移先のファイルを編集（next_page.dart）

 

①遷移先のファイルを新規作成

遷移先のファイルを作ります。

「main.dart」で右クリック

「new」「dartファイル」

 

ファイル名は、「小文字_page.dart」とする。

例えば、「next_page.dart」

 

 

②ボタンの作成と画面遷移の設定

  • import文を書く。
import 'package:flutterpractice/next_page.dart';

 

  • ボタンにNavigator.pushで遷移先のクラス名を書く。

 

サンプルコード

import 'package:flutter/material.dart';
import 'package:flutterpractice/next_page.dart';

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

class MyApp extends StatelessWidget {
  @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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ネコでもわかるFlutter大辞典'),
      ),

      body: Center(
        child: RaisedButton(
          child: Text('次へ'),
          onPressed: (){
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => NextPage(), //遷移先のクラス名を書く
              ),
            );
          },
        ),
      ),
    );
  }
}

 

 

 

③遷移先のファイル（next_page.dart）を編集

 

サンプルコード

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

 

 

参考リンク