【Flutter】alignmentプロパティの使い方|Alignment

Alignment使い方
スポンサーリンク

alignmentプロパティとは?

alignmentプロパティはContainerなどのプロパティで使われ、child Widgetを好きな位置に配置できます。また、alignmentの引数にAlignmentを使用します。

>>【Flutter】Widgetの基本的な仕組み/使い方

Alignmentの基本的な使い方

Alignment
Alignment(-1, -1) // Containerの左上
Alignment(0, 0)  // Containerの中心
Alignment(1, 1)  // Containerの右下

上のコードのように、Alignment(x, y)の「x」にx軸の座標、「y」にy軸の座標の値を与え、child Widgetを好きな位置に配置します。

サンプルコード

//真ん中の画像のコード
import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
        ),
        body: Container(
          alignment: Alignment(0, 0),
          child: Text('Hello World'),
          height: 200,
          width: 200,
          color: Colors.yellow,
        ),
      ),
    );
  }
}
Alignment1
Alignment(-1, -1)
Alignment2
Alignment(0, 0)
Alignment3
Alignment(1, 1)
タイトルとURLをコピーしました