Udemyセール開催中! 対象コースが1,220円から

【Flutter】Alignの使い方|childを親ウィジェット内の指定した位置に設置

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

Alignを使えば、Containerなどの親ウィジェットに対してchild Widgetを好きな位置に指定できます!

目次

Alignmentの基本プロパティ

alignment

Alignment(-1, -1)
Alignment(0, 0)
Alignment(1, 1)

alignmentプロパティでContainerなどのWidgetに対し、child Widgetをどの位置に設置したいか指定します。

//ソース(左の画像)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Center(
          child: Container(
            height: 200.0,
            width: 200.0,
            color: Colors.yellow,
            child: const Align(
              alignment: Alignment(-1, -1),
              child: Text("Hello World"),
            ),
          ),
        ),
      ),
    );
  }

使用できるWidget:Alignment, AlignmentDirectional

以上です。

  • URLをコピーしました!
目次
閉じる