Flutter Bagian 2: Belajar Dasar Menggunakan Widget

Saat anda mulai dengan flutter, salah satu hal yang pertama yang perlu anda pelajari adalah widget dimana widget merupakan komponen yang ada pada flutter untuk menampilkan user interface dan menerima interaksi dari user.

Membuat Project Baru

Jika anda ingin membuat project baru, silahkan buka halaman berikut :


Belajar Flutter Bagian 1


Membuat StateLessWidget

Membuat widget yang nilainya tidak bisa diubah (immutable) yaitu dengan menggunakan class StateLessWidget yang dapat di extends dari class StateLessWidget, dan anda harus melakukan @override dari method fungsi Widget build() yang fungsinya untuk mengembalikan sebuah objek Widget, jadi jika anda menambahkan widget berupa Text, Image, Card, Row, Column dan lainnya, anda hanya perlu koding di dalam dari method fungsi tersebut.

class MyAppKodeTR extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // buat kode disini
  }
}

Fungsi yang dipanggil saat main.dart dijalankan, yaitu dengan menambahkan method main() disertai dengan memanggil fungsi runApp dengan parameter class yang dijalankan yaitu class MyAppKodeTR

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

// atau dengan menggunakan cara

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

Menambahkan Widget Text

// Anda dapat membaca tentang paket di sini: https://flutter.io/using-packages/
import 'package:flutter/material.dart';
/// Fungsi yang dipanggil saat main.dart dijalankan.
void main() => runApp(MyAppKodeTR());

/// Widget ini adalah root dari aplikasi anda.
/// Saat ini, anda hanya menampilkan satu widget di aplikasi kami.
class MyAppKodeTR extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // widget yang membungkus beberapa widget yang menggunakan tema material design 
    return MaterialApp(
      // fungsi untuk menampilkan dan menghilangkan banner build sebelah kanan atas
      debugShowCheckedModeBanner: true, 
      home: Scaffold( // widget untuk struktur dasar material design
       // attribut untuk memberikan keseluruhan warna latar
        backgroundColor: Colors.amber[100],
         // widget untuk membuat AppBar
        appBar: AppBar(
          // attribut title untuk menampilkan judul pada appbar dengan widget Text untuk membuat teks
          title: Text("Aplikasi Widget KodeTR"), 
          // attribut untuk membuat warna latar secara keseluruhan
          backgroundColor: Colors.cyan,
        ),
        body: Center( 
            child: Text("KodeTR"), //menambahkan Widget dibagain child untuk menambahkan text
        ),
      ),
    );
  }
}

