Cara Menggunakan Widget Text Pada Flutter

Jangan lupa baca artikel sebelumnya ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…”
Jika sudah yuk lanjut baca artikel ini…

Widget Text

Teks merupakan komponen yang sangat penting dari sebuah User Interface aplikasi mobile, desktop, dan web. Kali ini saya akan menjelaskan properti-properti widget Text yang kemungkinan besar akan sering kita gunakan. Oke langsung saja berikut langkah-langkahnya:

Buka project yang sudah kita buat sebelumnya (Jika teman-teman belum buat, silahkan ikuti artikel ini).

Pertama kita akan membungkus widget Text dengan widget Container agar kita dapat dengan mudah memodifikasi widget Text tanpa mempengaruhi widget lainnya. Gunakan fitur Refactor… seperti berikut (arahkan kursor mouse kita ke widget Text dan klik kanan):

lalu pilih Wrap with Container. Hasil programnya sebagai berikut :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Aplikasi Pertamaku"),
        ),
        body: Center(child: Container(child: Text("Halo Semuaaa..."))),
      ),
    );
  }
}

Sekarang kita coba modifikasi isi widget Container seperti berikut:
Save project yang sudah dibuat ➡ jalankan projectnya dengan menekan F5 atau klik tombol ▶ , jika berhasil maka tampilan aplikasinya seperti berikut:Setelah kita modifikasi dapat dilihat widget Container menjadi berwarna hijau muda, lebar 160, tinggi 60 dan terdapat teks “Halo Semuaa…”.
Kita coba modifikasi lagi isi widget Text seperti berikut:
Save project yang sudah dibuat ➡ jalankan projectnya dengan menekan F5 atau klik tombol ▶ , jika berhasil maka tampilan aplikasinya seperti berikut:Pertanyaannya kenapa teksnya terpotong? karena pada properti maxLines kita isi value 1. Maka supaya teksnya tampil secara lengkap maka kita berikan value 4 dan value properti height 70, programnya sebagai berikut:
dan tampilan aplikasinya sebagai berikut:(click edit on CODEPEN untuk experience yang baru)
Sekarang kita coba properti overflow: TextOverflow.ellipsis pada widget Text, programnya sebagai berikut:
dan tampilan aplikasinya sebagai berikut:dengan menggunakan properti overflow: TextOverflow.ellipsis, kita dapat memberikan info kepada pengguna jika teks yang tampil belum lengkap.
Oke kita coba lagi modifikasi widget Text, programnya sebagai berikut:
dan tampilan aplikasinya sebagai berikut:Setelah kita modifikasi dapat dilihat widget Text menjadi berwarna putih, style teksnya menjadi italic, sedikit lebih bold dan teksnya hanya tampil sebagian karena menggunakan ukuran font 25 juga ukuran widget Containet yang terbatas. Jika kita atur ukuran widget Containnernya seperti ini:
maka semua isi teks pada widget Text akan tampil semua.Oke teman-teman itulah properti widget Text yang umumnya sering digunakan, memang tidak semua saya contohkan karena sebenarnya masih banyak lagi properti-properti di widget Text yang dapat teman-teman explore (di sini). Oleh karena itu, jangan pernah merasa puas dan terus cari hal-hal baru di pemrograman flutter. Tetap Semangat!!!Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. ???????
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA