Inside Flutter Text FlutterNinjas - June 13, 2024 Kakeru Nakabachi

About me 2 Kakeru Nakabachi / batch CyberAgent, Inc. WinTicket, Inc. b4tchkn

3

Our Service WINTICKET 4

Agenda 1. Introduction 2. Text and RichText 3. TextStyle and StrutStyle 4. Text Typography 5. Issues with Japanese display of Text 6. Conclusion 5

1.Introduction 6

Introduction Text may be the widget you see most when developing apps in Flutter. 7

Introduction The Case for Text in WINTICKET 8

Introduction Understanding Text and using it correctly could have a big impact on the apps they are developing. 9

2.Text and RichText 10

Text Simply set a string in the Text Widget to draw text on the screen. 11 https://youtu.be/1z6YP7YmvwA?si=kWbA1nRRXaJVqvto

Text TextStyle for easy customization. 12 https://youtu.be/1z6YP7YmvwA?si=kWbA1nRRXaJVqvto

RichText 13 https://api.flutter.dev/flutter/widgets/RichText-class.html

RichText Use when you want to combine multiple TextStyles. 14 https://youtu.be/rykDVh-QFfw?si=nlhlDXFlUzsVMx4S

RichText Some Text can be tappable like a link. 15 https://youtu.be/rykDVh-QFfw?si=nlhlDXFlUzsVMx4S

Text and RichText Text is RichText 16

Text and RichText Text also has a Text.rich constructor. > Creates a text widget with a InlineSpan. 17 https://api.flutter.dev/flutter/widgets/Text/Text.rich.html

Text and RichText 18

Text and RichText Major differences between Text and RichText. Text uses DefaultTextStyle. 19

3.TextStyle and StrutStyle 20

TextStyle Can decorate Text Widget. fontSize, fontWeight, color, … 21

DefaultTextStyle Widget can be used to set the TextStyle of child Text widgets. TextStyle 22

If TextStyle is nested, the closest TextStyle is used. This is because the closest TextStyle to the context given to DefaultTextStyle.of(context) is taken and used in the text widget. TextStyle 23 DefaultTextStyle .of(context) DefaultTextStyle (InheritedWidget) dependOnInheritedWidgetOfExactType

TextStyle's “inherit: false” can also disable the use of the parent TextStyle. TextStyle 24

TextStyle Yellow Underline Text Have you seen it sometime? 25

TextStyle Yellow Underline Text A TextStyle called _errorTextStyle is defined and is actually displayed. 26 https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/app.dart#L33-L42

TextStyle Yellow Underline Text A TextStyle called _errorTextStyle is defined and is actually displayed. 👇Result of debugPrinting DefaultTextStyle.of(context).style 27

TextStyle Yellow Underline Text ● Scaffold ○ Material ■ TextStyle 28 https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/material.dart#455

TextStyle Yellow Underline Text Reference Video. 29 https://youtu.be/DUX1uVCewvk?si=y6xEYL6oIjavjEBn

TextStyle TextStyle has an important property called height in addition to text decoration. It is used to change the height of lines, which by default are laid out at the height defined by the font. 30 https://api.flutter.dev/flutter/painting/TextStyle-class.html

TextStyle Line Height = fontSize * height height: 1.0 ≠ null 31

StrutStyle Set minimum line height. No lines may be shorter than the strut. Strut is defined independently from any text content or TextStyles. 32

StrutStyle 33

StrutStyle 34

4.Text Typography 35

Text Typography The Typography of Material Design is summarized in the following pages. 36 https://m3.material.io/styles/typography/type-scale-tokens

Text Typography 37 https://m3.material.io/styles/typography/type-scale-tokens https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/text_theme.dart

Text Typography 38 Typography.material2014(Material 2) ● black ● white ● englishLike ● dense ● tall TextTheme Typography.material2021(Material 3) ● black ● white ● englishLike ● dense ● tall useMaterial3(default: true)

Text Typography 39 Material Design Typography and Flutter's Typography implementation are linked. https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/typography.dart#L749-L76 5

5.Issues with Japanese display of Text 40

Issues with Japanese display of Text 1. Japanese height differs between iOS and Android. 2. Japanese characters looks closer to the bottom on Android. 41

Issues with Japanese display of Text 1. Japanese height differs between iOS and Android. 42

1. Japanese height differs between iOS and Android. Issues with Japanese display of Text 43 Android iOS English 38.0 px 38.0 px Japanese 46.0 px 48.0 px

Issues with Japanese display of Text 2. Japanese characters looks closer to the bottom on Android. Issue in Flutter 44 https://github.com/flutter/flutter/issues/79931

Issues with Japanese display of Text 2. Japanese characters looks closer to the bottom on Android. 45

Issues with Japanese display of Text 2. Japanese characters looks closer to the bottom on Android. 46 Android iOS

Issues with Japanese display of Text 2. Japanese characters looks closer to the bottom on Android. 47 Android iOS

6.Conclusion 48

Conclusion Text is RichText. Understanding TextStyle and StrutStyle allows for flexible Text display. Yellow Underline Text displayed when TextStyle is not set. Flutter's Japanese support has a few issues. 49

50 Thank you

Reference ● https://qiita.com/b4tchkn/items/282f5bf759f168c3f4ce ● https://speakerdeck.com/b4tchkn/understanding-the-structure-of-text ● https://stackoverflow.com/questions/56799068/what-is-the-strutstyle-in-the-flutter-text -widget ● https://zenn.dev/tsuruo/articles/576a98ec2f016b#texttheme-1 ● https://zenn.dev/shima999ba/articles/a1241cc8a06930 ● https://developer.apple.com/design/human-interface-guidelines/typography ● https://m3.material.io/styles/typography/type-scale-token ● https://api.flutter.dev/flutter/painting/painting-library.htm ● https://youtu.be/DUX1uVCewvk?si=PC2ctCgkZiMm2naV 51

Reference ● https://youtu.be/rykDVh-QFfw?si=nlhlDXFlUzsVMx4S ● https://youtu.be/1z6YP7YmvwA?si=kWbA1nRRXaJVqvto 52