2023/1/18更新
Contents
Place a floating app bar above a list
To make it easier for users to view a list of items, you might want to hide the app bar as the user scrolls down the list. This is especially true if your app displays a “tall” app bar that occupies a lot of vertical space.
ユーザーがアイテムのリストを見やすくするために、ユーザーがリストをスクロールするときにアプリバーを非表示にすることがあります。これは、アプリが多くの垂直スペースを占める「背の高い」アプリバーを表示する場合に特に当てはまります。
Typically, you create an app bar by providing an appBar property to the Scaffold widget. This creates a fixed app bar that always remains above the body of the Scaffold.
通常、アプリ・バーを作成するには、ScaffoldウィジェットにappBarプロパティを指定します。これにより、常にScaffoldのbodyの上に位置する固定アプリ・バーが作成されます。
Moving the app bar from a Scaffold widget into a CustomScrollView allows you to create an app bar that scrolls offscreen as you scroll through a list of items contained inside the CustomScrollView.
AppBarをScaffoldウィジェットからCustomScrollViewに移動させることで、CustomScrollViewの中のリストのアイテムのスクロール時に画面外にスクロールするAppBarを生成することができます。
This recipe demonstrates how to use a CustomScrollView to display a list of items with an app bar on top that scrolls offscreen as the user scrolls down the list using the following steps:
このレシピでは、CustomScrollView を使用して、ユーザーがリストをスクロールダウンすると画面外にスクロールするアプリバーを上部に持つリストを表示する方法を、次の手順で説明します。
- Create a
CustomScrollView. - Use
SliverAppBarto add a floating app bar. - Add a list of items using a
SliverList.
1. CustomScrollViewを生成する。
2. floating app barを追加するためにSliverAppBarを使う。
3. SliverListを使ってアイテムのリストを追加する。
1. Create a CustomScrollView
To create a floating app bar, place the app bar inside a CustomScrollView that also contains the list of items.
floating app barを生成するには、CustomScrollViewの中にapp barを配置します。CustomScrollViewもアイテムのリストを持ちます。
This synchronizes the scroll position of the app bar and the list of items.
CustomScrollViewは「app bar」と「アイテムのリスト」のスクロール位置を同期させます。
You might think of the CustomScrollView widget as a ListView that allows you to mix and match different types of scrollable lists and widgets together.
CustomScrollViewウィジェットは、異なるタイプのスクロール可能なリストとウィジェットを一緒に混在させることができるListViewと考えるても良いでしょう。
The scrollable lists and widgets provided to the CustomScrollView are known as slivers.
CustomScrollViewに提供されるスクローラブルなリストとウィジェットはsliversとして知られています。
There are several types of slivers, such as SliverList, SliverGridList, and SliverAppBar.
SliverList, SliverGridList, そして SliverAppBarなど、いくつかの種類のsliverが存在します。
sliver : (木材などの)細い一片、小魚の片身
In fact, the ListView and GridView widgets use the SliverList and SliverGrid widgets to implement scrolling.
実際、ListViewとGridViewウィジェットでは、SliverListとSliverGridウィジェットを使ってスクロールを実装しています。
For this example, create a CustomScrollView that contains a SliverAppBar and a SliverList. In addition, remove any app bars that you provide to the Scaffold widget.
このサンプルでは、SliverAppBarとSliverListを含むCustomScrollViewを作成します。また、Scaffoldウィジェットに提供するアプリバーはすべて削除します。
Scaffold( // No appBar property provided, only the body. // bodyプロパティのみ。appBarプロパティは無し。 body: CustomScrollView( // Add the app bar and list of items as slivers in the next steps. // 次のステップで、リストのアイテムとapp barをsliversとして追加します。 slivers: <Widget>[]), );
2. Use SliverAppBar to add a floating app bar
2.floating app barを追加するために、SliverAppBarを使う。
Next, add an app bar to the CustomScrollView.
続いて、CustomScrollViewにapp barを追加します。
Flutter provides the SliverAppBar widget which, much like the normal AppBar widget, uses the SliverAppBar to display a title, tabs, images and more.
FlutterはSliverAppBarウィジェットを提供しており、通常のAppBarウィジェットと同様に、SliverAppBarを使用してタイトル、タブ、画像などを表示することができます。
However, the SliverAppBar also gives you the ability to create a “floating” app bar that scrolls offscreen as the user scrolls down the list.
しかし、SliverAppBarには、ユーザーがリストをスクロールダウンすると画面外にスクロールする”floating” app barを生成する機能もあります。
リストをスクロールダウンする＝指の動きは画面の下から上へ動かす
Furthermore, you can configure the SliverAppBar to shrink and expand as the user scrolls.
さらに、SliverAppBarは、ユーザーのスクロールに合わせて縮小・拡大するように設定することができます。
To create this effect:
この効果を作り出すには、
- Start with an app bar that displays only a title.
- Set the
floatingproperty totrue. This allows users to quickly reveal the app bar when they scroll up the list. - Add a
flexibleSpacewidget that fills the availableexpandedHeight.
1. タイトルのみを表示するapp barから始める。
2. floatingプロパティをtrueにセットする。これでリストをスクロールアップした時に素早くapp barが現れるようになる。
3. 利用可能なexpandedHeightを埋めるflexibleSpaceプロパティにウィジェットを追加する。
CustomScrollView( slivers: [ // Add the app bar to the CustomScrollView. // CustomScrollViewにapp barを追加する。 const SliverAppBar( // Provide a standard title. // 標準のタイトルを提供する。 title: Text(title), // Allows the user to reveal the app bar if they begin scrolling // back up the list of items. // ユーザーがリストをスクロールアップした時にapp barが現れるようにする。 floating: true, // Display a placeholder widget to visualize the shrinking size. // Placeholderウィジェットを使って、サイズの縮小を可視化する。 flexibleSpace: Placeholder(), // Make the initial height of the SliverAppBar larger than normal. // SliverAppBarの最初の高さを通常よりも大きくセットする。 expandedHeight: 200, ), ], )
Tip: Play around with the various properties you can pass to the SliverAppBar widget, and use hot reload to see the results.
Tip: SliverAppBarのいろいろなプロパティを変更して、ホットリロードで結果を確認してみましょう。
For example, use an Image widget for the flexibleSpace property to create a background image that shrinks in size as it’s scrolled offscreen.
例えば、flexibleSpaceプロパティにImageウィジェットを使用すると、画面外にスクロールするにつれてサイズが縮小する背景画像を作成することができます。
3. Add a list of items using a SliverList
Now that you have the app bar in place, add a list of items to the CustomScrollView.
アプリバーが設置できたので、CustomScrollViewにアイテムのリストを追加します。
You have two options: a SliverList or a SliverGrid. If you need to display a list of items one after the other, use the SliverListwidget. If you need to display a grid list, use the SliverGrid widget.
SliverListとSliverGridの2つのオプションがあります。項目のリストを次々に表示する必要がある場合は、SliverList ウィジェットを使用します。グリッド・リストを表示する必要がある場合は、SliverGridウィジェットを使用します。
The SliverList and SliverGrid widgets take one required parameter: a SliverChildDelegate,
SliverListウィジェットとSliverGridウィジェットは、一つの必須パラメータSliverChildDelegateを取ります。
which provides a list of widgets to SliverList or SliverGrid.
SliverChildDelegateは、SliverList又はSliverGridにウィジェットのリストを提供します。
For example, the SliverChildBuilderDelegate allows you to create a list of items that are built lazily as you scroll, just like the ListView.builder widget.
例えば、SliverChildBuilderDelegateを使えば、ListView.builderウィジェットのように、スクロールに合わせて遅延して構築されるアイテムのリストを作成することができます。
↑スクロールに応じて遅延してアイテムを構築(ビルド)するのでリストのアイテム数が多い時に有用。
// Next, create a SliverList // 次に、SliverListを生成する。 SliverList( // Use a delegate to build items as they're scrolled on screen. // 画面のスクロールに応じてアイテムをビルドするためにdelegateを使います。 delegate: SliverChildBuilderDelegate( // The builder function returns a ListTile with a title that // displays the index of the current item. // builderコールバックは現在のアイテムのindexを表示するタイトルを持つListTileを返す。 (context, index) => ListTile(title: Text('Item #$index')), // Builds 1000 ListTiles // ListTileを1000個生成する。 // (アイテム数が1000ということであり、ビルドはスクロールに応じて遅延構築される。) childCount: 1000, ), )
Interactive example
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Floating App Bar';
return MaterialApp(
title: title,
home: Scaffold(
// No appbar provided to the Scaffold, only a body with a
// CustomScrollView.
body: CustomScrollView(
slivers: [
// Add the app bar to the CustomScrollView.
const SliverAppBar(
// Provide a standard title.
title: Text(title),
// Allows the user to reveal the app bar if they begin scrolling
// back up the list of items.
floating: true,
// Display a placeholder widget to visualize the shrinking size.
flexibleSpace: Placeholder(),
// Make the initial height of the SliverAppBar larger than normal.
expandedHeight: 200,
),
// Next, create a SliverList
SliverList(
// Use a delegate to build items as they're scrolled on screen.
delegate: SliverChildBuilderDelegate(
// The builder function returns a ListTile with a title that
// displays the index of the current item.
(context, index) => ListTile(title: Text('Item #$index')),
// Builds 1000 ListTiles
childCount: 1000,
),
),
],
),
),
);
}
}
関連リソース
CustomScrollViewのドキュメントコメントにサンプルコード
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(home:HomePage(),);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
floating: true,
pinned: false,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Demo'),
background: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.red,
Colors.orange,
],
),
),
),
),
),
SliverGrid(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
],
),
);
}
}
参考
