Search code examples
flutternewlineindentation

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

Basically what is happening with my text is this:

enter image description here

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.

    Screenshot