Tutorial Flutter Membuat Layout Sederhana

Tutorial Flutter Membuat Layout Sederhana
Tutorial Flutter Membuat Layout Sederhana
Codingtive.com - Hai teman-teman, pada kesempatan ini ada tutorial yang sangat cocok dicoba untuk kalian yang sedang belajar Flutter. Sebelumnya kalian juga dapat berkenalan dengan bahasa yang dipakai oleh Flutter yaitu Dart di tutorial berikut :
Tutorial Pengenalan Bahasa Dart Untuk Pemula

Kita akan mencoba membuat halaman sederhana yaitu menampilkan makanan dengan menerapkan beberapa prinsip menggunakan Flutter.

Pastikan kalian sudah pernah menginstal Flutter pada laptop kalian, jika belum kalian dapat membacanya dokumentasi resmi Flutter.

Berikut langkah-langkah yang dapat kalian ikuti :

1. Buat project Flutter

Pertama, kalian buat project Flutter bisa menggunakan Android Studio atau menggunakan CLI di terminal. Disini saya menggunakan CLI di terminal dengan text edittor Visual Code. Untuk projectnya saya beri nama learnLayouting, kemudian buka folder projectnya.

Caranya yaitu di terminal, ketikan perintah :
$ flutter create learnLayouting

2. Mulai Membuat Layout

Ketika kalian menjalankan di emulator atau device maka tampilan pertama adalah default dari Flutter, kemudian kita akan mencoba membuat layoutnya dengan cara :

Buka folder lib > main.dart, maka isinya otomatis default yang disediakan oleh Flutter, hapus semua isinya.

Kita akan membaginya menjadi beberapa bagian, seperti gambar berikut :

Membuat AppBar

Untuk membuat AppBar, kalian dapat menuliskan kode berikut :

Pada bagian appBar itulah yang digunakan untuk membuat AppBar, penjelasannya :
- backgroundColor : untuk mengganti warna background AppBar
- leading : untuk bagian sebelah kiri
- title : untuk membuat title pada bagian AppBar
- actions : untuk bagian sebelah kanan, karena di bagian kanan kemungkinan bisa lebih dari 1 maka ditampung di <Widget>[]

Membuat Image Banner

Selanjutnya adalah membuat image banner, sebelumnya siapkan dulu asset gambarnya kalian bisa download asset gambar. Kemudian buatlah folder baru pada project, dan beri nama images, dan taruh gambar yang sudah didownload tadi pada folder tersebut. 

Supaya gambarnya bisa diakses di Flutter, kalian harus registrasi assetnya terlebih dahulu caranya :
- Buka file pubspec.yaml
- Cari kata assets:
- Tambahkan dibawahnya dengan kode berikut :
- images/
Artinya adalah semua asset yang berada di folder images sudah diregistrasi.

Tambahkan kode berikut setelah Widget build atau sebelum return MaterialApp :
Widget imageSection = Container(
   child: Image.asset('images/strawberry.jpg'),
);

Membuat Title

Tambahkan dibawah Widget imageSection yang sudah kita buat dengan kode berikut :
Widget titleSection = Container(
  padding: EdgeInsets.only(top: 16),
  child: Text(
    'Strawberry Pavlova',
    textAlign: TextAlign.center,
    style: TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 18,
    ),
  ),
);

Membuat Description

Caranya sama yaitu tambahkan kode dibawah titleSection :
Widget descriptionSection = Container(
  padding: EdgeInsets.all(16),
  child: Text(
      'Pavlova is menrique-based dessert named after the Rusian ballerine, '
      'Anna Pavlova. Pavloa features a crisp crust and soft, light inside, '
      'topped with fruit, and whipped cream',
      textAlign: TextAlign.justify,
    )
);

Membuat Review

Kemudian untuk membuat bagian review kita pisahkan untuk icon star dan tulisan review, tambahkan kode berikut dibawah descriptionSection :
Widget rateSection = Row(
  children: [
    Icon(Icons.star, color: Colors.yellow),
    Icon(Icons.star, color: Colors.yellow),
    Icon(Icons.star, color: Colors.yellow),
    Icon(Icons.star, color: Colors.yellow),
    Icon(Icons.star),
    ],
);

Widget reviewSection = Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    rateSection,
    Text('170 Reviews'),
  ],
);

Membuat Menu

Untuk membuat menu, caranya sedikit berbeda karena didalamnya kita perlu mengimplementasikan penggunaan Row dan Column. Agar kodenya tidak berulang-ulang kita buat Widget diluar class MyApp, kodenya seperti berikut :
Widget _buildTextSection(
  String text, 
  double textSize,
  double paddingTop,
) {
  return Container(
    padding: EdgeInsets.only(top: paddingTop),
    child: Text(
      text,
      style: TextStyle(
        fontSize: textSize,
      ),
    ),
  );
}

Widget _buildMenuSection(
  IconData iconData,
  String title,
  String timestamp,
) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(iconData),
      _buildTextSection(title, 16, 8),
      _buildTextSection(timestamp, 12, 12),
    ],
  );
}
_buildTextSection digunakan untuk handle tulisan pada bagian menu, dan _buildMenuSection digunakan untuk membuat menu yang isinya icon, title, dan timestamp.

Kemudian tambahkan Widget menuSection didalam class MyApp, kodenya seperti berikut :
Widget menuSection = Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    _buildMenuSection(
      Icons.bookmark,
      "Prep", 
      "25 min"
      ),
      _buildMenuSection(
      Icons.timer,
      "Cook", 
      "1 hour"
      ),
      _buildMenuSection(
      Icons.fastfood,
      "Feeds", 
      "4-6"
      ),
  ],
);

Finishing

Terakhir lengkapi pada bagian body, menjadi seperti berikut :
children: [
  imageSection,
  titleSection,
  descriptionSection,
  Container(
    padding: EdgeInsets.only(bottom: 24),
    child: reviewSection,
  ),
  menuSection,
],

Source Lengkap

Untuk kode di dalam main.dart lengkapnya seperti berikut :

Sekarang coba jalankan di emulator atau device, maka hasilnya seperti berikut :
Tutorial Flutter Membuat Layout Sederhana
Tutorial Flutter Membuat Layout Sederhana
Sekian tutorial flutter cara membuat layout sederhana, jika ada pertanyaan atau masukan kalian dapat menuliskannya di kolom komentar. Semoga bermanfaat

Baca juga :

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Membuat Layout Sederhana"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel