「ウィジェットを好きな位置に配置したい」
こんな時に便利なのが Align ウィジェットです。
AlignではAlignmentを使用してウィジェットを親ウィジェット内部の好きな位置に配置できます。またAlignmentはContainerやStackなどのalignmentプロパティでも使用されます。
それではAlignの基本的な使い方とカスタマイズ方法について解説していきます！
基本的な使い方
Alignの基本的な使い方について解説します。
Alignのchildプロパティに位置を指定したいウィジェットを渡し、alignmentプロパティにAlignmentの列挙型またはコンストラクタを渡してウィジェットを配置する位置を指定します。
Align(
child: MyWidget(),
alignment: Alignment.bottomRight,
),画像のサンプルコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyWidget(),
);
}
}
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter')),
body: Center(
child: Container(
color: Colors.amber,
height: 250,
width: 300,
child: Align(
alignment: Alignment.bottomRight,
child: FlutterLogo(size: 100),
),
),
),
);
}
}
カスタマイズ方法
続いてAlignのカスタマイズ方法について解説します。
Alignmentの列挙型で位置を指定
alignmentプロパティの引数にAlignmentウィジェットの列挙型(enum)を渡すことで次のような様々な配置を指定できます。
| 位置 | 列挙型 |
|---|---|
| 左上 | Alignment.topLeft |
| 中央上 | Alignment.topCenter |
| 右上 | Alignment.topRight |
| 中央左 | Alignment.centerLeft |
| 中央 | Alignment.center |
| 中央右 | Alignment.centerRight |
| 左下 | Alignment.bottomLeft |
| 中央下 | Alignment.bottomCenter |
| 右下 | Alignment.bottomRight |
Align(
child: MyWidget(),
alignment: Alignment.bottomRight,
),Alignmentのコンストラクタで位置を指定
alignmentプロパティの引数にAlignmentのコンストラクタを渡し、Alignmentの第一引数にx軸、第二引数にy軸の位置となる数値を渡し好きな場所にウィジェットを配置できます。
親ウィジェット内部にウィジェットを収める場合の数値は-1から1の範囲でx軸では一番左側が-1、y軸では一番上側が-1になります。
また親ウィジェット外部にウィジェットを配置したい場合には-3や4などの数値を渡します。
| 位置 | コンストラクタ |
|---|---|
| 左上 | Alignment(-1.0, -1.0) |
| 中央上 | Alignment(0.0, -1.0) |
| 右上 | Alignment(1.0, -1.0) |
| 中央左 | Alignment(-1.0, 0.0) |
| 中央 | Alignment(0.0, 0.0) |
| 中央右 | Alignment(1.0, 0.0) |
| 左下 | Alignment(-1.0, 1.0) |
| 中央下 | Alignment(0.0, 1.0) |
| 右下 | Alignment(1.0, 1.0) |
Align(
child: MyWidget(),
alignment: Alignment(0.6, 0.5),
),まとめ
今回はAlignの基本的な使い方とカスタマイズ方法について解説しました。
AlignではAlignmentを使用してウィジェットを親ウィジェット内部の好きな位置に配置できます。またAlignmentはContainerやStackなどのalignmentプロパティでもよく使用されるのでぜひ使ってみてください。