1. Home
  2. Docs
  3. Kurikulum Flutter Mobile Apps
  4. Materi week 3
  5. Hari-12-component flutter

Hari-12-component flutter

Bagi sobat sanber yang belum mengerti apa itu widget, sederhananya pada Flutter seluruh tampilan seperti tombol, gambar, teks, list, ikon, bahkan satu layar pada handphone tersebut merupakan sekumpulan dari banyak widget.

Struktur flutter apps

berikut ini merupakan struktur dari flutter apps/ per page halaman yang akan kita layout, umumnya akan ada scaffold, appbar, body dan didalam body ada widget-widget

pada warna biru adalah core widget/component yang terdapat pada flutter, semacam tag html, head, body, footer dst.

Properti pada Widget

Setiap widget memiliki property, misalnya kita membuat sebuah tombol, lalu kita ingin agar warna backgroundnya itu hijau, dan warna tulisannya putih, lalu teksnya kita tebalkan.

Untuk melakukan itu semua, maka tombol kita atur melalui propertinya.

Dari gambar tersebut kita bisa pelajari bahwa ciri dari widget dia diawali dengan huruf kapital dia berupa class, digambar itu juga kita memiliki widget Scaffold, AppBar, dan Teks.

Lalu widget Scaffold dia memiliki property appBar, sedangkan pada widget AppBar dia memiliki property title, dan backgroundColor.

Widget di dalam widget

Dalam membuat aplikasi nantinya tentu kita akan menggunakan banyak widget, pada Flutter setiap Widget umumnya memiliki properti child atau anak, dari properti inilah kita bisa menggunakan widget didalamnya.

Selain child, kita juga mengenal property children yang artinya anak-anak, sesuai dengan namanya, berarti widget tersebut bisa memiliki banyak widget-widget, sebagai contoh kita ingin menampilkan daftar menu makanan, maka tentu akan banyak widget yang berfungsi untuk menampilkan keterangan nama makanan didalamnya.

General Widget

Ada banyak sekali widget-widget yang telah disediakan pada flutter, pada kali ini kita akan membahas widget apa saja yang paling penting untuk kita pahami saat pertama kali membuat aplikasi menggunakan Flutter ini.

Scaffold

Scaffold adalah widget utama untuk membuat sebuah halaman pada flutter, scaffold ini memiliki beberapa parameter yang biasa kita gunakan seperti appBar untuk membuat AppBar, body untuk bagian tubuhnya, atau kita juga bisa menambahkan floating action bar, maupun mengganti warna background bodynya.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Sample Code'),
    ),
    body: Center(
      child: Text('You have pressed the button $_count times.')
    ),
    backgroundColor: Colors.blueGrey.shade200,
    floatingActionButton: FloatingActionButton(
      onPressed: () => setState(() => _count++),
      tooltip: 'Increment Counter',
      child: const Icon(Icons.add),
    ),
  );
}

Text

Text berfungsi untuk menampilkan sebuah teks biasa, atau bisa kita berikan style dengan menambahkan property style.

...
body: Text('Ini Text', style: TextStyle(
                                  color: Colors.blue,
                                  backgroundColor: Colors.pink,
                                  fontSize: 20.0,
                                  fontStyle: FontStyle.italic,
                                  fontWeight: FontWeight.bold
                                  ),)
...

Icon

Widget ini untuk menggunakan icon yang telah disediakan, berikut adalah contohnya.

...
body: Container(
          padding: EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Icon(Icons.access_alarm),
                  Text('Alarm')
                ],
              ),
              Column(
                children: <Widget>[
                  Icon(Icons.phone),
                  Text('Phone')
                ],
              ),
              Column(
                children: <Widget>[
                  Icon(Icons.book),
                  Text('Book')
                ],
              ),
            ],
          ),
        )
...

Container

Container merupakan widget yang fungsinya untuk membungkus widget lain sehingga dapat diberikan nilai seperti margin, padding, warna background, atau dekorasi.