Dibagain widget Text anda juga bisa mengatur font dengan menambahkan `widget TextStyle’ pada bagain property style

 Text("KodeTR",style: TextStyle(fontFamily: "Serif", height: 2.0, fontSize: 20)),

Setelah itu, anda bisa jalankan maka akan seperti gambar dibawah

Menambahkan Widget Image

Tambahkan Widget Image dibagain child

child: Image.network('https://kodetr.herokuapp.com/banners/post/flutter/flutter.webp'),

Setelah itu, anda bisa jalankan maka akan seperti gambar dibawah

Manambahkan Widget Column dan Row

Widget Column untuk posisi layout menurun kebawah (vertikal) atau secara perkolom untuk setiap widget yang ada didalam widget column, sedangkan Widget Row posisi layout ke kearah samping (horizontal)

Lebih jelasnya untuk perbedaan antara Widget column dan widget Row

Ganti kode dengan kode dibawah pada bagian body

body: Column( // widget column menentukan posisi widget secara vertikal
    children: <Widget>[
        Image.network('https://kodetr.herokuapp.com/banners/post/flutter/flutter.webp'),
        Text("www.kodetr.com", style: TextStyle(fontFamily: "Serif", height: 3, fontSize: 20)),

Setelah itu, anda bisa jalankan maka akan seperti gambar dibawah

kode di atas menerapkan mengenai widget column untuk widget row anda bisa mengganti widget column tersebut menjadi Widget Row, sehingga anda bisa melihat perbidaan dari keduanya.


Menambahkan Widget di berbeda file dengan mengirim berupa data ke halaman lain

Buat file dart dengan nama kategori.dart kemudian masukan kode berikut berserta penjelasan yang dapat anda pahami di setiap kodenya

// Untuk menjaga impor Anda tetap rapi, ikuti pedoman pemesanan di
// https://www.dartlang.org/guides/language/effective-dart/style#ordering
import 'package:flutter/material.dart';
// @required didefinisikan dalam paket meta.dart
import 'package:meta/meta.dart';

final tinggiBaris = 100.0;
final radiusPembatas = BorderRadius.circular(tinggiBaris / 2);

// Kami menggunakan garis bawah untuk menunjukkan bahwa variabel-variabel ini pribadi.
// Lihat https://www.dartlang.org/guides/language/effective-dart/design#libraries

/// Widget [Kategori] khusus.
///
/// Widget ini disusun berdasarkan [Icon] dan [Teks]. Mengetuk acara widget
/// animasi [InkWell] berwarna.
class Kategori extends StatelessWidget {

  final String nama;
  final ColorSwatch warna;
  final IconData lokasiIkon;

/// Membuat [Kategori].
///
/// [Kategori] menyimpan nama Kategori (mis. 'Panjang'), warnanya untuk
/// UI, dan ikon yang mewakilinya (mis. penguasa).
// TODO: Anda akan memerlukan nama, warna, dan ikonLokasi dari main.dart
  const Kategori({
    Key key,
    @required this.nama,
    @required this.warna,
    @required this.lokasiIkon    
  }) : assert(nama != null), 
       assert(warna != null), 
       assert(lokasiIkon != null), 
       super(key: key);

  /// Membuat widget khusus yang menampilkan informasi [Kategori].
   ///
  /// Informasi ini termasuk ikon, nama, dan warna untuk [Kategori].
  @override
  // Parameter `context` ini menjelaskan lokasi widget ini di
  // pohon widget. Ini dapat digunakan untuk mendapatkan data Tema dari yang terdekat
  // Tema leluhur di pohon. Di bawah ini, kami mendapatkan tema teks display1.
  // See https://docs.flutter.io/flutter/material/Theme-class.html
  Widget build(BuildContext context) {
  // TODO: Bangun widget khusus di sini, mengacu pada Spesifikasi.
    return Material(
      color: Colors.transparent,
      child: Container(
        height: tinggiBaris,
        child: InkWell(
          borderRadius: radiusPembatas,
          highlightColor: warna,
          splashColor: warna,
          // Kita bisa menggunakan keduanya () => function() or the () { function(); }
          // syntax.
          onTap: () {
            print('I was tapped!');
          },
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              // Ada dua cara untuk menunjukkan daftar: `[]` dan `Daftar ()`.
              // Lebih suka menggunakan sintaksis literal, mis. `[]`, Daripada `List ()`.
              // Anda bisa menambahkan argumen tipe jika Anda mau, mis. <Widget> [].
              // Lihat https://www.dartlang.org/guides/language/effective-dart/usage#do-use-collection-literals-when-possible
              children: [
                Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Icon(
                    lokasiIkon,
                    size: 60.0,
                  ),
                ),
                Center(
                  child: Text(
                    nama,
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.headline,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Kemudian dibagain file main.dart masukan kode dibawah beserta penjelasannya disetiap kode.

// Anda dapat membaca tentang paket di sini: https://flutter.io/using-packages/
import 'package:flutter/material.dart';

// Anda dapat menggunakan impor relatif, mis. `Import 'category.dart';` atau
// paket impor, seperti yang ditunjukkan di bawah ini.
// Lebih detail di http://dart-lang.github.io/linter/lints/avoid_relative_lib_imports.html
import 'package:flutter_app/kategori.dart';

// mengirim informasi ini ke widget [Kategori] khusus Anda
const kategoriNama = 'Speaker';
const kategoriIkon = Icons.speaker;
const kategoriWarna = Colors.grey;

/// Fungsi yang dipanggil saat main.dart dijalankan.
void main() => runApp(MyAppKodeTR());

/// Widget ini adalah root dari aplikasi anda.
/// Saat ini, anda hanya menampilkan satu widget di aplikasi kami.
class MyAppKodeTR extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // widget yang membungkus beberapa widget yang menggunakan tema material design 
    return MaterialApp(
      // fungsi untuk menampilkan dan menghilangkan banner build sebelah kanan atas
      // debugShowCheckedModeBanner: false, 
      home: Scaffold( // widget untuk struktur dasar material design
       // attribut untuk memberikan keseluruhan warna latar
        backgroundColor: Colors.amber[100],
         // widget untuk membuat AppBar
        appBar: AppBar(
          // attribut title untuk menampilkan judul pada appbar dengan widget Text untuk membuat teks
          title: Text("Aplikasi Widget KodeTR"), 
          // attribut untuk membuat warna latar secara keseluruhan
          backgroundColor: Colors.cyan,
        ),

        body: Column( // widget column menentukan posisi widget secara vertikal
          children: <Widget>[
            Image.network('https://kodetr.herokuapp.com/banners/post/flutter/flutter.webp'),
            Text("www.kodetr.com", style: TextStyle(fontFamily: "Serif", height: 2, fontSize: 20)),
            Kategori(
              nama: kategoriNama,
              warna: kategoriWarna,
              lokasiIkon : kategoriIkon
            ),
          ],
        ),
        ),
    );
  }
}

Setelah itu, anda bisa jalankan maka akan seperti gambar dibawah


Demikian yang dapat saya sampaikan dari artikel ini semoga bermanfaat, jika ada yang ditanyakan silahkan di kolom komentar dibawah, selamat mencoba.

Share Comments
comments powered by Disqus