Widget Text Dalam Flutter

Halo sobatIna ???? bagimana kabarnya hari ini, kali ini kita akan memberikan kalian materi nihh tentang widget text khususnya tentang apa aja sihhh properti dan argument yang bisa kita gunakan dalam widget text. Penasaran kann kalau begitu selamat belajar ????

Widget Text di Flutter digunakan untuk menampilkan teks pada antarmuka(UI)  pengguna aplikasi. Ini merupakan elemen fundamental dalam pembuatan UI karena memberikan kemampuan untuk menyajikan informasi, judul, atau pesan kepada pengguna.

Struktur dasar penggunaan widget text dalam flutter.

Dibawah ini contoh penggunaan widget text.

Text(

          'Teks yang ingin ditampilkan',

          style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),

        ),

dan ini hasilnya

Berdasarkan gambar diatas kita menggunakan ukuran sebesar 16, dan menggunakan ukuran tebal. Eitss itu hanya pemanasan ayo kita explor lebih jauh lagi!!

Properti Yang Ada Di Widget Text

1. STYLE

 Nahh yang pertama kita fokus ke style Text, ada banyak argument dalam style Text, tapi kita mempelajari yang umum digunakan. berikut penjelasanya.

1. Font Size

Center(

        child: Text(

          'Teks dengan ukuran 25',

          style: TextStyle(fontSize: 25,),

        ),

      ),

Properti fontSize dalam widget Text pada Flutter digunakan untuk menentukan ukuran teks. Properti ini mengambil nilai bertipe double yang mewakili ukuran teks dalam satuan piksel. Disini kita menggunakan ukuran sebesar 25. kalian bisa mengubahnya sesuai kebutuhan ????

b.  Background color

      Center(

        child: Text(

          'Hello World',

          style: TextStyle(backgroundColor: Colors.amber),

        ),

      ),

Fungsi backgroundcolor adalah memberikan warna dibelakang text. Disini kita menggunakan warna amber, kalian bisa merubah warna sesuai keinginan. 

c. Color

     Center(

        child: Text(

          'Hello World',

          style: TextStyle(color: Colors.green),

        ),

      ),

Properti color dalam properti style dari widget Text digunakan untuk menentukan warna teks. Disini kita menggunakan warna Hijau. kalian bisa merubahnya juga!

d.  Decoration

     Center(

        child: Text(

          'Teks dengan Dekorasi',

          style: TextStyle(

            decoration:

                TextDecoration.underline, // Menambah garis bawah pada teks

            fontSize: 16.0,

          ),

        ),

      ),

Properti decoration dalam properti style dari widget Text digunakan untuk menambahkan dekorasi tertentu pada teks. Properti ini mengambil objek dari kelas TextDecoration yang menyediakan berbagai opsi dekoratif seperti garis bawah Dll. Disini kita menggunaka TextDecoration.underline yang berfungsi memberikan garis dibawah teks.

e. DecorationColor

     Center(

          child: Text(

        'Teks dengan Dekorasi',

        style: TextStyle(

          decoration:

              TextDecoration.underline, // Menambah garis bawah pada teks

          decorationColor: Colors.red, // Warna garis bawah

          fontSize: 25.0,

        ),

      )),

Dalam contoh di atas, decoration diatur ke TextDecoration.underline, sehingga menambahkan garis bawah pada teks, dan decorationColor digunakan untuk menentukan warna dari garis bawah tersebut. Disini kita menggunakan warna merah.

f. LetterSpacing

   Center(

        child: Text(

          'Teks dengan Dekorasi',

          style: TextStyle(

            letterSpacing: 5,

            fontSize: 25,

          ),

        ),

      ),

Dalam Flutter, properti letterSpacing pada properti TextStyle dari widget Text digunakan untuk mengatur jarak antar huruf (letter spacing) dalam teks. Properti ini memungkinkan Anda mengendalikan seberapa rapat atau terbuka huruf-huruf tersebut. Dalam contoh di atas, letterSpacing diatur ke 5.0 yang berarti terdapat jarak sebesar 2.0 satuan antara huruf-huruf dalam teks.

