15
import 'package:flutter/material.dart';

class DraftPage extends StatefulWidget {
  DraftPage({Key key}) : super(key: key);

  @override
  _DraftPageState createState() => _DraftPageState();
}

class _DraftPageState extends State<DraftPage> {
  @override
  Widget build(BuildContext context) {
    final bottomTextStyle = TextStyle(
      fontSize: 12,
      fontWeight: FontWeight.w500,
      color: Colors.red,
    );
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: Container(
        alignment: Alignment.center,
        width: 300,
        height: 57,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
        child: Text.rich(
          TextSpan(
            children: [
              TextSpan(
                text: 'AB',
                style: bottomTextStyle,
              ),
              TextSpan(
                text: 'CD',
                style: TextStyle(
                  fontSize: 40,
                  fontWeight: FontWeight.w500,
                  color: Colors.blue,
                ),
              ),
              TextSpan(
                text: 'EF',
                style: bottomTextStyle,
              ),
            ],
          ),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

enter image description here

As you can see, the AB and EF are at the bottom of CD though I had set TextAlign.center.

Is there any way let AB CD EF align vertical center?

3 Answers 3

33

Result

result

Code

Text.rich(
          TextSpan(
            children: <InlineSpan>[
              TextSpan(
                text: 'AB',
                style: bottomTextStyle,
              ),
              WidgetSpan(
                alignment: PlaceholderAlignment.middle,
                child: Text(
                  'CD',
                  style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.w500,
                    color: Colors.blue,
                  ),
                ),
              ),
              TextSpan(
                text: 'EF',
                style: bottomTextStyle,
              ),
            ],
          ),
        ),
1
  • 3
    Thank you man, This alignment: PlaceholderAlignment.middle did the trick
    – MBH
    Aug 17, 2022 at 20:41
3

try this:

child: Text.rich(
          TextSpan(
            children: [
              TextSpan(
                text: 'AB\n',
                style: bottomTextStyle,
              ),
              TextSpan(
                text: 'CD\n',
                style: TextStyle(
                  fontSize: 40,
                  fontWeight: FontWeight.w500,
                  color: Colors.blue,
                ),
              ),
              TextSpan(
                text: 'EF',
                style: bottomTextStyle,
              ),
            ],
          ),
          textAlign: TextAlign.center,
        ),
1
  • Is textAlign not for horizontal alignment?
    – Kram
    May 19 at 11:02
-1

You can use row to center in a line

Container(
        width: 300,
        height: 57,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("AB", style: bottomTextStyle,),

            Text("CD", style: TextStyle(
              fontSize: 40,
              fontWeight: FontWeight.w500,
              color: Colors.blue,
            ),),

            Text("EF", style: bottomTextStyle,),

          ],
        )
      ),
1
  • 2
    Question clearly asks for rich text
    – Ataberk
    Jun 14, 2022 at 3:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.