Flutter Widget: Memahami penggunaan Text Widget

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.

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 :

1. Download font : https://fonts.google.com/specimen/Dancing+Script
2. Extract lalu simpan ke dalam flutter project ./assets/fonts
3. 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

4. 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