How to make rich text align vertical center in flutter? - flutter

Question

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,
),
),
);
}
}
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?

Answer 1

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

Answer 2

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

Answer 3

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