Search code examples
flutterdartalignmentflutter-layout

How to align text widget in rows in google flutter?

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). current state of my project

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

    Screenshot