Question 400687 in Flutter Question posted in
The official Flutter documentation can be found here.

How to Align RichText to the left in Dialog? Flutter

I want to make RichText align to the left.
I tried use Container, Row, Column, Flexible, Expanded widgets, but nothing helped me.

Future getAuthorsDialog(BuildContext context) {
  return showDialog<String>(
    context: context,
    builder: (BuildContext context) => Dialog(
      insetPadding: const EdgeInsets.symmetric(vertical: 90.0),
      child: Column(
          children: <Widget>[
            const SizedBox(height: 8.0),
            RichText(
              textAlign: TextAlign.left,
              text: const TextSpan(
                text: 'Mod: ',
                style: TextStyle(
                    fontSize: 12.0,
                    fontWeight: FontWeight.bold
                ),
                children: [
                  TextSpan(
                      text: 'Tester',
                      style: TextStyle(
                          fontSize: 12.0,
                          fontWeight: FontWeight.w600
                      )
                  ),
                ]
              )
            ),
       ]),
    ),
  );
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Your solution show me on second picture, but Mod: Tester must be have left align.

    Must be show but without left richtext align

    @tbold Solution


  2. 0

    Your RichText widget is being affected by the Column widget. By default, Column will align children in the centre.
    So you can adjust the entire column to be left:

    return showDialog<String>(
      context: context,
      builder: (BuildContext context) => Dialog(
        insetPadding: const EdgeInsets.symmetric(vertical: 90.0),
        child: Column(
            crossAxisAlignment:
                CrossAxisAlignment.stretch, // specify crossAxisAlignment here
            children: <Widget>[
              const SizedBox(height: 8.0),
              RichText(
                  textAlign: TextAlign.left,
                  text: const TextSpan(
                      text: 'Mod: ',
                      style: TextStyle(
                          fontSize: 12.0, fontWeight: FontWeight.bold),
                      children: [
                        TextSpan(
                            text: 'Tester',
                            style: TextStyle(
                                fontSize: 12.0, fontWeight: FontWeight.w600)),
                      ])),
            ]),
      )

    Or if you want just the RichText widget to be left aligned, then wrap RichText in an Align widget like this:

        return showDialog<String>(
      context: context,
      builder: (BuildContext context) => Dialog(
        insetPadding: const EdgeInsets.symmetric(vertical: 90.0),
        child: Column(
            children: <Widget>[
              const SizedBox(height: 8.0),
              Align(  // wrap RichText in a widget here
                   alignment: Alignment.centerLeft,
                   child:
              RichText(
                  textAlign: TextAlign.left,
                  text: const TextSpan(
                      text: 'Mod: ',
                      style: TextStyle(
                          fontSize: 12.0, fontWeight: FontWeight.bold),
                      children: [
                        TextSpan(
                            text: 'Tester',
                            style: TextStyle(
                                fontSize: 12.0, fontWeight: FontWeight.w600)),
                      ])),),
            ]),
      )

    Note, both of these puts text all the way to the left so probably you should add padding to the left of the text. But I will leave that as an exercise for you 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search