Teks adalah bagian yang sangat penting dari sebuah UI aplikasi mobile mana pun. Pada Flutter, untuk menampilkan text kita dapat menggunakan Text widget atau “RichText” widget. Dua widget tersebut mirip tapi berbeda. Dalam kesempatan ini kita hanya akan coba membahas secara detail tentang cara menampilkan teks dalam Flutter menggunakan Widget Teks saja. Untuk RichText kita akan bahas di tutorial selanjutnya.
Daftar Isi
Cara Menggunakan Text Widget
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BelajarFlutter.com'),
),
body: Center(
child: Text('Ini Text Pertama Saya')
),
);
}
Dalam potongan kode diatas dapat dilihat bahwa kita ingin menampilkan text di Appbar dan body. Tampilannya akan menjadi seperti dibawah ini..

Struktur dari Text Widget
Text Widget dibagi menjadi dua properties yaitu : String yang merupakan data dan nantinya akan ditampilkan kelayar, lalu properti kedua merupakan argument berbentuk Object yang dimana berfungsi untuk memanipulasi tampilan seperti warna, ukuran, posisi dll. Argument pada Text bersifat opsional (tidak wajib)
Text(
String data,
{
Key key,
TextStyle style,
StrutStyle strutStyle,
TextAlign textAlign,
TextDirection textDirection,
Locale locale,
bool softWrap,
TextOverflow overflow,
double textScaleFactor,
int maxLines,
String semanticsLabel,
TextWidthBasis textWidthBasis,
TextHeightBehavior textHeightBehavior
}
);
TextStyle
TextStyle pada Text Widget berfungsi untuk memanipulasi jenis font, ukuran, warna, jenis font dan lainnya. Berikut cara penggunakan TextStyle pada Text Widget
contoh penggunaan Text dengan properti Bold
child: Text(
'Ini Text Pertama Saya',
style: TextStyle(fontWeight: FontWeight.bold),
)

contoh penggunaan Text dengan properti Italic
child: Text(
'Ini Text Pertama Saya',
style: TextStyle(fontStyle: FontStyle.italic),
)

contoh penggunaan Text dengan properti fontSize
child: Text(
'Ini Text Pertama Saya',
style: TextStyle(fontSize: 20),
)
contoh penggunaan Text dengan properti Font Color
child: Text(
'Ini Text Pertama Saya',
style: TextStyle(color: Colors.red),
)

FontStyle
Secara default, jenis font pada aplikasi Flutter di IOS akan menggunakan SF UI Text atau lebih dikenal dengan font San Francisco dan di Android menggunakan font Roboto. Untuk mengganti jenis font lain, kita perlu menginstallnya terlebih dahulu. Contoh kita akan menginstall font DancingScript dengan cara :
- Download font : https://fonts.google.com/specimen/Dancing+Script
- Extract lalu simpan ke dalam flutter project
./assets/fonts
- Buka file
pubspec.yaml
lalu tambahkan kode path font dibawah flutter: sehingga menjadi seperti ini :
# The following section is specific to Flutter. flutter: fonts: - family: DancingScript fonts: - asset: assets/fonts/DancingScript-Regular.ttf
- Lalu pada Text Widget kita hanya perlu memanggil properti fontFamily pada argument TextStyle menjadi seperti dibawah ini
Text( 'Ini Text Pertama Saya', style: TextStyle( fontSize: 40, fontFamily: 'DancingScript' ), )
Apabila membutuhkan manipulasi yang lebih mahir, Text Widget juga dapat kita gabungkan menggunakan Stack class seperti dibawah ini
Stack(
children: <Widget>[
Text(
'Belajar Flutter :)',
style: TextStyle(
fontSize: 40,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..color = Colors.red[700],
),
),
// Solid text as fill.
Text(
'Belajar Flutter :)',
style: TextStyle(
fontSize: 40,
color: Colors.grey[300],
),
),
],
)

TextAlign
Opsi penggunaan TextAlign pada Flutter Text Class sama seperti pada software lainnya yaitu
- TextAlign.left
- TextAlign.center
- TextAlign.right
- TextAlign.justify
- TextAlign.start
- TextAlign.end
Text(
'Ini Text Pertama Saya saat belajar flutter. Sangat menyenangkan dapat belajar flutter dengan mudah dan menarik',
style: TextStyle(
fontSize: 20,
fontFamily: 'DancingScript'
),
textAlign: TextAlign.right,
)

Untuk TextAlign start dan end akan mengikuti TextDirection (ltr atau rtl)
Overflow Text
Untuk menghandle overflow text kita dapat menggunakan argument Overflow. Argument overflow akan terlihat ketika panjang text melebihi batas maksimal line yang diizinkan (maxLines). Contoh kode seperti dibawah ini
Text(
'Ini Text Pertama Saya saat belajar flutter. Sangat menyenangkan dapat belajar flutter dengan mudah dan menarik',
style: TextStyle(
fontSize: 20,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
)

Terdapat pilihan dari argument overflow yaitu :
clip | Memotong Text sesuai dengan maxLines |
ellipsis | Memotong Text sesuai dengan maxLines dan diakhiri dengan tanda titik-titik. Apabila parameter maxlines tidak ditemukan maka akan memotong text menjadi satu baris saja |
fade | Memotong text sesuai dengan maxLines dengan efek fade pada perpotongan textnya |
visible | Memunculkan text meskipun melewati ukuran dari container |
baru pemula dan masih mencari sumber belajar yang cocok dan sepertinya ini tutorial yang saya cari. tutorial disini sangar membantu saya. terima kasih telah membagikan ilmu disini