質問

Flutterのウィジェットを親ウィジェット内で整列させたいのです。ウィジェットをCenterウィジェットで包むことで中央揃えにできることは知っています。

  Center(
    child: Text("widget"),
  )

でも、右や下、上中下など、どのように整列させればいいのでしょうか？

注意事項

私は1つの子について話しているのであって、RowやColumnにある複数の子について話しているのではありません。これらのSOの質問を参照してください。

• テキストウィジェットを行ウィジェットに整列させる
• FLUTTER｜右揃えが効かない

これは正しい軌道に乗っていますが、私はより大砲のような質問をしようとしています。

• FlutterでOutlineButtonアイコンを左寄せにする方法

どのように解決しますか？

ウィジェットを配置する方法

子ウィジェットを親ウィジェット内に配置するためには Align ウィジェットを使います。の使い方を知っているのであれば Center ウィジェットの使い方を知っているなら、あなたは正しい道を歩んでいることになります。 Center の特殊なケースに過ぎないからです。 Align .

整列させたいウィジェットをAlignウィジェットで囲み、そのalignmentプロパティを設定します。例えば、これはテキストウィジェットを親の右中央に整列させます。

Align(
  alignment: Alignment.centerRight,
  child: Text("widget"),
)

その他のオプションは

• Alignment.topLeft
• Alignment.topCenter
• Alignment.topRight
• Alignment.centerLeft
• Alignment.center
• Alignment.centerRight
• Alignment.bottomLeft
• Alignment.bottomCenter
• Alignment.bottomRight

こんな感じです。

これらの場所に限定されるわけではありません。x,y のペアを指定することで、ウィジェットを任意の場所に配置することができます。 (0,0) がビューの中心で、端は 1.0 の単位になります。画像があるといいかもしれませんね。

ここで、任意の相対位置に対して (x,y)

• Alignment.topLeft は Alignment(-1.0, -1.0)
• Alignment.topCenter は Alignment(0.0, -1.0)
• Alignment.topRight は Alignment(1.0, -1.0)
• Alignment.centerLeft は Alignment(-1.0, 0.0)
• Alignment.center は Alignment(0.0, 0.0)
• Alignment.centerRight は Alignment(1.0, 0.0)
• Alignment.bottomLeft は Alignment(-1.0, 1.0)
• Alignment.bottomCenter は Alignment(0.0, 1.0)
• Alignment.bottomRight は Alignment(1.0, 1.0)

画像で注目すべきは、アラインメント (x,y) の範囲内である必要はないことに注意してください。 [-1, +1] . アラインメントが (1,2) は、ウィジェットの右側で、ウィジェットの高さの半分の高さでウィジェットの下にあることを意味します。

カスタムアライメントポジションの例です。

Align(
  alignment: Alignment(0.7, -0.5),
  child: Text("widget"),
)

<イグ

補足のコード

以下は main.dart のコードで、カットアンドペーストが可能です。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: myLayoutWidget(),
      ),
    );
  }
}

Widget myLayoutWidget() {
  return Align(
    alignment: Alignment(0.7, -0.5),
    child: Text(
      "widget",
      style: TextStyle(fontSize: 30),
    ),
  );
}