Hallo semua, Alhamdulillah kita telah selesai Ujian Tengah Semester, semoga di materi sebelumnya cukup jelas dipahami. Untuk pertemuan selanjutnya, kita akan membahas tentang bagaimana membuat layout dalam Flutter.
Layout
Apasih itu layout ?
Layout merupakan sebuah teknik untuk menagatur tata letak dari suatu desain yang telah dibuat dan ditempatkan dalam sebuah bidang dan menggunakan media yang telah di konsep terlebih dahulu. Lantas bagaimana kita membuat sebuah layout pada Flutter ?
Membuat Layout Flutter
Pertama kita harus memahami, konsep dalam membuat layout terlebih dahulu, terutama dalam Flutter. Untuk lebih jelasnya kita akan membahas sedikit tentang Layout pada flutter pada gambar di bawah ini.
Perhatikan gambar, kita akan membuat layout seperti gambar di atas misalnya. Hal pertama yang kita lakukan yaitu membagi gambar menjadi beberapa bagian, agar memudahkan kita ketika menerjemahkannya dalam sebuah koda pemrograman.
- Identifikasi baris dan kolom.
- Apakah layout termasuk ada grid?
- Apakah ada elemen yang tumpang tindih?
- Apakah UI memerlukan tab?
- Perhatikan area yang membutuhkan padding, margin, atau batas.
Sehingga kita dapat menghasilkan pembagian seperti gambar di atas, namun pembagian tersebut bisa kita lebih rincikan seperti berikut.
Pada gambar di atas, kita bisa membagi menjadi beberapa bagian yant terdiri dari, title, icon, text dan row.
Begitupun dengan button section, kita bisa membagi menjadi bagian seperti terdiri dari row, colum dan icon.
Menerjemahkan dalam kode pemrograman
1. Membuat project baru pada flutter
Pada langkah ini, kita membuat project baru yang kemudian pada file main.dart, kita sisakan kode seperti berikut :
import 'package:flutter/material.dart';
void main() {
// debugPaintSizeEnabled = true;
runApp(MyApp());
}2. Menambahkan Judul
Pertama, kita akan membangun kolom kiri di bagian judul. Tambahkan Stateless Widget pada kode berikut di bagian atas metode build () dari kelas MyApp.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget titleSection = Container(
padding: const EdgeInsets.all(32),
child: Row(
children: [
Expanded(
/*1*/
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/*2*/
Container(
padding: const EdgeInsets.only(bottom: 8),
child: Text(
'Oeschinen Lake Campground',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Text(
'Kandersteg, Switzerland',
style: TextStyle(
color: Colors.grey[500],
),
),
],
),
),
/*3*/
Icon(
Icons.star,
color: Colors.red[500],
),
Text('41'),
],
),
);3. Membuat Button Section
Bagian tombol berisi 3 kolom yang menggunakan layoutyang sama dan ikon di atas baris teks.
Color color = Theme.of(context).primaryColor; Widget buttonSection = Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ _buildButtonColumn(color, Icons.call, 'CALL'), _buildButtonColumn(color, Icons.near_me, 'ROUTE'), _buildButtonColumn(color, Icons.share, 'SHARE'), ], ), );
4. Membuat Text
Tentukan bagian teks sebagai variabel. Letakkan teks dalam Wadah dan tambahkan padding di sepanjang setiap tepi. Tambahkan kode berikut tepat di bawah deklarasi buttonSection:
Widget textSection = Container(
padding: const EdgeInsets.all(32),
child: Text(
'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
'Alps. Situated 1,578 meters above sea level, it is one of the '
'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
'half-hour walk through pastures and pine forest, leads you to the '
'lake, which warms to 20 degrees Celsius in the summer. Activities '
'enjoyed here include rowing, and riding the summer toboggan run.',
softWrap: true,
),
);5. Menampilkan Gambar
Pada bagian ini, kita akan menambahkan sebuah gambar, gambar bebas. Sebagai contoh kita bisa gunakan gambar di bawah ini.
Selanjutnya gambar ini, kita simpan dalam project dengan folder baru bernama asset. Agar gambar bisa terbaca maka, pada file pubspec.yaml kita tambahkan perintah berikut.
name: layout
description: >
Sample app from "Building Layouts", https://flutter.io/docs/development/ui/layout.
version: 1.0.0
environment:
sdk: '>=2.0.0-dev.68.0 <3.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
assets:
- images/lake.jpgSetelah mengatur pubspect.yaml ini, kita lanjutkan kode pada bagian main.dart dengan kode berikut.
return MaterialApp(
title: 'Flutter layout demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter layout demo'),
),
body: ListView(
children: [
Image.asset(
'images/lake.jpg',
width: 600,
height: 240,
fit: BoxFit.cover,
),
titleSection,
buttonSection,
textSection,
],
),
),
);
}6. Sentuhan terakhir
Pada langkah terakhir ini, atur semua elemen dalam ListView, bukan Kolom, karena ListView mendukung scroll pada aplikasi ketika aplikasi dijalankan pada perangkat kecil.
Column _buildButtonColumn(Color color, IconData icon, String label) {
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, color: color),
Container(
margin: const EdgeInsets.only(top: 8),
child: Text(
label,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
color: color,
),
),
),
],
);
}
}Bila dijalnkan maka akan menampilkan gambar sebagai berikut.
Silahkan dicoba, bila berhasil tinggalkan pada kolim komentar. Terimakasih
Ahmad Subki.
Posting Komentar