※本記事で使用している環境
<パソコン>
機種:MacBook Air(13inch)
OS:macOS Sonoma(ver.14.5)
チップ:Apple M3
シェル:zsh
<ソフトウェア>
・Flutter(ver.3.22.3)
・Xcode(ver.15.4)
・CocoaPods(ver.1.15.2)
・Android Studio(ver.2024.1)
・Visual Studio Code(ver.1.92.0)
前回は、Container Widget についての解説を行いました。
今回は、Column Widget について解説します。
はじめに
公式ドキュメントの解説は、以下のページにあります。
https://api.flutter.dev/flutter/widgets/Column-class.html
記事を執筆するにあたって、以下の書籍を参考にしました。
おすすめ書籍
ウィジェットを縦に並べる手順
まずは、Column Widget を使って、ウィジェットを縦に並べる方法を紹介します。
以下のコードになるように書いていきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
color: Colors.amber,
width: 100,
height: 100,
child: Text("Container 1"),
),
Container(
color: Colors.teal,
width: 100,
height: 100,
child: Text("Container 2"),
),
Container(
color: Colors.blue,
width: 100,
height: 100,
child: Text("Container 3"),
),
],
),
),
),
debugShowCheckedModeBanner: false,
);
}
}
一旦、以下のコードを入力してください。
このコードを元に様々な変更を加えていきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Container(
color: Colors.amber,
width: 100,
height: 100,
child: Text("Container"),
),
),
),
debugShowCheckedModeBanner: false,
);
}
}
Container Widget にカーソルを合わせた状態で、以下のキーボードコマンドを押します。
Mac command + .
Win Ctrl + .
様々な項目が表示されますので、「Wrap with Column」をクリックします。
Container Widget の色や大きさは、好きなように設定してみましょう。
これは、ウィジェットの縦の配置を設定する方法です。
MainAxisAligment の値を変更することで、様々な配置に設定できます。
MainAxisAligment の公式ドキュメントはこちらです。
https://api.flutter.dev/flutter/rendering/MainAxisAlignment.html
ウィジェットとウィジェットの間に空白を作る手順
次に、ウィジェットとウィジェットの間に空白を作っていきます。
以下のコードになるように書いていきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
Container(
color: Colors.amber,
width: double.infinity,
height: 100,
child: Text("Container 1"),
),
SizedBox(
height: 20,
),
Container(
color: Colors.teal,
width: 100,
height: 100,
child: Text("Container 2"),
),
Container(
color: Colors.blue,
width: 100,
height: 100,
child: Text("Container 3"),
),
],
),
),
),
debugShowCheckedModeBanner: false,
);
}
}
SizedBox Widget の公式ドキュメントはこちらです。
ウィジェットの横の配置を設定する手順
ウィジェットの大きさを横に引き伸ばしたり、配置を変えたりしていきます。
以下のコードになるように書いていきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.amber,
width: 100,
height: 100,
child: Text("Container 1"),
),
SizedBox(
height: 20,
),
Container(
color: Colors.teal,
width: 100,
height: 100,
child: Text("Container 2"),
),
Container(
color: Colors.blue,
width: 100,
height: 100,
child: Text("Container 3"),
),
],
),
),
),
debugShowCheckedModeBanner: false,
);
}
}
こうすることで、将来的に横に長いデバイスが登場したとしても画面いっぱいまで表示することができます。
先ほどは、MainAxisAligment でしたが、今回は CrossAxisAligment です。
横の配置を変えることができます。
このままだと、Column のなかに記述した3つのウィジェットの横幅が同じため、見た目に変化が起こりません。
2つ目の Container Widget の横幅を変えてみましょう。
これで、ウィジェットが真ん中の軸にそって配置されていることがわかりました。
これにて、Column Widget についての解説を終わります。
次は、Row Widget についての解説を行います。
コメント