【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

【Flutter】スワイプ(PageView)して画面遷移したり元の画面に戻る方法について徹底解説!

【Flutter】スワイプ(PageView)して画面遷移したり元の画面に戻る方法について徹底解説!
いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです

この記事を読んでわかること

  • Flutterでのスワイプ操作による画面遷移の基本
  • 元の画面に戻る方法
  • PageViewウィジェットの基本的な使用方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
目次

スワイプして画面遷移したり、元の画面戻る実装

概要

Flutterを使用してスワイプによる画面遷移と元の画面に戻る実装をするには、PageView ウィジェットを用います。PageView ウィジェットを使用することでスムーズなスワイプ操作による画面遷移を実現し、Navigator クラスのpushpopメソッドを使用することで画面間のナビゲーションを制御できます。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PageView(
        children: <Widget>[
          MyPageWidget(Color(0xFF99CCFF), "Page 1"),
          MyPageWidget(Color(0xFFCC99FF), "Page 2"),
          MyPageWidget(Color(0xFFFF99CC), "Page 3"),
        ],
      ),
    );
  }
}

class MyPageWidget extends StatelessWidget {
  final Color color;
  final String text;

  MyPageWidget(this.color, this.text);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Center(
        child: Text(text, style: TextStyle(fontSize: 24)),
      ),
    );
  }
}

サンプルコードの解説

  • 3〜5行目: アプリケーションのメイン関数です。MyApp ウィジェットを実行します。
  • 7〜20行目: MyApp ウィジェットはアプリケーションのルートウィジェットです。MaterialApp を使用して、ナビゲーションやテーマを設定します。
  • 22〜37行目: MyPageWidget クラスは、各ページのUIを定義します。コンストラクタで色とテキストを受け取り、それを表示します。
  • 11~17行目: PageView ウィジェットを使用して、スワイプによるページ遷移を実装します。children プロパティに各ページのウィジェットをリストとして渡します。
  • 32~34行目: 各ページの中央にテキストを表示します。TextStyle でフォントサイズを設定しています。

動作確認

いちの

それでは、動作を確認してみましょ〜

【Flutter】スワイプ(PageView)して画面遷移したり元の画面に戻る方法について徹底解説!

画面遷移時のpushpopメソッドにご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか?今回は、スワイプ(PageView)して画面遷移したり元の画面に戻る方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (1件)

コメントする

目次