Widget dasar pada flutter: Pengenalan text widget, container widget, menampilkan gambar dengan image widget.

Pada pertemuan kali ini  kita akan membahas mulai Widget dasar pada flutter. Teman-teman semua perlu kita ketahui bahwa ternyata semua yang ada dalam flutter itu adalah widgat dan di dalam flutter sudah ada widget-widget yang siap dipakai. Kemudian di setiap widget ada properties juga mad.

Widget sendiri merupakan Semua komponen seperti button, text, icon dan sebagainya yang membentuk sebuah tampilan atau kerangka aplikasi. Keseluruhan dari aplikasi yang terlihat pada layar merupakan kumpulan widget. Widget pada Flutter sendiri terinspirasi dari React.

Penulisan class dan properties dalam flutter itu sangat berbeda. Dimana untuk penulisan class kita gunakan huruf kecil sedangkan untuk widget sendiri diawali dengan huruf kapital/huruf besar.

Contoh ;

• fontstyle  ←  Properties

• Fontstyle ←  Class Widget

Beberapa widget dasar yang akan kita bahas yaitu pertama ada text(),

container(), dan image.

1. Widget Text()

Pada saat membangun sebuah aplikasi, pasti akan membutuhkan

banyak sekali text di dalamnya, karena text merupakan bagian penting

dalam UI aplikasi mobile manapun. Pada Flutter, untuk menampilkan

text kita dapat menggunakan Text widget. lalu bagaimana cara

menggunakannya? berikut cara penggunaan text widget?

contoh:

a. Menampilkan sebuah text pada body

b. Menampilkan jenis font, ukuran, warna, dan lain-lain.

Untuk mengganti jenis font, ukuran, warna, dan lainnya kita

menggunakan jenis kode atau perintah yaitu TextStyle(),

Contoh saat kita menggunakan text dengan properti bold

Selain itu kita juga bisa mengganti jenis font dengan

properti italic (untuk ini anda bisa menggunakan jenis

huruf yang lain)

Tak hanya itu kita pun bisa mengganti ukuran dan warnanya

menggunakan properti FontSize juga FontColr.

nah itulah sedikit pembahasan tentang text widget,

selanjutnya kita masuk pada container widget

2. Container Widget()

Container widget pada flutter merupakan "Single

Child Widget" yang berarti hanya dapat memiliki

yang berarti hanya dapat memiliki satu buah child

widget saja. akan tetapi dalam sebuah continer kita

dapat menempatkan row, column, text, atau bahkan

container lain. container widget juga dapat dijadikan

sebagai alat dasar dan rangkaian awal dari suatu

loyout aplikasi cara penerapannya sebagai berikut

a. Properti Child --> Widget Container

Properti ini digunakan untuk membuat anakan atau turunan dari

container, yang dapat memuat widget lainnya seperti Text,

Column, ListView, dll. contoh:

b. Properti Alignment --> Widget Container

dengan container widget kita dapat mengatur posisi child

widget menggunakan fungsi properti alignment diantaranya

seperti:

Untuk penerapan dan pemangsa fungsi alignmaent pada constainer

dapat dilakukan seperti kode dibawah ini:

c. property color

penampakan properti ini untuk membuat wadah/Container

memiliki warna latar belakang menyesuaikan dengan

keseluruhan bagian. contoh kodenya:

body: Container(

    alignment: Alignmetn.center,

    color: Colors.purple

    child: Text(

        'Hellow word',

        style: TextStyle(

            fontSize: 20,

            color: Colors.white

        ),

    ),

),

3.  Image widget

image merupakan sebuah widget untuk menambahkan

dan menampilkan gambar pada flutter. gambar sangat

penting untuk setiap aplikasi. gambar juga dapat

memberikan informasi penting atau berfungsi sebagai

alat bantu visual untuk meningkatkan estetika aplikasi.

contoh penggunaan kode image widget

body: Image(

    image: AssetsImage('images/'),

),

jadi teman--teman, itulah sedikit penjelasan soal widget

dasar pada flutter.

Terima Kasih....

Subscribe to receive free email updates: