Belajar Dart Flutter : Mengenal Tentang Layout dan Membuat Contoh Aplikasinya - Karena Belajar

 

Setelah sebelumnya kita telah membahas tentang widget kali ini kita akan membahas tentang layout pada flutter dengan menggunakan Visual Studio Code

Struktur Pada Flutter

Dalam struktur flutter hampir sama dengan bahasa pemrograman lainnya bahwa komponen widget berada di dalam body, appbar adalah judul atau header aplikasi scaffold berfungsi sebagai pemisah antara layout satu dengan lainnya.

Bisa kita lihat contoh kode gambar di atas kode tersebut untuk menjalankan program sederhana hello world yang sesuai struktur flutter yang menghasilkan tampilan seperti gambar dibawah

Jadi dengan keterangan yang dijelaskan diatas kita akan bermain di bagian Appbar dan Body dimana kita di khususkan akan sering bermain di bagian body.

Widget

Widget adalah komponen yang mempermudah kita selaku programmer untuk suatu aplikasi, bila kita bayangkan suatu aplikasi itu adalah sebuah mobil maka komponen pendukung seperti ban, spion, radio pemancar dan lain sebagainya adalah widgetnya, selayaknya mobil komponen-komponen pendukung tidak selalu sama setiap mobil komponen pendukung tergantung dengan fungsi mobil tersebut bila mobil yang berfungsi untuk balapan memerlukan nitro sebagai komponen pendukung sebaliknya mobil yang berfungsi untuk pemakaian sehari-hari tidak memerlukan komponen pendukung seperti nitro, maka sama halnya dengan aplikasi dan widget, tidak semua aplikasi memiliki widget yang sama atau memiliki semua widget yang tersedia sama seperti penjelasan diatas komponen widget tergantung fungsi aplikasi yang akan dibuat.

Widget Single Layout

Single layout adalah layout yang hanya dapat menurunkan satu sifat ,komponen widget yang berfungsi sebagai single layout itu banyak jenis kali ini kita akan membahas tentang dua widget yaitu Center dan Container.

1. Widget Center 

Sama selayaknya nama dari widget ini berfungsi sebagai layout untuk suatu komponen yang akan otomatis di posisikan di tengah atau Center.

Kode Center

Sebagai patokan kita akan mengikuti contoh kode hello world diatas dengan code sebagai berikut

import 'package:flutter/material.dart';
main () => runApp(latihanwidget());
class latihanwidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: 
          AppBar(
           title: Text("Latihan Button"),
          ),
        body: 
          Text("hello world")
      )
    );
  }
}

Seperti dijelaskan pada struktur flutter yang telah dijelaskan di atas kita akan ubah dibagian body dengan kode sebagai berikut

        body:

          Center(

            child: Text("belajar menggunakan center"),

                ), 

Dan menghasilkan output menjadi seperti gambar di bawah

Kita membuat suatu center layout dan mengisi layout tersebut dengan suatu text maka text tersebut akan otomatis berada di tengah layout. 

2. Widget Container

Berbeda dengan center yang ukuran dan bentuknya sudah otomatis terbentuk tidak dapat dirubah container adalah widget layout yang fleksibel bisa kita ubah ukurannya, mau itu panjang atau lebar kita dapat sesuaikan sendiri kode untuk container sebagai berikut

         body:

          Container(

            child: Text("belajar layout container"),

                   ) 

Serta menghasilkan output seperti gambar di bawah

Kita membuat layout berupa container dan mengisi container tersebut dengan suatu text, mungkin sekarang kita tidak melihat perbedaannya antara text dengan layout ataupun tanpa layout oleh karena itu kali ini kita akan sesuaikan layout tersebut dengan mengubah ukuran tinggi dan lebarnya serta memberi warna sebagai indikatornya.

2.1. Mengubah Warna

Dengan menambah kode didalam container dengan kode sebagai berkut

        body:

          Container(

            color: Colors.amber,

            child: Text("belajar layout container"),

          )

Dan menghasilkan output sebagai berikut

2.2. Mengubah Ukuran Container

Dengan menambah kode didalam container sebagai berikut

        body:

          Container(

            height: 100,

            width: double.infinity,

            color: Colors.amber,

            child: Text("belajar layout container"),

          )

Kita dapat mengubah ukuran menggunakan nilai angka atau dengan kode perintah, kode yang kita gunakan diatas adalah perintah kode supaya lebar layout sesuai dengan layar sebenarnya masih banyak kode perintah lainnya karena ini hanya contoh maka kita gunakan yang sederhana dahulu,maka menghasilkan output sebagai berikut

Kali ini kita dapat melihat perbedaan output antara tanpa layout , dengan layout center dan layout container.

3. Menggabungkan Kedua Single Layout

Kali ini kita akan menggabungkan kedua single layout tersebut, dengan memasukan center kedalam container, kenapa center yang dimasukan kedalam container? bukan sebaliknya karena layout container fleksibel bisa kita ubah dan kreasikan sesuai keinginan maka kode yang dimasukan adalah sebagai berikut. 

        body:

          Container(

            height: 100,

            width: double.infinity,

            color: Colors.amber,

            child:

              Center(

                child: Text("belajar container dan center"),

              ),

          )

Maka akan menghasilkan output seperti ini

Disini kita membuat layout container dengan isi suatu layout center yang juga berisi suatu text, jadi untuk kode fullnya akan seperti dibawah ini:

Source Code:

import 'package:flutter/material.dart';

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

class latihanlayout extends StatelessWidget{

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar:

          AppBar(

            title: Text("latihan layout"),

          ),

        body:

          Container(

            height: 100,

            width: double.infinity,

            color: Colors.amber,

            child:

              Center(

                child: Text("belajar container dan center"),

              ),

          )

      ),

    );

  }

}

Sekian yang dapat saya sampaikan terima kasih telah membaca artikel ini bila teman-teman suka dengan konten ini teman-teman bisa mengikuti blog ini dengan mengklik tombol ikuti di bawah dan bila ada saran dan pertanyaan bisa disampaikan di kolom komentar.