rameez khan
rameez khan

Reputation: 359

flutter show widget in row left align

I have 2 widgets in row and using SpaceBetween in mainaxisalignment. Issue is i need to show the second widget on left side

My code

   Row(
    mainAxisAlignment:
    MainAxisAlignment.spaceBetween,
    children: [
      RichText(
        text: new TextSpan(
          // Note: Styles for TextSpans must be explicitly defined.
          // Child text spans will inherit styles from parent
          style: new TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
          children: <TextSpan>[
            new TextSpan(
                text: 'ID : ',
                style: new TextStyle(
                    fontSize: 11,
                    fontFamily: 'PoppinsBold')),
            new TextSpan(
                text: ' ${widget.patientDetails['mrn']}',
                style: TextStyle(
                    fontSize: 11,
                    fontFamily: 'PoppinsRegular',
                    color: textGreyColor)),
          ],
        ),
      ),
      RichText(
        text: new TextSpan(
          // Note: Styles for TextSpans must be explicitly defined.
          // Child text spans will inherit styles from parent
          style: new TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
          children: <TextSpan>[
            new TextSpan(
                text: 'Age : ',
                style: new TextStyle(
                    fontSize: 11,
                    fontFamily: 'PoppinsBold')),
            new TextSpan(
                text: '${widget.patientDetails['age']}',
                style: TextStyle(
                    fontSize: 11,
                    fontFamily: 'PoppinsRegular',
                    color: textGreyColor)),
          ],
        ),
      )
    ])

Issue i am facing is this

enter image description here

I need to use spaceBetween must because if length of my data is increase so it will automatically come on left side. But i need to show on left if length is less

Upvotes: 0

Views: 63

Answers (1)

Mehran Ullah
Mehran Ullah

Reputation: 792

Just wrap the RichText Inside a container With half-width of the screen size

Row(

              children: [
                Container(width: MediaQuery.of(context).size.width/2,
                  padding:const EdgeInsets.only(left: 10),
                  alignment: Alignment.centerLeft,
                  child: RichText(
                    text:  TextSpan(
                      // Note: Styles for TextSpans must be explicitly defined.
                      // Child text spans will inherit styles from parent
                      style:  TextStyle(
                        fontSize: 14.0,
                        color: Colors.black,
                      ),
                      children: <TextSpan>[
                        TextSpan(
                            text: 'ID : ',
                            style:  TextStyle(
                                fontSize: 11,
                                fontFamily: 'PoppinsBold')),
                        TextSpan(
                            text: 'mrn0987654234567',
                            style: TextStyle(
                                fontSize: 11,
                                fontFamily: 'PoppinsRegular',
                                color: textGreyColor)),
                      ],
                    ),
                  ),
                ),

                    Container(width: MediaQuery.of(context).size.width/2,
                      alignment: Alignment.centerLeft,
                      padding: EdgeInsets.only(left: 10),
                  child: RichText(
                    text:  TextSpan(
                      // Note: Styles for TextSpans must be explicitly defined.
                      // Child text spans will inherit styles from parent
                      style:  TextStyle(
                        fontSize: 14.0,
                        color: Colors.black,
                      ),
                      children: <TextSpan>[
                        TextSpan(
                            text: 'Age : ',
                            style:  TextStyle(
                                fontSize: 11,
                                fontFamily: 'PoppinsBold')),
                        TextSpan(
                            text: 'age124567898765',
                            style: TextStyle(
                                fontSize: 11,
                                fontFamily: 'PoppinsRegular',
                                color: textGreyColor)),
                      ],
                    ),
                  ),
                )
              ]),

Ao ka nor a masla we no owaya enter image description here

Upvotes: 0

Related Questions