Flutter dasar - Pengenalan text widget

Pengenalan Text Widget Pada Flutter

    Widget adalah tumpukan layar pada sebuah aplikasi, salah satunya widget text yang akan dibahas pada pembahasan kali ini.

    Jadi, widget text adalah widget yang hanya menampilkan sebuah text serta mengatur tampilan text pada sebuah layer aplikasi, contohnya seperti ketika kita akan menampilkan sebuah text "Hello World" yang berada di tengah layer aplikasi. Untuk penggunaan software, disini saya menggunakan android studio untuk melakukan praktikum. Berikut ini adalah cara mengubah judul halaman dan menampilkan text widget degan tulisan "Aplikasi widget dasar" :

A. Mengubah judul halaman

1. Pada tampilan awal android studio, silahkan klik "New Flutter Project"





Android studio






2. Setelah itu pilih flutter dan pastikan di kolom "Flutter Sdk path" diisi dengan lokasi dimana sdk flutter tersimpan lalu klik Next






flutter






3. Kemudian pada tampilan berikut ini silahkan masukkan nama projek di bagian "Project name :" dan lokasi yang akan digunakan untuk menyimpan projek di kolom "Project location", kemudian isi nama package yang nantinya akan dialokasikan untuk menyimpan class projek Selanjutnya lakukan settingan seperti pada gambar berikut ini, setelah itu klik "Create"






Settingan projek






4. Maka akan terbentuk sebuah program aplikasi sederhana sebagai berikut. Untuk melihat file main.dart, cukup klik saja folder "lib", maka file main.dart atau file program yang akan kita buat akan disimpan di folder tersebut






Program kode sederhana




5. Untuk menjalankan program tersebut itu ada dua cara, yaitu dengan menggunakan emulator atau bisa juga menggunakan smartphone sendiri, namun disini saya menggunakan smartphone sendiri untuk praktikum. Untuk menjalankan program dengan menggunakan smartphone, kita membutuhkan kabel USB dan melakukan settingan debugging pada spartphone masing". Untuk mengaktifkan debugging dan cara menghubungkannya yaitu silahkan kunjungi link : CARA MENGATUR DEBUGGING PADA SMARTPHONE.


6. Setelah melakukan menghubungkan smartphone untuk melakukan debugging, silahkan hapus source code tersebut, karena kita akan memulai untuk mengenal widget text secara dasar.


7. Setelah semua text pada source code terhapus, maka masukkan source code sebagai berikut untuk mengubah widget text judul pada tampilan aplikasi, lalu jalankan, sehingga pada tampilan smartphone juga akan berubah seperti pada gambar di bawah ini.

Mengubah judul halaman

             Untuk mengubah judul halaman ini, kita manggunakan properti flutter yaitu "title: Text("Aplikasi widget dasar")" yang dibungkus dengan properti "AppBar", Sehingga teks pada judul halaman berubah menjadi  "Aplikasi widget dasar".

Maksud dari isi program tersebut yaitu :

"di bagian bar aplikasi saya tampilkan sebuah judul dengan tulisan Aplikasi widget dasar"

B. Menampilkan tulisan "Hello World" pada layer utama

    Setelah mengubah widget text pada judul halaman, selanjutnya kita akan menampilkan teks "Hello World" untuk widget text. Di dalam properti scaffold, tambahkan properti :

body : Center(

    child: Text("Hello World"),

    )

 

seperti pada gambar berikut ini

Text Hello World

    Maksud dari kode program tersebut yaitu :

"di dalam body kita akan menambahkan sebuah widget dengan posisi berada di tengah layar yang di dalamnya ada teks Hello World".

    Baik mungkin sampai disini dulu untuk pengenalan text widget, semoga bermanfaat bagi pembaca, terimakasih.