Tutorial Dart 26 : Layout Flutter, Ayo Belajar Cara Membuatnya

Last Updated on October 19, 2021 by

Pada artikel kali ini Codekey akan membahas tentang layout Flutter. Inti dari Flutter Layout adalah widget. Seperti yang sudah dijelaskan sebelumnya, Flutter adalah framework berbasis widget. Bahkan model dalam Flutter Layout adalah widget.

Gambar, ikon, dan teks yang Anda lihat di aplikasi Flutter semuanya adalah widget. Tetapi ada beberapa hal yang bukan merupakan widget di Flutter seperti baris, kolom, dan kisi yang mengatur, membatasi, dan menyelaraskan widget yang terlihat.

Berikut ini adalah penjelasan tentang cara membuat layout pada Flutter. Kalau Anda ingin tahu cara membuat layout Flutter, simak artikel ini sampai akhir.

Pengertian Layout pada Flutter

Konsep utama dari mekanisme layout dalam framework Flutter adalah widget. Kalau Anda programmer atau developer berpengalaman, Anda pasti tahu bahwa Flutter adalah framework berdasar atas widget. Jadi gambar, ikon, teks, dan bahkan layout aplikasi Anda semuanya adalah widget.

Di sini ada beberapa hal yang tidak Anda lihat di UI aplikasi Anda, seperti baris, kolom, dan kisi yang mengatur, membatasi, dan menyelaraskan widget yang terlihat juga merupakan widget.

Flutter memungkinkan kita membuat layout dengan menyusun beberapa widget untuk membangun widget yang lebih kompleks. Sebagai contoh, kita dapat melihat gambar di bawah ini yang menunjukkan tiga ikon dengan label di bawahnya masing-masing.

Anda membuat layout Flutter dengan menyusun widget untuk membuat widget yang lebih kompleks. Sebagian besar dari ini akan terlihat seperti yang Anda harapkan, tetapi Anda mungkin bertanya-tanya tentang container.

Container adalah kelas widget yang memungkinkan Anda menyesuaikan widget turunannya. Gunakan Container saat Anda ingin menambahkan padding, margin, border, atau warna latar belakang, untuk menyebutkan beberapa kemampuannya.

Setiap widget teks ditempatkan di container untuk menambahkan margin. Seluruh row atau baris juga ditempatkan dalam container untuk menambahkan padding di sekitar baris. Sisa UI (User Interface) yang ada dalam contoh ini dikendalikan oleh properti. Atur warna Ikon menggunakan properti warnanya.

Gunakan properti Text.style untuk mengatur font, warnanya, berat, dan sebagainya. Kolom dan baris memiliki properti yang memungkinkan Anda menentukan bagaimana anak-anak mereka disejajarkan secara vertikal atau horizontal, dan berapa banyak ruang yang harus ditempati anak-anak.

Jenis-Jenis Layout Flutter Widget

Ada dua jenis layout dasar pada Flutter yang menjadi sebuah widget di dalam Flutter. Adapun jenis layout dasar pada Flutter.

a. Single Child Layout Widget

Widget ini adalah jenis widget yang hanya dapat memiliki satu widget anak di dalam widget layout induk. Widget ini juga dapat berisi fungsionalitas layout khusus. Flutter memberi kami banyak widget anak tunggal untuk membuat UI aplikasi menarik. Jika kita menggunakan widget ini dengan tepat, ini dapat menghemat waktu kita dan membuat kode aplikasi lebih mudah dibaca.

b. Custom Single Child Layout

Widget ini adalah widget, yang menunda dari layout anak tunggal ke delegasi. Delegasi memutuskan untuk memposisikan widget anak dan juga digunakan untuk menentukan ukuran widget induk.

Cara Membuat Layout Flutter

Membuat Layout Flutter tidaklah sulit. Segmen ini akan menunjukkan cara membuat dan menampilkan widget sederhana. Cara ini adalah cara membuat layout dasar pada Flutter. Cara ini juga menunjukkan seluruh kode untuk aplikasi Hello World sederhana. Di Flutter, hanya perlu beberapa langkah untuk meletakkan teks, ikon, atau gambar di layar. Perhatikan langkah-langkah berikut ini:

1. Pilih sebuah widget layout

Pilih dari berbagai widget layout berdasarkan cara Anda ingin menyelaraskan atau membatasi widget yang terlihat, karena karakteristik ini biasanya diteruskan ke widget yang ada. Contoh ini menggunakan Center yang memusatkan kontennya secara horizontal dan vertikal.

2. Buatlah sebuah widget yang dapat terlihat

Sebagai contoh Anda bisa membuat sebuah teks widget seperti di bawah ini:

Text('Selamat Belajar'),

Kemudian buatlah sebuah gambar atau ‘Image’ seperti di bawah ini:

Image.asset(
  'images/example1.jpg',
  fit: BoxFit.cover,
),

Buatlah sebuah widget ‘Icon’ :

Icon(
  Icons.star,
  color: Colors.blue[500],
),

3. Tambahkan Widget yang terlihat ke layout widget

Semua widget layout Flutter memiliki salah satu dari berikut ini:

