Hai, kali ini saya sedang belajar di suatu video, kalau tidak salah nama mentornya Riqi. beliau menjelaskan dasar-dasar dari slicing flutter. tapi karna saya yang masih belajar, maka saya akan membuatnya dari yang paling sederhana.
Sebelumnya jangan lupa file main.dart :
import 'package:flutter/material.dart';
import 'halaman1.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Halaman1(),
);
}
}
Adapun untuk codenya adalah seperti berikut :
import 'package:flutter/material.dart';
class Halaman1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
alignment: Alignment.center, // Menengahkan container di tengah layar
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, // Atur penempatan elemen menjadi rata kiri
children: [
Text("baris 1"),
Text("baris 222222"),
],
),
),
Text("baris 1"),
Text("baris 222222"),
Container(
color: Colors.blue,
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
child:Row(
children: [
Text("Kolom 1"),
Spacer(),
Text("kolom 2"),
Spacer(),
Text("kolom 3"),
],
)
),
],
)
);
}
}
Ini adalah part2, kelanjutan dari part1 di atas, kali ini kita sudah sukses membuat kerangka seperti berikut :
Untuk kerangka sudah mirip seperti yang dimaksud mentor kita bukan, paling kurang gambar-gambar pemanisnya, oh iya untuk mengatasi ukuran layar yang muncul seperti tanda kuning di bawah, kita sudah menggunakan listView ya,
untuk code lengkapnya adalah seperti berikut ini :
import 'package:flutter/material.dart';
class Halaman1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Container(
alignment: Alignment.center, // Menengahkan container di tengah layar
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, // Atur penempatan elemen menjadi rata kiri
children: [
Text("baris 1"),
Text("baris 222222"),
],
),
),
Text("baris 1"),
Text("baris 333333"),
Container(
color: Colors.blue,
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
child:Row(
children: [
Text("Kolom 1"),
Spacer(),
Text("kolom 2"),
Spacer(),
Text("kolom 3"),
],
)
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
child:Row(
children: [
Container(
child: Column(
children: [
Text("baris 1"),
Text("baris 2"),
],
)
),
Spacer(),
Container(
child: Row(
children: [
Text("kiri"),
Padding(
padding: EdgeInsets.only(left: 8.0),// Atur padding di sini
child: Text(
"kanan",
),
)
],
),
)
],
)
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
child:Row(
children: [
Container(
child: Column(
children: [
Text("Baris 11",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0, // Atur teks menjadi tebal di sini
),),
Text("Baris 220000")
],
),
),
Spacer(),
Container(
child: Column(
children: [
Text("Baris 11"),
Text("Baris 220000")
],
),
),
Spacer(),
Container(
child: Column(
children: [
Text("Baris 11"),
Text("Baris 220000")
],
),
),
],
)
),
Container(
constraints: BoxConstraints(
minHeight: 500.0, // Atur tinggi minimal container di sini
maxHeight: 600.0, // Atur tinggi maksimal container di sini
),
alignment: Alignment.center, // Menengahkan container di tengah layar
color: Colors.blue,
margin: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, // Atur penempatan elemen menjadi rata kiri
children: [
Text("Selain itu, Anda juga dapat menggunakan gambar sebagai latar belakang dengan menggunakan properti Selain itu, Anda juga dapat menggunakan gambar sebagai latar belakang dengan menggunakan properti 1", textAlign: TextAlign.justify,),
Text(""),
Text("Selain itu, Anda juga dapat menggunakan gambar sebagai latar belakang dengan menggunakan properti Selain itu, Anda juga dapat menggunakan gambar sebagai latar belakang dengan menggunakan properti 1", textAlign: TextAlign.justify,),
],
),
),
],
)
);
}
}