2. MAXLINES

 MaxLines  Menentukan jumlah maksimum baris teks yang akan ditampilkan. Jika nilai properti ini diatur ke 1, teks hanya akan ditampilkan dalam satu baris. Jika nilainya lebih dari 1, teks dapat ditampilkan dalam beberapa baris, tetapi tidak akan melebihi jumlah yang ditentukan. Contohnya adalah sbb:

Center(

        child: Text(

          'Ini adalah contoh teks dengan maxLines.Ini adalah contoh teks dengan maxLines.Ini adalah contoh teks dengan maxLines.Ini adalah contoh teks dengan maxLines.Ini adalah contoh teks dengan maxLines.Ini adalah contoh teks dengan maxLines.Ini adalah contoh teks dengan maxLines.',

          maxLines: 2, // Hanya akan menampilkan maksimal 2 baris teks.

          overflow: TextOverflow

              .ellipsis, // Jika teks lebih panjang dari yang ditampilkan, gunakan elipsis (...).

        ),

      ),

Nahh dalam contoh diatas kita memberikan Text maksimal dalam 2 baris. Lalu bagaimana kalau kita memberikan 3 baris? Ayoo kita lihat.

Yapp sesuai yang kalian pikirkan dia akan menjadi 3 baris!! Mudahkan bukan ????

Tapi apakah kalian memperhatikan titik titik di akhir kalimat?

Yang ini Lohh

Nahh itu menandakan masih ada text lagi tetapi terpotong, dan itu menggunakan properti tambahan yaitu apa? Benar kita menggunakan overflow: TextOverflow.ellipsis

overflow: TextOverflow

              .ellipsis, // Jika teks lebih panjang dari yang ditampilkan, gunakan elipsis (...).

3. TEXTALIGN

 Dalam Flutter, properti textAlign pada widget Text digunakan untuk menentukan penataan teks di   dalam widget. Properti ini memungkinkan Anda mengatur apakah teks akan ditampilkan rata kiri (kiri), rata tengah (center), rata kanan (kanan), atau dijustify (penuh). Contohnya seperti berikut.

Center(

          child: Text(

        'Teks dengan Penataan KhususTeks dengan Penataan KhususTeks dengan Penataan KhususTeks dengan Penataan KhususTeks dengan Penataan KhususTeks dengan Penataan KhususTeks dengan Penataan KhususTeks dengan Penataan Khusus',

        style: TextStyle(fontSize: 16.0),

        textAlign: TextAlign.center, // Menetapkan penataan teks ke tengah

      ),

      ),

Berdasarkan gambar diatas kita menggunakan textalign: TextAlign.center yang berarti teks rata tengah. Kita juga  bisa mengubahnya rata kiri, rata kanan sesuai teman teman Yaa ????

4. TEXT DIRECTIONS

Dalam Flutter, properti textDirection pada widget Text digunakan untuk menentukan arah teks, yaitu apakah teks tersebut akan dibaca dari kiri ke kanan atau dari kanan ke kiri. Properti ini berguna untuk mendukung tata bahasa dan penulisan teks yang berbeda-beda di dunia. Contohnya seperti berikut.

Center(

          child: Text(

        'نص باللغة العربية',

        style: TextStyle(fontSize: 16.0),

        textDirection:

            TextDirection.rtl, // Menetapkan arah teks dari kanan ke kiri (RTL)

      ),

      ),

Dalam contoh di atas, textDirection diatur ke TextDirection.rtl, sehingga teks akan dibaca dari kanan ke kiri, yang sesuai dengan penulisan bahasa Arab. Wahh sekarang gk pusing menggunakan text bahasa Arab  ????.

Ohh yaa argument dari textDirection hanya ada dua yaitu TextDirection.rtl (Dari kanan ke kiri) dan TextDirection.ltr (Dari kiri ke kanan (Opsional) ).