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

【Flutter】スクロールした際フッターメニュータブを非表示にする方法

【Flutter】スクロールした際フッターメニュータブを非表示にする方法
いちの

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

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

  • フッターメニュータブの非表示化の実装方法
  • スクロールに応じたUIの動的な表示・非表示の制御方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
目次

スクロールによるフッターメニュータブの非表示化

概要

アプリ内でのユーザー体験を向上させるために、スクロール操作に応じてフッターメニュータブを非表示にする方法があります。これにより、コンテンツに集中できる画面領域を増やすことができます。

実装手順

  1. 必要なパッケージのインポート
  2. スクロールの検知
  3. フッターメニュータブの表示・非表示の制御

サンプルコード

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _controller = ScrollController();
  bool _isVisible = true;

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if (_controller.position.userScrollDirection == ScrollDirection.reverse) {
        if (_isVisible == true) {
          setState(() {
            _isVisible = false;
          });
        }
      } else {
        if (_controller.position.userScrollDirection == ScrollDirection.forward) {
          if (_isVisible == false) {
            setState(() {
              _isVisible = true;
            });
          }
        }
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('スクロールでフッター非表示'),
      ),
      body: ListView.builder(
        controller: _controller,
        itemCount: 100,
        itemBuilder: (context, index) => ListTile(
          title: Text('アイテム $index'),
        ),
      ),
      bottomNavigationBar: _isVisible
          ? BottomNavigationBar(
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'ホーム',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  label: '検索',
                ),
              ],
            )
          : null,
    );
  }
}

サンプルコードの解説

  • 1行目〜2行目: 必要なFlutterパッケージをインポートしています。特にrendering.dartはスクロール検知のために必要です。
  • 4行目: アプリケーションのエントリーポイントを定義しています。
  • 15行目: ステートフルウィジェットであるMyHomePageクラスを定義しています。スクロールによる表示の変更を動的に行うためには、ステートフルウィジェットが必要です。
  • 21行目: ScrollControllerを用いてスクロールイベントを検知しています。
  • 27行目〜43行目: スクロール方向に応じてフッターメニュータブの表示・非表示を制御しています。スクロール方向が下(ScrollDirection.reverse)の場合は非表示、上(ScrollDirection.forward)の場合は表示にします。
  • 58行目〜64行目: ListView.builderを使用してリストを表示しています。リストがスクロールされると、上記で定義したロジックに従ってフッターメニュータブの表示・非表示が切り替わります。

動作確認

いちの

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

【Flutter】スクロールした際フッターメニュータブを非表示にする方法

スクロール時ヘッダーを非表示にする方法にもご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか?今回は、スクロールした際フッターメニュータブを非表示にする方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!

いちの

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

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

この記事を書いた人

コメント

コメント一覧 (1件)

コメントする

目次