NEW ARTICLE
Oracle Database ユーザーにロールを付与する
  1. HOME
  2. flutter
  3. Flutter 画面遷移を行う

Flutter 画面遷移を行う

Flutter 画面遷移を行う

Flutterで、画面遷移を行う手順を記述してます。任意の名前でDartファイルを作成して、作成したファイルに移動して画面遷移を行います。

目次

環境

  • OS  windows11 pro 64bit
  • Flutter 3.3.1

画面遷移を行う

まずは、任意の名前でDartファイルを以下のコードで画面を作成します。
※ここでは「page_one.dart」という名前で作成してます。

import 'package:flutter/material.dart';

class pageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('page1'),
      ),
      body: Container(
        color: Colors.red,
      ),
    );
  }
}

ここでは、ボタンクリックで移動させるので、次に遷移させる側に以下のコードを追加します。

import 'page_one.dart';

      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => pageOne()),
            );
          },
          child: Text(
            "Button",
          ),
        ),
      ),

実行結果をみると画面遷移していることが確認できます。

複数ページを指定

複数ページがある場合は「routes」を使用します。
「page_two.dart」を、以下の内容で作成しておきます。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      routes: {
        '/page1': (context) => pageOne(),
        '/page2': (context) => pageTwo(),
      },
    );
  }
}

「Navigator.pushNamed」を使用して、作成したパスでアクセスします。

      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/page2',
            );
          },
          child: Text(
            "Button",
          ),
        ),
      ),
    );

実行結果をみるとアクセスできていることが確認できます