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.

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 kita lihat 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
    }
);

TEXT STYLE

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 font color

child: Text(
   'Ini Text Pertama Saya',
   style: TextStyle(color: Colors.red),
)

contoh penggunaan Text dengan properti fontSize

child: Text(
   'Ini Text Pertama Saya',
   style: TextStyle(fontSize: 20),
)

Ini Text Pertama Saya

FontStyle

Secara default, jenis font pada aplikasi Flutter di Android menggunakan font Roboto. Untuk mengganti jenis font lain, kita perlu menginstallnya terlebih dahulu. Contoh kita akan menginstall font Roboto dengan cara :

1. Dowloand Font : Google Fonts
2. Extract lalu simpan ke dalam flutter project ./assets/fonts
3. Buka file pubspec.yaml lalu tambahkan fkode path font dibawah flutter: sehingga menjadi seperti ini :

# The following section is specific to Flutter. flutter: 
  fonts: 
    - family: Poppins 
     - fonts:       - asset: assets/fonts/Poppins-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: 'Poppins'
          ),
        )

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],
      ),
    ),
  ],
)

oke guys sekian dulu artikel untuk kali ini, selamat mencoba..