How to justify text in a flutter column widget?

user_10697466 0
Viewed 5961

I would like to align left elements vertically and same with right one with padding, here is what I got as a result, the elements are not aligned and I cannot insert padding in the second row so that left elements are aligned

enter image description here

         return InkWell(
           child: Column(

            children: <Widget>[
               Row(
                 children:<Widget> [
                 Padding(padding:EdgeInsets.fromLTRB(18.0, 0.0, 0.0, 0.0)),

                 Text(
                 product.libelle,
                 style: theme.textTheme.title,
                 maxLines: 1,
                 textAlign: TextAlign.left,
                 ),]),


             Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children:<Widget> [
              Text(
              product.description,
              style: theme.textTheme.subtitle,
              maxLines: 1,

             ),
         RaisedButton( onPressed: () {},
         child: new Text("S\'abonner"),
         )

       ]),
       ),
         );
flutter
5 Answers

Use Text Widget and TextAlign.justify :)

Text('my String', textAlign: TextAlign.justify),
user_123150230 
Text( 'Vinay',
**textAlign: TextAlign.justify,**
style:TextStyle() ),

incase of Rich Text

    RichText(  
             **textAlign: TextAlign.justify,**
              text: TextSpan( style: TextStyle(color: Colors.black, fontSize: 36),
              children: <TextSpan>[
              TextSpan(text: 'Woolha ', style: TextStyle(color: Colors.blue)),
              TextSpan(text: 'dot '),
              TextSpan(text: 'com', style: TextStyle(decoration: TextDecoration.underline))]))
user_128238720

Would you try to wrap second row with Padding widget?

Padding(
    padding: EdgetInsets.symmetric(horizontal: 18.0),
    child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children:<Widget> [
              Text(
              product.description,
              style: theme.textTheme.subtitle,
              maxLines: 1,

             ),
         RaisedButton( onPressed: () {},
         child: new Text("S\'abonner"),
         )

       ]),
)
user_119864500

Your top level widget should be a Row, since you want to horizontally position your widgets next to each others. So what you should do instead is use the following structure (pseudocode):

Row
  Column
    Text (title)
    Text (subtitle)
  Button

It's also important to use the correct alignment properties (MainAxisAlignment.spaceBetween on Row so that there is a space between the two main elements and CrossAxisAlignment.start + MainAxisAlignment.center on Column to center things).

I created a pen to demonstrate it: https://codepen.io/rbluethl/pen/QWyNQjE

Hope that helps!

user_131995430

Please try this Just add below 2 line of code inside you Column Widget.

crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
user_51976560
Related