...
body: Container(
          padding: EdgeInsets.all(32.0),
          margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20.0), 
            color: Colors.purple),
          // color: Colors.purple,
          child: Text('Haiii', style: TextStyle(color: Colors.white, fontSize: 20.0),)
        )
...

Button

Terdapat 3 widget Button yang umumnya dipakai yaitu RaisedButton, MaterialButton, dan FlatButton

Pada raised button dan Material tombol akan sedikit menonjol.

Pada flat button tombolnya akan datar tanpa adanya efek-efek seperti bayangan dan lain-lain.

...
body: Column(
          children: <Widget>[
            RaisedButton(
              color: Colors.amber,
              child: Text("Raised Button"),
              onPressed: () {},
            ),
            MaterialButton(
              color: Colors.lime,
              child: Text("Material Button"),
              onPressed: () {},
            ),
            FlatButton(
              color: Colors.lightGreenAccent,
              child: Text("FlatButton Button"),
              onPressed: () {},
            ),
          ],
        )
...

TextFormField

TextFormField merupakan widget yang berguna untuk membuat form untuk diisi user.

...
body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            child: Column(
              children: <Widget>[
                TextFormField(
                  decoration: InputDecoration(hintText: "Username"),
                ),
                TextFormField(
                  obscureText: true,
                  decoration: InputDecoration(hintText: "Password"),
                ),
                RaisedButton(
                  child: Text("Login"),
                  onPressed: () {},
                )
              ],
            ),
          ),
        )
...

Image

Image merupakan widget yang dapat digunakan untuk menampilkan gambar, bisa menggunakan internet atau dengan local foler

Internet

Image.network('https://cdn.pixabay.com/photo/2019/11/10/17/36/indonesia-4616370_1280.jpg');

Assets lokal

Gambar dari asset lokal yaitu file gambar yang ditambahkan kedalam folder aplikasi yang nantinya digunakan untuk menampilkan gambar tanpa koneksi internet. Tahapan menampilkan gambar lokal yaitu :

  1. buat folder baru assets/images
    posisi folder sejajar dengan pubspec.yaml. Untuk penamaan folder bisa apa aja namun sebaiknya gunakan nama yang umum pada istilah pemrograman. Hal tersebut berguna untuk membantu orang lain apabila bekerja sebagai tim.
  2. Masukan gambar ke dalam folder tersebut
  3. Registrasikan image / gambar yang tadi kita masukan dengan cara edit file pubspec.yaml
flutter:   
  assets:     
    - assets/images/paddy-field.jpg

Jika memiliki beberapa gambar yang ingin di import maka kita dapat menggunakan cara yang lebih sederhana yaitu hanya menggunakan nama direktori saja.

flutter:   
  assets:     
    - assets/images/
menampilkan gambar di flutter
Harap perhatikan tab dan spasi karena apabila posisi value asset sejajar atau menjorok terlalu dalam akan error

Tampilkan asset image dengan Image.asset Widget

Image.asset('assets/images/paddy-field.jpg');

Contoh lengkapnya seperti kode dibawah ini

import 'package:flutter/material.dart';

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

class BelajarImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("belajarFlutter.com"),
        ),
        body: Image.asset('assets/images/paddy-field.jpg'),
      )
    );
  }
}
contoh menampilkan gambar di flutter app

Format gambar yang support yaitu : JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP. Penggunaan local image biasanya untuk gambar yang bersifat statis seperti logo aplikasi, background asset. Semakin banyak gambar yang di import maka semakin besar pula ukuran aplikasinya nanti

sumber:

Cara Menampilkan Gambar di Flutter

https://medium.com/flutter-developer-indonesia/belajar-widget-widget-pada-flutter-flutter-starter-pack-part-1-7f386a02fbb6

https://flutter.dev/docs/development/ui/widgets/material