BARIS DAN KOLOM MOBILE PROGRAMMING

 CARA MEMBUAT WIDGET PADA APLIKASI FLUTTER

Hai guys..

Apa kabar nya hari ini? Semoga dalam keadaan sehat dan terhindar dari segala virus yang masih ada di dunia ini ya.. Tetap kita berdoa agar pandemi ini cepat berlalu :)
Meskipun demikian, semangat belajar kita harus tetap terjaga ya teman-teman.
Nah di blog kali ini, saya akan menjelaskan cara membuat widget pada flutter. Terlebih dahulu kita harus tau apa itu widget pada flutter.

Widget pada flutter ialah semua komponen seperti button, text, icon dan lainnya yang membentuk sebuah tampilan/kerangka aplikasi. Keseluruhan dari aplikasi yang terlihat pada layar merupakan kumpulan widget. Widget pada flutter sendiri terinspirasi dari REACT.

Pada flutter, terdapat berbagai macam jenis layout. Layout yang paling mendasar adalah Row dan Colomm. Row dan Colomn ini memungkinkan kita untuk menyusun widget atau komponen-komponen UI baik secara horizontal maupun secara vertical.

Inti dari mekanisme loyout pada flutter adalah widget. Di flutter semua adalah widget termasuk layout itu sendiri juga merupakan widget.

Sebagai contoh berikut adalah penerapan widget yang terlihat dan tidak bisa terlihat :

Jika dilihat icon pada gambar pertama tidak terlihat bahwa ada colum dan baris yang membentuk susunan icon-icon tersebut. Namun sebenarnya merupakan gabungan dari berbagai wiget. Susunan dari icon tersebut sebagai berikut :

Apabila ingin menambahkan padding, margin, border, atau icon warna background pada widget maka fungsi dari container class pada flutter widget ialah

Pada widget biasanya terdapat beberapa wadah yang disebut dengan container. Container ini dapat menyimpan berbagai macam attribute dan menampung berbagai macam fungsi objek yang membuat kotak container bisa menampilkan berbagai macam efek dan hasil di dalamnya

Sourch Code dari beberapa widget berserta komentar pada tiap baris nya. Saat ini saya menggunakan Visual Studio Code untuk tempat membuat sourch code nya.

import 'package:flutter/material.dart';// berguna meng import apa yang ada dalam class yang telah di buat.

class LayoutRow extends StatelessWidget {//untuk membuat nama class, dalam pemberian nama class tersebut menggunakan huruf kapital.

  

Widget build(BuildContext context) {//kelas yang memuat widget yang sifatnya statis.

    return MaterialApp(//untuk memuat fungsi dari widget seperti tittle, dan lainnya.

        home: Scaffold(//widget utama untuk membuat sebuah halaman pada flutter

      appBar: AppBar(//digunakan pada sebuah aplikasi sebagai menu petunjuk untuk memudahkan pengguna aplikasi

        flexibleSpace: SafeArea(//untuk memasang silver menghindari intrupsi sistem operasi.

            child: Container(//berguna untuk memuat baris judul yang akan di muat.

                child: Column(//membuat column

          children: [//isi dari judul

            Row(// berguna untuk memasukkan suatu baris

              children: [

                IconButton(//berguna untuk menampilkan menu

                  icon: Icon(Icons.menu),//menu pilihan

                  tooltip: 'Navigation menu',//tampilan dari menu yang akan ditampilkan

                  onPressed: null, // null disables the button

                ),

                Spacer(),//memberikan spasi pada suatu penulisan

                Text(//berguna untuk menampung suatu penulisan

                  'Kantin Politeknik Kampar',//kalimat yang akan ditampilkan pada sebuah judul.

                  textAlign: TextAlign.center,//peletakan posisi dari penulisan

                ),

                Spacer()//memberikan spasi pada suatu penulisan

              ],

            )

          ],

        ))),

      ),

      body: Container(

        child: Column(

          children: [

            Row((// berguna untuk memasukkan suatu baris.

              children: [

                Text((//berguna untuk menampung suatu penulisan

                  'Kolom Pertama Baris Pertama',//kalimat yang akan ditampilkan nantinya.

                  textAlign: TextAlign.left, ,//peletakan posisi dari penulisan

                ),

                Spacer(),//memberikan spasi pada suatu penulisan

                Text((//berguna untuk menampung suatu penulisan

                  'Kolom Kedua Baris Pertama', ,//kalimat yang akan ditampilkan nantinya.

                  textAlign: TextAlign.center, ,//peletakan posisi dari penulisan

                ),

                Spacer(),//memberikan spasi pada suatu penulisan

                Text((//berguna untuk menampung suatu penulisan

                  'Kolom Ketiga Baris Pertama', ,//kalimat yang akan ditampilkan nantinya.

                  textAlign: TextAlign.right, ,//peletakan posisi dari penulisan

                ),

              ],

            ),

            Row((// berguna untuk memasukkan suatu baris

              children: [

                Text((//berguna untuk menampung suatu penulisan

                  'Kolom Pertama Baris Kedua', ,//kalimat yang akan ditampilkan nantinya.

                  textAlign: TextAlign.left, ,//peletakan posisi dari penulisan

                ),

                Spacer(),//memberikan spasi pada suatu penulisan

                Text((//berguna untuk menampung suatu penulisan

                  'Kolom Kedua Baris Kedua', ,//kalimat yang akan ditampilkan nantinya.

                  textAlign: TextAlign.center, ,//peletakan posisi dari penulisan

                ),

                Spacer(),//memberikan spasi pada suatu penulisan

                Text((//berguna untuk menampung suatu penulisan

                  'Kolom Ketiga Baris Kedua', ,//kalimat yang akan ditampilkan nantinya.

                  textAlign: TextAlign.right, ,//peletakan posisi dari penulisan

                ),

              ],

            )

          ],

        ),

      ),

    ));

  }

}

 

void main() {//program yang akan di jalankan.

  runApp(LayoutRow());//menjalankan class yang diatas.

}

Hasil output seperti berikut

Untuk hasil yang lebih jelas lagi teman-teman dapat memutar rotasi layar atau dapat dilihat juga dengan menggunakan google chrome tanpa menggunakan media smartphone.

Demikian penjelasan dari saya, semoga teman-teman dapat memahami nya.

See u next blog

TERIMA KASIH 💓😊