Membuat Widget Pada Flutter

-

 Assalamualaikum Warahmatullahi Wabarakatuh..

Kali ini saya akan menjelaskan tentang cara membuat widget pada flutter. Nah apa sih widget itu ?
Widget adalah 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. Terdapat beberapa widget dari hal mengenal dasar widget flutter, yang sering digunakan untuk membuat aplikasi mobile dengan bantuan Flutter antara lain :

1. Widget Row
Widget Row merupakan widget sering digunakan untuk mengurutkan children widget yang terdapat di dalamnya dalam bentuk berbaris atau dari atas ke bawah sesuai dengan order atau susunan dari children tersebut. Widget ini kan berguna untuk menampilkan data banyak seperti daftar teman di kontak phone kamu, menampilkan daftar belanja, menampilkan daftar barang pada toko kamu, dan sebagainya.
2. Widget Column
Widget Column merupakan widget yang memiliki kesamaan dengan Widget Row tapi hanya menyusunnya ke samping yang disesuaikan dengan susunan dari Widget Children yang terdapat didalamnya. Widget ini berguna untuk menampilkan tampilan menyamping seperti kategori yang sering digunakan oleh programmer untuk membangun UI. 

Berikut Source Code nya :

Penjelasan :
- import 'package:flutter/material.dart';  fungsi khusus dari dart. Ketika aplikasi dijalankan, maka fungsi ini yang pertama kali dijalankan. 
- class LayoutRow extends StatelessWidget { : selanjutnya buat kelas baru yang di extends dari class StatelessWidget dari material.dart package
- const LayoutRow({Key? key}) : super(key: key); 
- Widget build(BuildContext context) { : konteks di mana widget tertentu dibuat.
- return MaterialApp( adalah widget yang membungkus beberapa widget yang menggunakan tema material design. Di dalam MateralApp() berisi widget lagi: Scaffold, AppBar, Center, dan Text.
- home: Scaffold( : Scaffold adalah widget utama untuk membuat sebuah halaman pada flutter.
- appBar: AppBar( : Digunakan untuk membuat appbar (menu petunjuk pada sebuah aplikasi) pada bagian atas
- flexibleSpace: SafeArea( : untuk memasang silver menghindari intrupsi sistem operasi.
- child: Container( : untuk membuat baris dan judul yang akan di muat.
- child: Column( : untuk membuat kolom
- Row( : untuk membuat baris
- IconButton(
           icon: Icon(Icons.menu),
           tooltip: 'Navigation menu',
           onPressed: null, // null disables the button
Digunakan untuk membuat icon tombol menu, tombol menu pilihan pada appbar 
- Spacer() : Digunakan untuk memberikan spasi pada tulisan yang akan ditampilkan
- Text(
              'Kantin Politeknik Kampar',
               textAlign: TextAlign.center,
Digunakan untuk menampilkan tulisan 'Kantin Politeknik Kampar' dengan posisi ditengah.
- body: Container( : Digunakan untuk memuat anakan atau turunan dari Container, yang dapat memuat widget lainnya seperti Text, Column, ListView, 
- child: Column( : untuk membuat kolom
- Row( : untuk membuat baris   
 - Text(,  'kolom Pertama baris Pertama', textAlign: TextAlign.left, : untuk membuat teks 'kolom Pertama baris Pertama' dengan posisi disamping kiri.
- Spacer(),
                      Text(
                        'kolom kedua baris Pertama',
                        textAlign: TextAlign.center,
Untuk membuat spasi dan menambhakan teks 'kolom kedua baris Pertama', dengan posisi ditengah.
- Spacer(),
                      Text(
                        'kolom Ketiga baris Pertama',
                        textAlign: TextAlign.right,
Untuk membuat spasi dan menambahkan teks  'kolom Ketiga baris Pertama', dengan posisi di kanan
- Row( : untuk membuat baris baru
- Text(
                        'kolom Pertama baris kedua',
                        textAlign: TextAlign.left,
Untuk menambahkan teks 'kolom Pertama baris kedua', dengan posisi dikiri.
- Spacer()
                      Text(
                        'kolom kedua baris kedua',
                        textAlign: TextAlign.center,
Untuk membuat spasi, dan menambahkan teks 'kolom kedua baris kedua', dengan posisi di tengah.
- Spacer(),
                      Text(
                        'kolom ketiga baris kedua',
                        textAlign: TextAlign.right,
Untuk membuat spasi, dan menambahkan teks 'kolom ketiga baris kedua', dengan posisi di kanan.
- void main() {
  runApp(LayoutRow());
Digunakan untuk menjalankan class program yang dibaut.

OUTPUT

Okee, sekian penjelasan dari saya semoga bermanfaat :)

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Menghubungkan Java Dengan Database MySQL

-
Gambar
Assalamualaikum Warahmatullahi Wabarakatuh.. Hello Guys! Welcome back to my blogšŸ˜Š Di blog kali ini saya ingin membuat database dengan menghubungkan java dengan database MySQL, software yang digunakan yaitu java, Neatbens dan XAMPP. Oke guys, berikut langkah-langkahnya: 1. Pertama, buka aplikasi XAMPP aktifkan Apache dan MySQL 2. Buka browser dan akses link http://localhost/phpmyadmin/ yang berfungsi untuk membuat database 3. Lalu buat nama databasenya (disini saya membuat nama databasenya; db_perpustakaan) 4. Selanjutnya buat nama tabel dan panjang tabelnya 5. Lalu, isi kolom dengan memasukkan nama kolom, tipe datanya, isi dari karakternya dan pilih atributnya apakah termasuk primery key atau unique key. 6. Setelah itu, maka akan tampil isi dari kolom yang kita isi seperti gambar dibawah ini : 7. Selanjutnya, buka Neatbens dan buat project baru, lalu tambahkan library MySQL JDBC DRIVER untuk project baru yang kita buat tadi. Caranya yaitu klik kanan pada folder libraries, lalu kli...
Baca selengkapnya

PROGRAM KASIR SEDERHANA DENGAN BAHASA JAVA MENGGUNAKAN ARRAY

-
Gambar
 Assalamualaikum warahmatullahi wabarakatuh... Hello Guys!! Welcome Back at My BlogšŸ’“ Teman-teman pasti sudah tak asing mendengar kata kasir, karena sekarang saat kita berbelanja di supermarket , mall , restoran , maupun toko-toko yang menjual peralatan pasti ada kasir. Pernah gak sih teman-teman berfikir bagaimana cara membuat program kasir tersebut? Nah kali ini kita akan membuat program kasir sederhana menggunakan Java.  Sebelumnya teman-teman tau gak sih Array itu apa? Tipe data array adalah tipe data yang terdiri dari kumpulan tipe data lain. Dalam bahasa Indonesia, array dikenal juga dengan istilah Larik. Dengan array, proses penyimpanan data ke dalam variabel menjadi lebih efisien dan mudah, terutama jika memiliki data dalam jumlah banyak. Anggota atau isi dari array itu sendiri harus satu jenis tipe data, misalkan terdiri dari kumpulan angka bulat saja (integer), kumpulan karakter saja (char), maupun kumpulan angka pecahan saja (double). Di dalam bahasa Java, kita tida...
Baca selengkapnya

Raspberry Pi

-
Gambar
  APA ITU RASPBERRY PI?      Raspberry Pi, sering disingkat dengan nama Raspi, merupakan komputer papan tunggal (single-board circuit; SBC) yang seukuran dengan kartu kredit yang dapat digunakan untuk menjalankan program perkantoran, permainan komputer, dan sebagai pemutar media hingga video beresolusi tinggi.   Nama Raspberry Pi diambil dari nama buah, yaitu buah Raspberry, sedangkan Pi diambil dari kata Python, yaitu nama dari sebuah bahasa pemrograman. Python dijadikan bahasa pemrograman utama dari Raspberry Pi, namun tidak tertutup kemungkinan untuk menggunakan bahasa pemrograman lain pada Raspberry Pi.       Raspberry Pi pertama kali dikembangkan di laboratorium Komputer Universitas Cambridge oleh Eben Upton, Rob Mullins, Jack Lang, dan Alan Mycrof. Mereka kemudian mendirikan yayasan Raspberry Pi bersama dengan Pete Lomas dan David Braben pada tahun 2009. Pada tahun 2012, Raspberry Pi Model B memasuki produksi massal. Dalam peluncur...
Baca selengkapnya