Assalamualaikum warahmatullahi wabarakatuh
Apa itu Widget pada Flutter? 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.
Pada Flutter, terdapat berbagai macam jenis layout.
Layout yang paling mendasar adalah row dan column. Row dan column memungkinkan kita untuk menyusun widget atau komponen-komponen UI, baik secara horizontal mau pun secara vertical.
Apabila anda ingin menambahkan padding, margin, border, dan atau warna background pada suatu widget, maka disinilah fungsi dari Container class pada Flutter widget.
pada widget biasanya terdapat beberapa wadah atau disebut sebagai 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 didalamnya.
Container widget pada flutter merupakan “Single Child Widget” yang berarti hanya dapat memiliki satu buah child widget saja. Akan tetapi dalam sebuah container kita dapat menempatkan row, column, text atau bahkan container lain. Container widget juga dapat dijadikan sebagai dasar dan serangkaian awal dari suatu layout aplikasi.
berikut adalah contoh dari beberapa widget dengan menggunakan text dan juga menggunakan container
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.
}
maka untuk hasil dari source tersebut akan menghasilkan sebuah output seperti berikut
notes: disini untuk media output saya menggunakan goggle chrome tidak menggunakan media smartphone
Komentar
Posting Komentar