belajar-flutter-bahasa-indonesia

Belajar Membuat dan berkenalan dengan Widget di Flutter.

Oke setelah kita bisa membuat sebuah project dan memahami beberapa dasar atau konsep dalam bahasa pemrograman Dart, kemudian kita akan mencoba hal sederhana terlebih dahulu.

Seperti pada judul, Flutter disini semuanya menggunakan yang namanya Widget, seluruh aplikasi adalah widget mulai dari App bar, header, background, list, text, dan sebagainya.

ilustrasi-widget-di-flutter
ilustrasi Widget pada aplikasi Flutter

Dan seperti ilustrasi diatas, di dalam widgetpun juga bisa berisikan widget lainnya, ya istilahnya beranak gitu widgetnya 😀 .

Membuat text widget di Flutter

Okeh kemudian katakanlah kita ingin menampilkan sesuatu di layar, atau kali ini kita akan membuat sebuah text yang bisa dilihat oleh user.

Sebelum itu kita hapus dulu semua isi coding yang ada di file main.dart .

Karena widget adalah sebuah objek yang spesial, dan seperti yang sudah kita pelajari untuk membuat sebuah objek kita memerlukan sebuah class, jadi kita buat class terlebih dahulu.

import 'package:flutter/material.dart';

void main(){
  runApp(AplikasiKuu());
}

class AplikasiKuu extends StatelessWidget{
  Widget build(BuildContext context) {
    return MaterialApp(home: Text('Halo...'),);
  }
}

Sebelum kita bisa menggunakan fitur-fitur yang disedediakan oleh flutter, jangan lupa mengimport package dari flutter seperti yang ada di baris 1 di atas.

Pada baris ke 7 disinilah kita membuat sebuah widget dengan bantuan framework flutter.

Jika kita perhatikan pada baris 7 ada keyword “extend” artinya class yang kita buat akan mewarisi method atau properti yang ada di class “StatelessWidget” (class milik flutter).

Lalu di baris 9 disini kita akan mengatur widget apa saja yang akan ditampilkan, dan untuk contoh kali ini kita akan menampilkan sebuah text di layar.

Di baris ke 4 juga jangan lupa kita beri sebuah perintah untuk menjalankan class yang sudah kita buat tadi.

Jika sebuah function hanya mempunyai satu buah expression bisa kita singkat penulisaanya jadi satu baris seperti ini, kita ambil contoh di atas lalu ubah seperti ini.

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

Setelah itu silahkan coba jalankan aplikasi yang kita tulis tadi di ponsel atau emulator kalian, dan kalau tidak ada masalah harusnya akan seperti ini outputnya.

belajar-membuat text-widget-di-flutter
Output text widget di Flutter

Yeyy kita berhasil menjalankan aplikasi android pertama dengan flutter!, eh tapi tunggu dulu dilihat dari tampilan sepertinya kurang enak yah dengan text merah segede gaban dan background item melompong. Agar menarik mari kita coba sedikit styling tampilannya.

Membuat Tampilan Basic di Flutter

return MaterialApp(home: Text('Halo...'),);

Kalau di coding sebelumnya di dalam argumen home: , kita hanya mengisikan sebuah widget Text kalau di ibaratkan sih yang kita lakuin sebelumnya seperti melukis tanpa kanvas.

Untuk itu sekarang kita beri kanvas dan sedikit dekorasi agar lebih enak dilihat.

Dan kita hapus dulu widget Text nya lalu coba kita tambahkan “Scaffold()”.

return MaterialApp(home: Scaffold(),);

Dengan bantuan scaffold ibarat kata kita dibuatkan tampilan basic dari sebuah aplikasi tapi kalau dengan coding seperti itu jika dijalankan masih seperti kanvas kosong hanya background putih polos, untuk itu kita beri sedikit dekorasi dan beberapa text.

menggunakan-scaffold-pada-flutter
Tampilan Widget Scaffold masih kosong

Di dalam Scaffold() kita enter, lalu kita isi dengan yang sederhana dulu seperti AppBar dan Body yang berisikan text.

class AplikasiKu extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(
      appBar: AppBar(title: Text('Aplikasi ku'),),
      body: Text('ini text didalam body'),
    ),);
  }
}

Dalam penulisannya nanti pasti ada saatnya Widget yang kita gunakan akan semakin banyak dan agar mudah dibaca ada baiknya dibuat memanjang kebawah dari pada kesamping, sekedar saran saja sih..

Dan untuk coding lengkapnya kurang lebih seperti ini :

import 'package:flutter/material.dart';

void main(){
  runApp(AplikasiKu());
}

class AplikasiKu extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(
      appBar: AppBar(title: Text('Aplikasi ku'),),
      body: Text('ini text didalam body'),
    ),);
  }
}

Dan outputnya kurang lebih akan seperti ini :

belajar-membuat-widget-appbar-body-text-di-flutter
Widget Scaffold setelah diisi widget lainnya

Coba kita bandingkan dengan yang kita buat sebelumnya sudah jauh lebih enak dipandang kan ?

Leave a Reply

Your email address will not be published. Required fields are marked *