いちの
こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- フッターメニュータブの非表示化の実装方法
- スクロールに応じたUIの動的な表示・非表示の制御方法
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
スクロールによるフッターメニュータブの非表示化
概要
アプリ内でのユーザー体験を向上させるために、スクロール操作に応じてフッターメニュータブを非表示にする方法があります。これにより、コンテンツに集中できる画面領域を増やすことができます。
実装手順
- 必要なパッケージのインポート
- スクロールの検知
- フッターメニュータブの表示・非表示の制御
サンプルコード
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エンジニアを目指すなら【ユニゾンキャリア】
コメント
コメント一覧 (1件)
[…] 【Flutter】スクロールした際フッターメニュータブを非表示にする方法 […]