Flutter: Text: Align new line with previous line (indentation)

Question

Basically what is happening with my text is this:

This text was made using the following code:

child: Text(
            "1)    Persons with burns, skin infections\n2)    Primary or secondary immunodeficiencies (HIV)\n3)    Previous tuberculosis infection\n4)    Untreated active tuberculosis\n5)    History of close contact with tuberculosis patient\n6)    Immunosupressed individuals (i.e. HIV infected, leukemia, lymphoma, malignancy)\n7)    People receiving immunosuppressive medications (including high-dose steroids\n8)    Pregnancy",
          ),

I want the 2nd line in 6) and 7) align with the start of the text and not with number. Is there any way to do this in flutter?

I don't want to add additional spaces since it might change with different mobile screen. Also there are other instances where it involves more than 2 lines. Thank you for answering!

Solution

I assume you’ve created something like this:

return new ListView(
  shrinkWrap: true,
  children: <Widget>[
   const Text('1) I\'m dedicating every day to you'),
   const Text('2) Domestic life was never quite my style'),
   const Text('3) When you smile, you knock me out, I fall apart'),
   const Text('4) And I thought I was so smart')
  ]
);

You can use the Row Widget to achieve the result you want:

return new ListView(shrinkWrap: true, children: <Widget>[
  new Row(children: <Widget>[
    Text('1) '),
    Expanded(child: Text('I\'m dedicating every day to you'))
  ], crossAxisAlignment: CrossAxisAlignment.start),
  new Row(children: <Widget>[
    Text('2) '),
    Expanded(child: Text('Domestic life was never quite my style'))
  ], crossAxisAlignment: CrossAxisAlignment.start),
  new Row(children: <Widget>[
    Text('3) '),
    Expanded(child: Text('When you smile, you knock me out, I fall apart blablabla'))
  ], crossAxisAlignment: CrossAxisAlignment.start),
  new Row(children: <Widget>[
    Text('4) '),
    Expanded(child: Text('And I thought I was so smart')),
  ], crossAxisAlignment: CrossAxisAlignment.start)
]);

Of course it's a bit ugly, but I hope it will point you in the right direction.

Comments

[DomingoMG]

One of the ways is to separate into 2 rows and inside the two rows make use of the container

[nypogi]

Hi Giovanni! Thank you for answering. I did that using only the widget Text and just added new lines after each sentences. I'll update the information above.

[gi097]

I saw your approach, however, it will be very hard to make something suitable for only one text widget. Think of screen width. If we know the width of the screen, how do we know how much spaces we need to add on each new line? This depends on the device and resolution, which is different on each device. I think it's a much cleaner way to let Flutter do the layout stuff for you, as mentioned in my answer.

[nypogi]

Alright! I'll go back to coding and see what I can do. Thank you for your input!

[gi097]

Good luck, have a nice day! :)

[tsig]

To add to this brilliant solution, if you want to put tab stops you can add Container(width: indent): new Row(children: <Widget>[ Container(width: 15), Text('1) '), Container(width: 5), Expanded(child: Text('I\'m dedicating every day to you')) ]