Flutter Doctor & Android Studio in Mobile programming
Cara Mudah Membuat Widget Container Pada Flutter.
Hallo sobat Coders!!!!
Pada pembahasan sebelumnya sudah membuat icon menu, dan pada pembahasan kali ini sedikit mengembangkan dari pembahasn sebelumnya.
Pada kesempatan kali ini kita akan membuat widget pada flutter menggunakan Visual studio code.
Di Flutter semua adalah widget termasuk layout itu sendiri juga merupakan widget. Gambar, icon, dan text yang terdapat pada flutter adalah widget. Selain sesuatu yang tidak terlihat juga merupakan widget, seperti baris, kolom mauapun grids dll.
Dan kali ini kita akan membuat sourcecode awalnya, dan berikut adalah sourcode awal :
kemudian kembangkan sourcecode tersebut ntuk menambah teks,kemudian baris serta coloums menjadi sourcecode seperti berikut :
Sourcode
import 'package:flutter/material.dart';
class LayoutRow extends StatelessWidget {
const LayoutRow({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar( //bar atas aplikasi
flexibleSpace: SafeArea( //widget flexsiblespace
// ignore: avoid_unnecessary_containers
child: Container(
child: Column( //untuk membuat kolom pertama
children: [
Row(
//untuk membuat baris pertama
children: const [
IconButton(
icon: Icon(Icons.menu), //widget icon
tooltip:
'Navigation menu', //nama untuk iconnya yaitu navigation menu
onPressed:
null, // berisi null yang artinya tidak ada aksi yang akan terjadi jika kita menekannya
),
Spacer(), //untuk memberi jarak atau spasi //pemisah atas spasi kolom
Text( //widget teks
'Kantin Politeknik Kampar', //kalimat yang akan tampil
textAlign: TextAlign
.center, //menentukan letak teks di tengah
),
Spacer()
],
)
],
),
)),
// ignore: avoid_unnecessary_containers
),
// ignore: avoid_unnecessary_containers
body: Container( //bagian body
child: Column( //membuat kolom ke dua
children: [
Row( //membuat baris ke dua
children: const [
Text(
'kolom Pertama baris Pertama', //kalimat yang akan tampil
textAlign: TextAlign
.left, //menentukan letak teks di kolom kiri
),
Spacer(), //pemisah atas spasi kolom
Text(
'kolom kedua baris Pertama', //kalimat yang akan tampil
textAlign: TextAlign
.center, //menentukan letak teks di kolom tengah
),
Spacer(), //pemisah atas spasi kolom
Text(
'kolom Ketiga baris Pertama', //kalimat yang akan tampil
textAlign: TextAlign
.right, //menentukan letak teks di kolom kanan
),
],
), //penutup baris pertama
Row(
children: const [
Text(
'kolom Pertama baris kedua', //kalimat yang akan tampil
textAlign: TextAlign
.left, //menentukan letak teks di kolom kiri
),
Spacer(), //pemisah atas spasi kolom
Text(
'kolom kedua baris kedua', //kalimat yang akan tampil
textAlign: TextAlign
.center, //menentukan letak teks di kolom tengah
),
Spacer(), //pemisah atas spasi kolom
Text(
'kolom ketiga baris kedua', //kalimat yang akan tampil
textAlign: TextAlign
.right, //menentukan letak teks di kolom kanan
),
],
),
],
), //batas pembuatan kolom
)));
}
}
void main() {
// ignore: prefer_const_constructors
runApp(LayoutRow());
}
kemudian Run&Debug sourcecode tersebut pada vscode dan pilih device yang digunakan untuk melauncing hasil, dan disini saya menggunakan android emulator yang disediakan oleh Flutter, dan berikut hasil debug sourcecode nya.
cukup sekian pembahasan kali ini mengenai pembuatan widget dan penambahan text,baris da kolom pada Flutter dan Vscode.
Wassalamualaikum wr.wb salam coders!!!
Komentar
Posting Komentar