Flutter入門

【5分でわかる】Containerの仕様と実装方法 | Flutter入門

本記事では、FlutterにおけるContainerの仕様と実装方法について解説をしていきます。

Containerウィジェットは、Flutterでの開発で必ずと言っていいほど使用するウィジェットなので是非仕様については抑えておきましょう!

Containerとは?

Containerウィジェットとは、画面上にボックス空間を確保するウィジェットです。

HTMLでいうところの<div>のような役割を果たします。

Containerの仕様

Containerの利用方法

Containerは以下のようにして実装します。

Container(
    margin: const EdgeInsets.all(10.0),
    color: Colors.blue,
    width: 100.0,
    height: 100.0,
 ),

Containerのプロパティ

Containerの主要プロパティは以下になります。

width:領域の横幅を設定
height:領域の縦幅を指定
color:領域の色を指定
margin:領域のマージン幅を指定
padding:領域のパディング幅を指定
transform:領域を回転
child:子Widgetを設定
alignment子Widgetの位置を指定

Containerを実装してみよう

正方形を描画する

正方形であればwidthとheightを同じ値に設定すれば実装できます。

Container(
    color: Colors.blue,
    width: 100.0,
    height: 100.0,
 )

paddingの設定をする

paddingとは、Containerの内側の余白のことです。こちらをわかりやすく理解するために以下のような実装をしてみましょう。

Container(
    color:Colors.blue,
    width:100.0,
    height:100.0,
    child:Container(color:Colors.red),
 ),

上記コードを実装すると先ほどまで青色だった正方形に、赤色の正方形が覆いかぶさるような形になったと思います。

こちらに以下のようにpaddingを設定して内側の余白を作ります。

Container(
    padding: const EdgeInsets.all(20),
    color:Colors.blue,
    width:100.0,
    height:100.0,
    child:Container(color:Colors.red),
 ),

上記コードを設定すると、青色の余白が発生しましたね。

このようにpaddingを使えば、Containerの子ウィジェットに設定したコンテンツとの位置を調整することができます。

marginの設定をする

marginもContainerの子ウィジェットに設定したコンテンツとの位置を調整することができるプロパティです。

marginはContainerの外側の余白に対し設定を行います。

例えば、先ほども実装した青色のContainerに、子ウィジェットである赤色のContainerが覆いかぶさった状態があるとします。

今回は子ウィジェットである赤色のContainerのmarginを設定して、青色のContainerが見えるような状態にしてみましょう。

以下のように実装します。

Container(
    color:Colors.blue,
    width:100.0,
    height:100.0,
    child:Container(color:Colors.red,
                    margin:const EdgeInsets.all(20)), //追加
 ),

するとpaddingの時と同じような結果になったかと思います。

このようにmarginでも、子ウィジェットの位置状態を調整することが可能です。

まとめ

ContainerウィジェットはFlutterで開発するなら絶対に押さえておきたいウィジェットです。

特にpaddingや、marginといった位置の設定で躓く方が多いので是非この機会に習得してみてください。

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する