Блог

Я пытаюсь выровнять три Text() в левой части страницы. Эти тексты находятся внутри Padding() блоков, а эти — внутри a Column() .

Вот как это выглядит:

И вот код:

 Column(
  mainAxisAlignment: MainAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Padding(
      padding: EdgeInsets.only(top: 78),
      child: Text(
        'Matches',
        style: TextStyle(
          color: Colors.white,
          fontSize: 44,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    Padding(
      padding: EdgeInsets.only(top: 20),
      child: Text(
        'Today's Live Matches',
        style: TextStyle(
            color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
      ),
    ),
    Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: 20),
          child: Text(
            'LIVE MATCH',
            style: TextStyle(
                color: Colors.white,
                fontSize: 12,
                fontWeight: FontWeight.bold),
          ),
        )
      ],
    )
  ],
)
  

Для выравнивания текста

Ссылка на: Текстовый класс

Text widget Имеет textAlign свойство.

просто добавьте

 textAlign = TextAlign.left
  

для вашего Text виджета

Дополнительные параметры см. Здесь textAlign

Для выравнивания столбца

Ссылка на: класс столбца

Столбец имеет crossAxisAlignment свойство, которое по умолчанию равно центру

Добавить

 crossAxisAlignment = CrossAxisAlignment.start
  

для вашего Column виджета

Дополнительные параметры см. Здесь crossAxisAlignment

Попробуйте это

Выравнивание по осям: выравнивание по осям.начать