【Flutter】Containerの使い方｜指定したWidgetに余白・背景色を指定

今回は「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

以上です。