Widget Text() Dalam Flutter

Selamat siang!

Dalam web resminya, widget Text() dijelaskan :

The Text widget lets you create a run of styled text within your application.

Widget Teks memungkinkan kita membuat sebuah teks yang memiliki gaya dan tampil serta bisa dilihat oleh user. Contoh penggunaan widget ini yaitu dengan script :

MyAppBar(

            title: Text(

              'Example title'

            ),

          ),

Dengan menuliskan source code seperti diatas, akan tampil tulisan Example title di AppBar() kita. Nah, selanjutnya kita akan mempelajari tentang properti yang dimiliki oleh widget Text(). Properti yang ada dalam widget ini yaitu :

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

Umumnya yang biasa dipakai dalam penggunaan widget ini 4 properti yaitu :

• TextStyle
• FontStyle
• TextAlign
• OverflowText

Kita bahasa satu per satu yah ☺

TextStyle()

TextStyle pada widget Text() berfungsi untuk memanipulasi jenis font, ukuran, warna, jenis font dan lainnya. Berikut cara penggunakan TextStyle() serta contoh penggunaanya dengan properti Bold.

child: Text(

   'Ini Text Pertama Saya',

   style: TextStyle(fontWeight: FontWeight.bold),

)

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'

          ),

        )

TextAlign()

Opsi penggunaan TextAlign pada Flutter Text Class sama seperti pada software lainnya yaitu untuk meletakkan posisi dari teks kita. Propesti untuk ini 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,
)

OverFlowText()

Untuk menghandle overflow text kita dapat menggunakan argument OverFlow(). Argument overflow() akan terlihat ketika panjang teks 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,

)

Argumen dari widget 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

Okey, cukup sekian untuk tulisan saat ini...

Selamat belajar!!! #WajibNgulik 🖳