How to align text widget in rows in google flutter?

Question

I'm trying to align several a text which is in rows (a number, a small padding, followed by said text) in a column and don't know how to achieve it.

I already tried out every MainAxisAlignment setting in the rows property.

This screenshot should clarify my issue: The left part is the mockup and how it's supposed to look like, right-hand side is the current state in flutter. I want the text to be aligned at the green line that I added to visualize my problem (so the first text needs to start a bit more to the right).

My code:

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

All steps are wrapped in a column, which is a child of a Stack.

Advice is gladly appreciated. Also if you got any other advice to improve the code, feel free to leave a comment :)

Thank you in advance!

Cheers, David

Solution 1

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

Solution 2

I hope I understand you well. There are some advices for your problem to solve it:

Consider to add SizedBox(width:20.0) before RichText widgets to achieve the align in mockup.

Looks like you want to make all Text widgets centered. Consider to add center widget so they align themselves at the center of column or row.

Comments

[CodingDavid]

Thanks for your answer. I don't want to center the text and I don't want a fixed spaceholder - I rather need a method to align the text blocks next to the #numbers dynamically. I'll add another screenshot to the question to clarify what I mean.

[CodingDavid]

Hey there, thanks for your answer. Unfortunately it didn't help me because I already got the alignment of a single widget correct. My problem is to create some kind of "dynamic spaceholder" between the first widget (the generated number with the # symbol) and the text afterwards. I added another screenshot to clarify what I mean.

[CodingDavid]

Thank you very much! Had fixed the problem temporarily by using a container with a fixed width that wrapped the "step-number". Your solution seems way smoother and I'll implement it, thank you a lot :)