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 dan pelajari semuanya disini, jika belum kalian dapat membaca artikel berikut :

• Flutter Pemula #1 – Pengenalan dan Cara Instalasi Flutter
• Flutter Pemula #2 – Menggunakan Visual Studio Code atau Android Studio untuk Coding Flutter
• Flutter Pemula #3 – Membuat Layout Sederhana
• Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView

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

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 di link github ini !!!

Sampai disini tutorial Flutter Pemula #3 – Membuat Layout Sederhana ,  ikuti terus website ini untuk mendapatkan tutorial dan artikel menarik lainya. Semoga bermanfaat, jangan lupa berkomentar dan bagikan artikel ini jika menurut kamu berguna. 🙂