Как выровнять отдельные виджеты во Flutter?

Я хочу выровнять виджет Flutter внутри его родителя. Я знаю, что могу центрировать виджет, обернув его в виджет Центр.

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

Но как мне выровнять его по правому, нижнему, верхнему среднему и т.д.?

Заметки:

Я говорю об одном ребенке, а не о нескольких детях в ряду или столбце. Посмотрите эти ТАК вопросы:

Этот на правильном пути, но я пытаюсь сделать более канонический вопрос:

Как выровнять по левому краю значок OutlineButton в Flutter

Это ответ на свой вопрос. Мой ответ ниже.

Ответ 1

Как выровнять виджеты

Чтобы выровнять дочерний виджет внутри его родителя, вы используете виджет Align. Если вы знаете, как использовать виджет Center, то вы на правильном пути, потому что Center - это особый случай Align.

Оберните виджет, который вы хотите выровнять, с виджетом Align и установите его свойство выравнивания. Например, это выровняет текстовый виджет по среднему праву от родителя.

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),
    ),
  );
}

Ответ 2

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