Udemyセール開催中! 対象コースが1,220円から

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

今回は「Container」の基本的な使い方について紹介します。

Containerを使えばchild Widgetのサイズ、余白、背景色などを指定できます!

目次

Containerの基本プロパティ

child

color with children
childあり
color without children
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(-1, -1)
Alignment(0, 0)
Alignment(1, 1)

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

以上です。

  • URLをコピーしました!
目次
閉じる