Inside Flutter Text

In app development using Flutter, Text is heavily used in every app, but the behavior is slightly different between iOS and Android, and it doesn't look exactly the same on both platforms as is. Android tends to take up more widget height than iOS, among other differences. While using the same font on iOS and Android can eliminate design differences when placing Text across platforms, it's not user-friendly if the system font chosen by the OS the user usually sees is different. In this session, we will introduce the components of Text, make the audience aware that the execution results of Text are slightly different for each platform, and aim to be able to create Text that looks the same on iOS and Android.

Transcript

1. Inside Flutter Text FlutterNinjas - June 13, 2024 Kakeru Nakabachi
2. About me 2 Kakeru Nakabachi / batch CyberAgent, Inc. WinTicket, Inc. b4tchkn
4. Our Service WINTICKET 4
5. Agenda 1. Introduction 2. Text and RichText 3. TextStyle and StrutStyle 4. Text Typography 5. Issues with Japanese display of Text 6. Conclusion 5
6. 1.Introduction 6
7. Introduction Text may be the widget you see most when developing apps in Flutter. 7
8. Introduction The Case for Text in WINTICKET 8
9. Introduction Understanding Text and using it correctly could have a big impact on the apps they are developing. 9
10. 2.Text and RichText 10
11. Text Simply set a string in the Text Widget to draw text on the screen. 11 https://youtu.be/1z6YP7YmvwA?si=kWbA1nRRXaJVqvto
12. Text TextStyle for easy customization. 12 https://youtu.be/1z6YP7YmvwA?si=kWbA1nRRXaJVqvto
13. RichText 13 https://api.flutter.dev/flutter/widgets/RichText-class.html
14. RichText Use when you want to combine multiple TextStyles. 14 https://youtu.be/rykDVh-QFfw?si=nlhlDXFlUzsVMx4S
15. RichText Some Text can be tappable like a link. 15 https://youtu.be/rykDVh-QFfw?si=nlhlDXFlUzsVMx4S
16. Text and RichText Text is RichText 16
17. 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
18. Text and RichText 18
19. Text and RichText Major differences between Text and RichText. Text uses DefaultTextStyle. 19
20. 3.TextStyle and StrutStyle 20
21. TextStyle Can decorate Text Widget. fontSize, fontWeight, color, … 21
22. DefaultTextStyle Widget can be used to set the TextStyle of child Text widgets. TextStyle 22
23. 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
24. TextStyle's “inherit: false” can also disable the use of the parent TextStyle. TextStyle 24
25. TextStyle Yellow Underline Text Have you seen it sometime? 25
26. 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
27. TextStyle Yellow Underline Text A TextStyle called _errorTextStyle is defined and is actually displayed. 👇Result of debugPrinting DefaultTextStyle.of(context).style 27
28. TextStyle Yellow Underline Text • Scaffold ◦ Material ▪ TextStyle 28 https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/material.dart#455
29. TextStyle Yellow Underline Text Reference Video. 29 https://youtu.be/DUX1uVCewvk?si=y6xEYL6oIjavjEBn
30. 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
31. TextStyle Line Height = fontSize * height height: 1.0 ≠ null 31
32. StrutStyle Set minimum line height. No lines may be shorter than the strut. Strut is defined independently from any text content or TextStyles. 32
33. StrutStyle 33
34. StrutStyle 34
35. 4.Text Typography 35
36. Text Typography The Typography of Material Design is summarized in the following pages. 36 https://m3.material.io/styles/typography/type-scale-tokens
37. 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
38. 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)
39. 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
40. 5.Issues with Japanese display of Text 40
41. 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
42. Issues with Japanese display of Text 1. Japanese height differs between iOS and Android. 42
43. 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
44. 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
45. Issues with Japanese display of Text 2. Japanese characters looks closer to the bottom on Android. 45
46. Issues with Japanese display of Text 2. Japanese characters looks closer to the bottom on Android. 46 Android iOS
47. Issues with Japanese display of Text 2. Japanese characters looks closer to the bottom on Android. 47 Android iOS
48. 6.Conclusion 48
49. 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. 50 Thank you
51. 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
52. Reference • https://youtu.be/rykDVh-QFfw?si=nlhlDXFlUzsVMx4S • https://youtu.be/1z6YP7YmvwA?si=kWbA1nRRXaJVqvto 52