Cara Cepat Membuat Widget dengan Flutter
Assalamualaikum Wr Wb. Kembali lagi di blog saya, pada kesempatan kali ini saya akan membahas tentang bagaimana cara membuat Widget dengan menggunakan Flutter. Apasih itu Widget? Widget adalah Semua komponen seperti Button, Text, Icon, dan sebagainya untuk membentuk sebuah tampilan atau kerangka pada sebuah aplikasi. Keseluruhan aplikasi yang terlihat pada layar merupakan kumpulan widget, widget pada flutter terinspirasi dari React.
Pada flutter ada beberapa 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 maupun secara vertical.
Didalam Widget biasanya terdapat beberapa wadah atau sering kita sebut 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 didalamnya. Perlu teman-teman perhatikan bahwa widget ini tidak dapat dirender secara lansung tanpa widget induk, kita bisa menggunakan Widget Scaffold, Widget Center, Widget Padding, Widget Row atau Widget Colum sebegai induknya.
Berikut ini adalah contoh dari penggunakan widget dengan menggunakan text dan container.
// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart'; //mengimport apa yang ada didalam class yang telah dibuat
class LayoutRow extends StatelessWidget {
//untuk membuat nama class,dalam pembuatan nama class,
//dalam pembuatan nama class harus menggunakna huruf kapital
const LayoutRow({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// kelas yang membuat widget yang sifatnya statis
return MaterialApp(
//untuk memuat fungsi dari widget seperti title dan lainnya.
home: Scaffold(
//Widget utama untuk membuat sebuah halaman pafa flutter
appBar: AppBar(
//digunakan pada sebuah aplikasi sebagai menu petunjuk
//untuk memmudahkan pengguna aplikasi
flexibleSpace: SafeArea(
//untuk memasang silver menghindari intrupsi sistem operasi
// ignore: avoid_unnecessary_containers
child: Container(
//berguna untuk memuat baris judul yang akan dimuat.
child: Column(
//membuat colom.
children: [
//isi dari judul
Row(
//berguna untuk memasukan suatu baris
children: const [
IconButton(
//untuk menampilkan menu
icon: Icon(Icons.menu), //menu pilihan
tooltip:
'Navigation menu', //lampiran dari menu yang akan dilampirkan
onPressed: null, // null disables the button
),
Spacer(), //membrikan spasi pada suatu penulisan
Text(
//berguna menampung suatu penulisan
'Kantin Politeknik Kampar', //kalimat yang ditampilkan
textAlign: TextAlign
.center, //peletakan posisi dari penulisan
),
Spacer() //memberikan spasi pada suatu penulisan
],
)
],
),
)),
),
// ignore: avoid_unnecessary_containers
body: Container(
child: Column(
children: [
Row(
//memasukan suatu baris
children: const [
Text(
//menampung text yang dimasukan
'kolom Pertama baris Pertama', // print
textAlign:
TextAlign.left, //peletakan posisi dari penulisan
),
Spacer(), //memberikan spasi pada penulisan
Text(
//menampun text yang dimasukan
'kolom kedua baris Pertama', //print
textAlign: TextAlign
.center, //peletakan posisi dari text yang ditampilkan
),
Spacer(), //spasi pada penulisan
Text(
//menampung text yang dimasukan
'kolom Ketiga baris Pertama', //print
textAlign: TextAlign.right, //peletakan posisi tulisan
),
],
),
Row(
//menampilkan suatu baris
children: const [
Text(
//menampung text yang akan dimasukan
'kolom Pertama baris kedua', //print
textAlign: TextAlign.left, //peletakan posisi tulisan
),
Spacer(), //spasi pada penulisan
Text(
//menampung text yang dimasukan
'kolom kedua baris kedua', //print
textAlign: TextAlign.center, //peletakan posisi text
),
Spacer(), //spasi pada penulisan
Text(
//menampung text yang akan dimasukan
'kolom ketiga baris kedua', //print
textAlign: TextAlign.right, //peletekan posisi tulisan
),
],
),
],
),
)));
}
}
void main() {
runApp(LayoutRow());
}
Maka setelah kita Run/Debug makan akan menghasilkan Output seperti berikut:
Note : Pastikan jaringan teman-teman stabil, Sambungkan Hp teman-teman dengan Flutter dan hidupkan Debugging USBnya, dan jangan lupa membaca BISMILLAH sebelum melakukannya:/.
Terima kasih:)
Assalamualaikum Wr Wb.
Komentar
Posting Komentar