CODEWITHSUNDEEP
flutter
Ramses Kouam
Ramses Kouam

Reputation: 371

How to justify text in a flutter column widget?

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"),
         )

       ]),
       ),
         );

Upvotes: 11

Views: 19049

Answers (5)

vinay vishnu
vinay vishnu

Reputation: 59

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))]))

Upvotes: 6

EhsanFallahi
EhsanFallahi

Reputation: 249

Use Text Widget and TextAlign.justify :)

Text('my String', textAlign: TextAlign.justify),

Upvotes: 24

Ronald Bl&#252;thl
Ronald Bl&#252;thl

Reputation: 351

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!

Upvotes: 1

KuKu
KuKu

Reputation: 7492

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"),
         )

       ]),
)

Upvotes: 1

Kumar Lokesh Rathod
Kumar Lokesh Rathod

Reputation: 705

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

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

Upvotes: 1

Related Questions