Как выровнять текстовый виджет по строкам в гугл флаттере?

Question

Я пытаюсь выровнять несколько строк в столбце (число, небольшой отступ, за которым следует указанный текст) в столбце и не знаю, как этого добиться.

Я уже опробовал каждый параметр MainAxisAlignment в свойстве rows.

Этот снимок экрана должен прояснить мою проблему: левая часть - это макет, и как он должен выглядеть, правая часть - текущее состояние флаттера. Я хочу, чтобы текст был выровнен по зеленой линии, которую я добавил, чтобы визуализировать мою проблему (поэтому первый текст должен начинаться немного правее).

Мой код:

Widget singleStep(BuildContext context, int numToPrint, String text,
    {String fineprint = ""}) {
  return Padding(
      padding: EdgeInsets.only(
          bottom: 0.023 * getScreenHeight(context),
          left: 0.037 * getScreenWidth(context)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          RichText(
              text: TextSpan(children: <TextSpan>[
            TextSpan(
                text: "#",
                style: GoZeroTextStyles.regular(_NUMBERFONTSIZE,
                    color: GoZeroColors.green)),
            TextSpan(
                text: numToPrint.toString(),
                style: GoZeroTextStyles.regular(_NUMBERFONTSIZE))
          ])),
          Padding(
              padding: EdgeInsets.only(left: 0.017 * getScreenWidth(context)),
              child: RichText(
                  text: TextSpan(
                      style: GoZeroTextStyles.regular(_TEXTSIZE),
                      children: <TextSpan>[
                    TextSpan(text: text + "\n"),
                    TextSpan(
                        text: fineprint,
                        style: GoZeroTextStyles.regular(_FINEPRINTSIZE))
                  ])))
        ],
      ));
}

Все шаги заключены в столбец, который является дочерним элементом стека.

Совет с удовольствием приветствуется. Также, если у вас есть другие советы по улучшению кода, не стесняйтесь оставлять комментарии:)

Заранее спасибо!

Приветствия, Дэвид

Answer 1

Мое предложение будет возвращать Container вместо Padding из Widget singleStep и использовать свойство padding контейнера для установки заполнения.

Снимок экрана

Ниже очень простой c фрагмент кода с использованием контейнера, с помощью которого я мог бы добавить отступ слева от текста:

void main() {
  runApp(
    MaterialApp(
      home: SafeArea(
        child: Scaffold(
          backgroundColor: Colors.white,
          body: Container(
            margin: EdgeInsets.only(top: 20.0),
            padding: EdgeInsets.only(
              left: 20.0,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.green,
                    fontSize: 20.0,
                  ),
                ),
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.green,
                    fontSize: 20.0,
                  ),
                ),
                Text(
                  "Hello World",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.green,
                    fontSize: 20.0,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

Надеюсь, это полезно.

Answer 2

@override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        padding: EdgeInsets.all(10),
        child: Column(children: [
          Expanded(
              flex: 4,
              child: Container(
                alignment:Alignment.center,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.grey, width: 1.0)),
              child:Text('I\'m in Circle',textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 19,
                        fontWeight: FontWeight.bold,
                        color: Colors.black)))),
          SizedBox(height: 15),
          Text('Title',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 19,
                        fontWeight: FontWeight.bold,
                        color: Colors.black)),
          SizedBox(height: 10),
          Expanded(
              flex: 3,
            //Use listview instead of column if there are more items....
              child: Column(
                mainAxisAlignment:MainAxisAlignment.spaceEvenly,
                children: [
                Row(children: [
                  Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
                    child: Text('#1',
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.bold,
                            color: Colors.green)),
                  ),
                  Text('Your text goes here.......\nSecond line',
                      style: TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.bold,
                          color: Colors.black)),
                ]),
                Row(children: [
                  Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
                    child: Text('#2',
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.bold,
                            color: Colors.green)),
                  ),
                  Text('Your text goes here.......\nSecond line',
                      style: TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.bold,
                          color: Colors.black)),
                ]),
                Row(
                  children: [
                  Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
                    child: Text('#3',
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.bold,
                            color: Colors.green)),
                  ),
                  Text('Your text goes here.......\nSecond line',
                      style: TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.bold,
                          color: Colors.black)),
                ])
              ]))
        ]));
  }

Answer 3

Надеюсь, я вас хорошо понимаю. Есть несколько советов для решения вашей проблемы:

Попробуйте добавить SizedBox (ширина: 20,0) перед виджетами RichText для достижения выравнивания в макете.

Похоже, вы хотите сделать все текстовые виджеты центрированными. Попробуйте добавить центральный виджет, чтобы они выровнялись в центре столбца или строки.