• Child property (properti anak) jika mereka mengambil satu child (anak) misalnya, Center atau Container
• Children Property (Properti turunan) jika mereka mengambil daftar widget—misalnya, row, column, ListView, atau stack.

Tambahkan widget Teks ke widget center:

const Center(
  child: Text('Selamat Belajar'),
),

4. Tambahkan widget layout Flutter ke halaman
Aplikasi Flutter itu sendiri adalah widget, dan sebagian besar widget memiliki metode build(). Membuat instance dan mengembalikan widget dalam metode build() aplikasi akan menampilkan widget.

a. Material Apps

Untuk Material Apps Anda dapat menggunakan widget Scaffold; itu menyediakan spanduk default, warna latar belakang, dan memiliki API untuk menambahkan laci, snack bar, dan bottom sheets. Kemudian Anda dapat menambahkan widget Center langsung ke properti body untuk halaman beranda.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Example'),
        ),
        body: const Center(
          child: Text('Selamat Belajar'),
        ),
      ),
    );
  }
}

b. Non-Material Apps

Untuk non-Material Apps, Anda bisa menambahkan widget center untuk metode build() aplikasi berikut ini caranya:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.white),
      child: const Center(
        child: Text(
          'Selamat Belajar',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 36,
            color: Colors.black87,
          ),
        ),
      ),
    );
  }
}

Secara default, aplikasi non-Material tidak menyertakan AppBar, judul, atau warna latar belakang. Jika Anda ingin fitur ini dalam aplikasi non-Material, Anda harus membuatnya sendiri. Aplikasi ini mengubah warna latar belakang menjadi putih dan teks menjadi abu-abu gelap untuk meniru aplikasi Material. Saat Anda menjalankan aplikasi, Anda akan melihat Hello World.

Widget Layout yang Umum Digunakan

Flutter memiliki library widget layout yang kaya akan berbagai widget. Berikut adalah beberapa di antaranya yang paling umum digunakan dalam layout dasar pada Flutter. Untuk informasi tentang widget lain yang tersedia, lihat katalog Widget, atau gunakan kotak Pencarian di dokumen referensi API. Selain itu, halaman widget di dokumen API sering kali memberikan saran tentang widget serupa yang mungkin lebih sesuai dengan kebutuhan Anda.

Widget berikut terbagi dalam dua kategori: widget standar dari library widget, dan widget khusus dari library Material. Aplikasi apa pun dapat menggunakan library widget tetapi hanya aplikasi Material yang dapat menggunakan library pada Komponen Material.

a. Standar Widget

• Container – Ia berguna untuk menambahkan padding, margin, border, background color, atau dekorasi lain ke widget Anda. Banyak layout memanfaatkan container secara bebas untuk memisahkan widget menggunakan padding, atau untuk menambahkan border atau margin. Anda dapat mengubah background perangkat dengan menempatkan seluruh layout Flutter ke dalam container dan mengubah warna atau background image.
• GridView – Ia berguna untuk meletakkan widget sebagai kisi yang dapat digulir. Anda bisa menggunakan GridView untuk meletakkan widget sebagai daftar dua dimensi. GridView menyediakan dua daftar pra-fabrikasi, atau Anda dapat membuat kisi kustom Anda sendiri. Saat GridView mendeteksi bahwa isinya terlalu panjang untuk muat di kotak render, maka secara otomatis akan di-scroll.
• ListView – Widget ini menampilkan widget sebagai daftar yang dapat digulir. ListView merupakan widget yang mirip seperti kolom, secara otomatis menyediakan pengguliran saat kontennya terlalu panjang untuk kotak rendernya.
• Stack: untuk melakukan tumpang tindih widget di atas yang lain. Anda bisa menggunakan Stack untuk mengatur widget di atas widget dasar. Seringkali widget berupa gambar. Widget dapat sepenuhnya atau sebagian tumpang tindih dengan widget dasar.

b. Material Widget

• Card – Berguna untuk mengatur info terkait ke dalam kotak dengan sudut membulat dan bayangan jatuh. Card berisi nugget informasi terkait dan dapat disusun dari hampir semua widget, tetapi sering digunakan dengan ListTile. Card memiliki satu anak, tetapi anaknya dapat berupa kolom, baris, daftar, kisi, atau widget lain yang mendukung banyak anak. Secara default, card mengecilkan ukurannya menjadi 0 kali 0 piksel. Anda dapat menggunakan SizedBox untuk membatasi ukuran card yang ada.
• ListTile – berguna untuk mengatur hingga 3 baris teks, dan ikon awal dan akhir opsional, ke dalam satu baris. Gunakan ListTile, widget row khusus dari library Material, untuk cara mudah membuat baris yang berisi hingga 3 baris teks dan ikon awal dan akhir opsional. ListTile paling sering digunakan di Card atau ListView, tetapi dapat digunakan di tempat lain.

Itulah penjelasan tentang Layout Flutter dan cara membuat layout dalam framework Flutter. Ingin tahu tutorial serta tips dan trik dalam bahasa Dart khususnya Flutter Framework? Jangan lupa untuk mengunjungi situs Codekey di https://codekey.id/ dan jangan sampai Anda ketinggalan informasi terbaru.