今回は「Container」の基本的な使い方について紹介します。
Containerを使えばchild Widgetのサイズ、余白、背景色などを指定できます!
目次
Containerの基本プロパティ
child


childプロパティでWidgetを指定しないとContainerは画面いっぱいに広がり、Widgetを指定した場合はWidgetの大きさと同じになります。
color

colorプロパティで背景色を指定できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Center(
child: Container(
color: Colors.blueAccent,
),
),
),
);
}
使用できるWidget:Color, Colors, ColorSwatch, CupertinoDynamicColor, MaterialStateColor
height/width

heightプロパティで高さ、widthプロパティで幅を指定できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Center(
child: Container(
height: 100.0,
width: 200.0,
color: Colors.blueAccent,
),
),
),
);
}
margin

marginプロパティでContainerの外側に余白を作れます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Container(
height: 100.0,
width: 100.0,
color: Colors.blueAccent,
margin: const EdgeInsets.all(50.0),
),
),
);
}
実装できるWidget:EdgeInsets, EdgeInsetsDirectional
padding

paddingプロパティでContainerの内側に余白を作れます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Center(
child: Container(
height: 100.0,
width: 200.0,
color: Colors.yellow,
child: const Text("Hello World"),
padding: const EdgeInsets.all(30),
),
),
),
);
}
実装できるWidget:EdgeInsets, EdgeInsetsDirectional
alignment



alignmentプロパティを使えばchild Widgetを好きな位置に設置できます。
//ソース(左の画像)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter"),
),
body: Center(
child: Container(
height: 200.0,
width: 200.0,
color: Colors.yellow,
alignment: const Alignment(-1, -1),
child: const Text("Hello World"),
),
),
),
);
}
実装できるWidget:Alignment
以上です。