Flutter Pemula #3 – Membuat Layout Sederhana

Jan 17, 2020 by Faisal Ridwan in Dart

ISALLAB.COM – Halo teman-teman, di postingan kali ini saya akan membahas seputar tentang Flutter Pemula #3 – Membuat Layout Sederhana. Dan sebelum kamu belajar Flutter saya saranin kamu belajar bahasa pemrograman Dart dahulu, sebab dasar dari Flutter sendiri adalah bahasa pemrograman Dart. Untuk linknya silahkan kamu ikuti link di bawah ini. Lengkap !

Baca semua partnya ya agar kamu paham semua dan gampang saat belajar Flutter ini 🙂

BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 1

BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 2

BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 3

BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 4

Beberapa hal yang akan saya bahas dalam Membuat Layout Sederhana yaitu :

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 membaca artikel berikut :

Flutter Pemula #1 – Pengenalan dan Cara Instalasi Flutter

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 Studio. Untuk projectnya saya beri nama layouting_app, kemudian buka folder projectnya.

Caranya yaitu di terminal, ketikan perintah :

$ flutter create layouting_app

atau bisa juga dengan ketik Ctrl + Shift + P seperti gambar dibawah ini :

lalu isi nama project yang mau di buat :

Pilih direktori dimana project tersebut akan tersimpan.
Tunggu beberapa saat sampai project berhasil terbuat dan muncul file main.dart.

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 :

2.1 Membuat APP BAR

Untuk membuat App Bar kalian dapat mencopy coding berikut :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Apps',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          leading: Icon(Icons.arrow_back_ios, color: Colors.black),
          title: Text(
            'Learn Layouting Sederhana',
            style: TextStyle(color: Colors.black),
          ),
          actions: <Widget>[
            Icon(Icons.search, color: Colors.black,)
          ],
        ),
        body: Text('Hello World'),
      ),
    );
  }
}

Pada bagian AppBar itulah yang digunakan untuk membuat AppBar (sebuah widget), penjelasannya :

backgroundColor : untuk mengganti warna background AppBar
leading : untuk gambar (icon) 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 tambah <Widget>[]

2.2 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 (didalam) Widget build atau sebelum return MaterialApp :

Widget imageSection = Container(

child: Image.asset('images/strawberry.jpg'),
);

2.3 Title Section

Untuk membuat title section kamu bisa ikutin code berikut :

Widget titleSection = Container(
  padding: EdgeInsets.only(top: 16),
  margin: EdgeInsets.only(bottom: 16),
  child: Text(
    'Zaman Dahulu',
    textAlign: TextAlign.center,
    style: TextStyle(
      fontWeight: prefix0.FontWeight.bold,
      fontSize: 18,
    ),
  ),
);

2.4 Dexcription Section

Untuk membuat description sebagai berikut :

Widget descriptionSection = Container(
  color: Colors.red,
  padding: EdgeInsets.all(16),
  child: Text(
    'Lorem Ipsum is simply dummy text of the'
    'printing and typesetting industry. Lorem Ipsum has been the industrys standard'
    'dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
    textAlign: TextAlign.justify,
  ),
);

2.5 Review Section

Untuk membuat review section bisa sebagai berikut :

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'),
  ],
);

2.6 Menu Section

Untuk membuat menu section bisa sebagai 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),
    ],
  );
}

Widget menuSection = Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    _buildMenuSection(Icons.bookmark, "Prep", "25 min"),
    _buildMenuSection(Icons.timer, "Old", "1 years"),
    _buildMenuSection(Icons.fastfood, "Feeds", "4-6"),
    _buildMenuSection(Icons.accessibility, "Live", "4-6"),
    _buildMenuSection(Icons.library_music, "Music", "4-6"),
  ],
);

Nah seharusnya kamu sudah selesai full codenya bisa seperti di bawah ini :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    Widget imageSection = Container(
      child: Image.asset('images/img.jpg'),
    );

    Widget titleSection = Container(
      padding: EdgeInsets.only(top: 16),
      margin: EdgeInsets.only(bottom: 16),
      child: Text(
        'Zaman Dahulu',
        textAlign: TextAlign.center,
        style: TextStyle(
          fontWeight: prefix0.FontWeight.bold,
          fontSize: 18,
        ),
      ),
    );

    Widget descriptionSection = Container(
      color: Colors.red,
      padding: EdgeInsets.all(16),
      child: Text(
        'Lorem Ipsum is simply dummy text of the'
        'printing and typesetting industry. Lorem Ipsum has been the industrys standard'
        'dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
        textAlign: TextAlign.justify,
      ),
    );

    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'),
      ],
    );

    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),
        ],
      );
    }

    Widget menuSection = Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _buildMenuSection(Icons.bookmark, "Prep", "25 min"),
        _buildMenuSection(Icons.timer, "Old", "1 years"),
        _buildMenuSection(Icons.fastfood, "Feeds", "4-6"),
        _buildMenuSection(Icons.accessibility, "Live", "4-6"),
        _buildMenuSection(Icons.library_music, "Music", "4-6"),
      ],
    );

    return MaterialApp(
      title: 'Flutter Task 1',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red[200],
          leading: Icon(Icons.favorite, color: Colors.pink),
          title: Text(
            'Learn Layouting in Eudeka!',
            style: TextStyle(color: Colors.white),
          ),
          actions: <Widget>[
            Icon(
              Icons.search,
              color: Colors.black,
            )
          ],
        ),
        body: ListView(
          children: [
            imageSection,
            titleSection,
            descriptionSection,
            Container(
              padding: EdgeInsets.only(bottom: 24),
              margin: EdgeInsets.only(top: 16),
              child: reviewSection,
            ),
            menuSection,
          ],
        ),
      ),
    );
  }
}

atau bisa lihat disini :