【Flutter】Paddingの使い方｜Widgetの内部に余白を作る

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

Paddingを使えば指定したWidgetの内側に余白を作れます！

Paddingの基本プロパティ

Paddingなし

Paddingがない場合、CardやContainerなどはchild Widgetの大きさと同じになります。

//ソース
   Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter"),
        ),
        body: const Center(
          child: Card(
            color: Colors.yellow,
            child: Text("Hello World"),
          ),
        ),
      ),
    );
  }

Paddingあり

childプロパティで指定したWidgetに対し、paddingプロパティで余白のサイズを指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter"),
        ),
        body: const Center(
          child: Card(
            color: Colors.yellow,
            child: Padding(
              padding: EdgeInsets.all(30),
              child: Text("Hello World"),
            ),
          ),
        ),
      ),
    );
  }

実装できるWidget：なんでもOK

以上です。