Ответ 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"),
    ),
  )