CODEWITHSUNDEEP
flutterdart
无夜之星辰
无夜之星辰

Reputation: 6178

How to make rich text align vertical center in flutter?

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?

Upvotes: 20

Views: 12741

Answers (3)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63749

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

Upvotes: 44

Lakshan Costa
Lakshan Costa

Reputation: 643

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

          ],
        )
      ),

Upvotes: -1

Jim
Jim

Reputation: 7601

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

Upvotes: 3

Related Questions