「先にWidgetを配置する場所を確保しといて、後から別のWidgetを追加したい」
こんな時に便利なのが Placeholder ウィジェットです。
Placeholderを使用することでまだ実装準備ができていないWidgetが配置される場所に一時的なボックスを描画して場所を確保できます。
それではPlaceholderの基本的な使い方とカスタマイズ方法について解説していきます！
基本的な使い方
Placeholderの基本的な使い方について解説します。
Placeholderの性質についてですが、PlaceholderがContainerやSizedBoxなど範囲が定まっているWidgetの子要素として使用された場合は親要素が許す範囲いっぱいに広がります。
SizedBox(
width: 200,
height: 200,
child: Placeholder(),
),画像のサンプルコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter')),
body: Center(
child: SizedBox(
width: 200,
height: 200,
child: Placeholder(),
),
),
);
}
}
一方でPlaceholderがColumnやRow、ListViewなど制限範囲が定まっていないWidgetの子要素として使用された場合はfallbackWidthプロパティまたはfallbackHeightプロパティを使用してサイズを調整します。
Column(
children: [
Placeholder(
fallbackHeight: 150,
),
Placeholder(
fallbackHeight: 300,
),
Placeholder(
fallbackHeight: 150,
),
],
),画像のサンプルコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter')),
body: Center(
child: Column(
children: [
Placeholder(
fallbackHeight: 150,
),
Placeholder(
fallbackHeight: 300,
),
Placeholder(
fallbackHeight: 150,
),
],
),
),
);
}
}
カスタマイズ方法
続いてPlaceholderのカスタマイズ方法について解説します。
サイズ
PlaceholderをColumnなど縦幅に対して制限範囲がないWidgetの子要素として使用する場合はfallbackHeightプロパティで高さを調整します。
一方でRowなど横幅に対して制限範囲がないWidgetで使用する場合にはfallbackWidthプロパティで横幅を調整します。
Placeholder(
fallbackHeight: 200,
fallbackWidth: 150,
),色
Placeholderの線の色はcolorプロパティで設定できます。
Placeholder(
color: Colors.red,
),線の太さ
Placeholderの線の太さstrokeWidthプロパティで設定できます。
Placeholder(
strokeWidth: 20,
),まとめ
今回はPlaceholderの基本的な使い方とカスタマイズ方法について解説しました。
Placeholderを使用することでまだ実装準備ができていないWidgetが配置される場所に一時的なボックスを描画して場所を確保できるのでぜひ使ってみてください。