Slide 1

Slide 1 text

Inside Flutter Text FlutterNinjas - June 13, 2024 Kakeru Nakabachi

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3

Slide 4

Slide 4 text

Our Service WINTICKET 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

1.Introduction 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Introduction The Case for Text in WINTICKET 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

2.Text and RichText 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Text and RichText Text is RichText 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Text and RichText 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

3.TextStyle and StrutStyle 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

TextStyle Yellow Underline Text Have you seen it sometime? 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

StrutStyle 33

Slide 34

Slide 34 text

StrutStyle 34

Slide 35

Slide 35 text

4.Text Typography 35

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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)

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

5.Issues with Japanese display of Text 40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

6.Conclusion 48

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

50 Thank you

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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