FlutterのContainerは、UIを構築するためのウィジェットの1つであり、矩形のコンテナを作成するために使用されます。Containerには多くのプロパティがあり、ウィジェットをカスタマイズするために使用することができます。この記事では、FlutterのContainerについて、主なプロパティとそれらがどのように機能するかについて説明します。
ウィジットの基本構文は以下のとおりです。
Container(
// properties
child: ...
)ここでは主要なContainerプロパティを記載します。
child
Containerの子ウィジェットを指定します。例えば、Container内にテキストを表示する場合は、Textウィジェットをchildプロパティに渡します。
Container(
child: Text('Hello World!'),
)width、height
Containerの幅と高さを指定します。これらのプロパティは、Containerが表示されるスペースを制御します。
Container(
width: 100,
height: 100,
child: ...
)
color
Containerの背景色を指定します。
Container(
color: Colors.red,
child: ...
)
colorについては以下にまとめてみました。
下記、decorationを利用する場合、この color プロパティを利用できません。(エラーになる)
decoration内の color で設定してください。
padding
Container内の子ウィジェットの余白を指定します。
Container(
padding: EdgeInsets.all(16.0),
child: ...
)
margin
Containerの余白を指定します。
Container(
margin: EdgeInsets.all(16.0),
child: ...
)
decoration
Containerの装飾を指定します。このプロパティは、Containerの背景、境界線、角丸などをカスタマイズするために使用されます。
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10.0),
),
child: ...
)
上記、colorを利用する場合、この decoration プロパティを利用できません。(エラーになる)
サンプルコード
上記をプロパティを組み合わせたサンプルコード及び、実行例はイアkの通りです。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text('Hello World!',
style: Theme.of(context).textTheme.headlineMedium),
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Color.fromARGB(255, 54, 244, 152),
borderRadius: BorderRadius.circular(10.0),
),
);
}
}
まとめ
FlutterのContainerは、UIを構築するための強力なウィジェットであり、多くのプロパティを持っています。この記事では、主なプロパティとそれらがどのように機能するかについて説明しました。これらのプロパティを適切に使用することで、ウィジェットをカスタマイズし、美しいUIを作成することができます。