FlutterでColumnに余白(padding)を付ける方法を紹介します。
Columnの基本的な使い方、知っておきたい基本プロパティのまとめ記事はこちら↓
あわせて読みたい
【Flutter】Columnの使い方｜垂直に複数のウィジェットを並べる
Columnの基本的な使い方について解説します。Columnを使用することで複数のウィジェットを垂直に並べられます。また並んでいるウィジェットの配置を指定したり、逆順にしたりなどできます。
目次
Columnに余白(padding)を付ける方法
Columnに余白(padding)を付けるにはPaddingを使用します。
使用方法としてはPaddingの子ウィジェットとしてColumnを指定し、paddingにEdgeInsetsを渡して余白を調整します。
Padding(
padding: const EdgeInsets.all(50),
child: Column(
children: [
...
],
),
)指定した余白以外の隙間を埋める方法
横幅に対して指定した余白以外の隙間を埋めるにはSizedBoxを使用します。SizedBoxの子ウィジェットとして先ほど使用したPaddingを指定しwidthにdouble.infinityを渡します。
SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(50),
child: Column(
children: [
Container(
height: 150,
color: Colors.red,
),
Container(
height: 150,
color: Colors.yellow,
),
Container(
height: 150,
color: Colors.blue,
),
],
),
),
),
)
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Flutter')),
body: SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(50),
child: Column(
children: [
Container(
height: 150,
color: Colors.red,
),
Container(
height: 150,
color: Colors.yellow,
),
Container(
height: 150,
color: Colors.blue,
),
],
),
),
),
),
);
}
}合わせて読みたい
あわせて読みたい
【Flutter】Sliderの使い方｜スライダーを左右に移動させて数値を選択
FlutterのSliderウィジェットの用途と使い方のまとめ記事です。本記事ではSliderのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説して…
あわせて読みたい
【Flutter】CheckBoxの使い方｜チェックボックスを実装
FlutterのCheckBoxウィジェットの用途と使い方のまとめ記事です。本記事ではCheckBoxのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説…
あわせて読みたい
【Flutter】CheckboxListTileの使い方｜ラベル付きチェックボックスを実装
FlutterのCheckboxListTileウィジェットの用途と使い方のまとめ記事です。本記事ではCheckboxListTileのサンプルコードを使いながら基本的な使い方、知っておきたい基本…
あわせて読みたい
【Flutter】Radioの使い方｜ラジオボタン(オプションボタン)を実装
FlutterのRadioウィジェットの用途と使い方のまとめ記事です。本記事ではRadioのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説してい…