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

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'), // リストアイテムの表示
        ),
      ),
    );
  }
}