Skip to main content

Flutter TextBaseline Example - Alphabetic Ideographic

TextBaseline property of Text widget in flutter has two sub properties TextBaseline.alphabetic and TextBaseline.ideographic. They both looks same if we use only one language text in flutter but when we use two different languages then we can see the difference between both of them. To understand the proper difference between them I'm sharing screenshot below with proper definition.

Properties of TextBaseline:

  1. TextBaseline.alphabetic
  2. TextBaseline.ideographic

TextBaseline.alphabetic : In alphabetic we usages a unseen horizontal line to to align the bottom of glyphs. In easy language when the text sit on base line.

TextBaseline alphabetic
TextBaseline.ideographic : In easy language when the text does not sit on the base line like in Chinees language and few more other language.
TextBaseline ideographic

Flutter TextBaseline Example - Alphabetic Ideographic:

Complete source code for main.dart file:
import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
          body: Center(
              child: Text(
        'Demo Text for TextBaseline.ideographic in Flutter.',
        style: TextStyle(textBaseline: TextBaseline.ideographic),
      ))),
    );
  }
}
Screenshot of App:
Flutter TextBaseline Example - Alphabetic Ideographic

Comments