【月額固定報酬10万円〜】副業SES営業(リモート可) 詳細はこちら

【Flutter】スクロールした際ヘッダーを非表示にする方法について解説

【Flutter】スクロールした際ヘッダーを非表示にする方法について解説
いちの

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

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

  • スクロールした際にヘッダーを非表示にする基本的な方法
  • Flutterでのスクロールイベントの扱い方
  • 状態管理の具体的な実装方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
目次

スクロールした際にヘッダーを非表示にする方法

概要

FlutterではScrollControllerを使用してスクロールイベントを検知し、そのイベントに応じてウィジェットの表示・非表示を切り替えることができます。以下のサンプルコードでは、スクロールを下に行った時にアプリバーを非表示にし、上にスクロールした時に再表示します。

サンプルコード

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> {
  late ScrollController _scrollController; // スクロールのコントローラーを定義
  bool _isAppBarVisible = true; // アプリバーの表示状態を管理する変数

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController(); // スクロールコントローラーの初期化
    _scrollController.addListener(_scrollListener); // スクロールイベントにリスナーを追加
  }

  @override
  void dispose() {
    _scrollController.removeListener(_scrollListener); // リスナーの削除
    _scrollController.dispose(); // スクロールコントローラーの破棄
    super.dispose();
  }

  void _scrollListener() { // スクロールイベントのリスナーメソッド
    if (_scrollController.position.userScrollDirection == ScrollDirection.reverse) {
      if (_isAppBarVisible) {
        setState(() {
          _isAppBarVisible = false; // 下にスクロール時、アプリバーを非表示にする
        });
      }
    } else {
      if (!_isAppBarVisible) {
        setState(() {
          _isAppBarVisible = true; // 上にスクロール時、アプリバーを表示する
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _isAppBarVisible ? AppBar(title: Text('スクロールで隠れるアプリバー')) : null,
      body: ListView.builder(
        controller: _scrollController, // ListViewにスクロールコントローラーを設定
        itemCount: 100,
        itemBuilder: (context, index) => ListTile(
          title: Text('アイテム $index'), // リストアイテムの表示
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 21行目: ScrollControllerオブジェクトを遅延初期化しています。これはスクロールイベントを管理するために必要です。
  • 25-29行目: initStateメソッド内で_scrollControllerを初期化し、_scrollListenerメソッドをリスナーとして追加します。これにより、スクロールイベントが発生するたびに_scrollListenerが呼び出されます。
  • 32-36行目: disposeメソッドでリスナーを削除し、_scrollControllerを破棄します。これはリソースのリークを防ぐために重要です。
  • 38-52行目: _scrollListenerメソッドでは、スクロールの方向をチェックし、アプリバーの表示・非表示を切り替えるための状態を更新しています。
  • 56-65行目: ScaffoldappBarプロパティに条件付きでアプリバーを設定し、ListView.builderを使用してリストを表示しています。スクロールコントローラーはListViewに関連付けられており、ユーザーのスクロール操作をトラッキングします。

動作確認

いちの

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

【Flutter】スクロールした際ヘッダーを非表示にする方法について解説

ヘッダーメニュータブについてもご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

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

いちの

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

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

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

この記事を書いた人

コメント

コメント一覧 (2件)

コメントする

目次