Flutterでボタンを押した時に画面遷移させる

はじめに

こんにちは、エンジニアのkeitaMaxです。

前回はRouteを作成したので今回は画面遷移を行なってみます。

前回の記事

ボタンの表示

前回作成したtop.dartファイルを守成して、Secondへ遷移というボタンをTop Screenと書いてあるテキストの下に表示して見ます。

Columnというものを使用して、

mainAxisAlignment: MainAxisAlignment.center, // 縦の配置
crossAxisAlignment: CrossAxisAlignment.center, // 横の配置

とすると上下真ん中で縦に並べることができます。

ボタンはTextButtonとすると影のないボタンが表示できます。

import 'package:flutter/material.dart';

class TopScreen extends StatelessWidget {
  const TopScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TopScreen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            const Text('Top Screen'),
            TextButton(onPressed: null, child: Text('Secondへ遷移')),
          ],
        ),
      ),
    );
  }
}

これでflutter runをしてブラウザで見て見ます。

このように、Secondへ遷移というボタンをTop Screenの下に表示することができました。

画面遷移を作成

ボタンを押したら画面遷移するという処理を書いていきます。

TextButton(onPressed: null, child: Text('Secondへ遷移')),

のonPressed部分に処理を書いていきます。

go routerで画面遷移させたいときはcontext.go('/second')のように書きます。
今回は'/second'に画面遷移させたいのでこのように記載しました。

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

class TopScreen extends StatelessWidget {
  const TopScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TopScreen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            const Text('Top Screen'),
            TextButton(
              onPressed: () => context.go('/second'), // ← 修正
              child: const Text('Secondへ遷移'),
            ),
          ],
        ),
      ),
    );
  }
}

これで起動してみて、Secondへ遷移ボタンを押してみると無事にSecond Screenと書いてあるページに遷移できることが確認できるかと思います。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考

次の記事