Program Pertama Menggunakan Widget Pada Flutter (Container Dan Image)

flutter

Pendahuluan

Di dalam flutter, konsep widget sangatlah penting seperti yang telah diuraikan dalam artikel pengenalan singkat flutter. Semua yang di flutter adalah widget. Mungkin kita memiliki pertanyaan tentang widget, seperti "Apa sajakah dasar dasar jenis widget ?", "Bagaimana Cara membuat widget ?", "Apa sajakah contoh widget yang bagus yang bisa diimplementasikan ke dalam project flutter kita ?" .

Dalam artikel kali ini kita akan menjawab bersama - sama pertanyaan yang telah diuraikan, pertama - tama kita akan memahami widget katalog dan memahami dasar - dasar widget yang akan membantu kita membangun aplikasi dengan flutter.

Katalog Widget

Pada web official flutter telah disiapkan dokumentasi tentang widget, yang terdapat pada Widget Catalog . Dimana kita bisa menjelajahi semua komponen widget telah tersedia di flutter, yang dibagi berdasarkan kategorinya. Namun ada beberapa widget dasar yang akan membantu kita, untuk terbiasa menggunakan atau menerapkan sebuah widget pada aplikasi yang sedang kita bangun. Berikut ini adalah daftar widget yang dimaksud :

  • Container
  • Image
  • Text
  • Icon
  • RaisedButton
  • Scaffold
  • AppBar
  • PlaceHolder
  • Row
  • Column
  • ListView

Mari kita coba satu persatu widget tersebut secara detail.

Untuk mengikuti materi ini kita buat project baru flutter pada android studio atau visual code studio newflutter

Struktur Project Flutter

project

Option Description
.idea projek folder IntellJ
android Seperti nama foldernya, folder ini berisi tentang yang berkaitan dengan android dan pengaturan aplikasi android. Flutter menggunakan gradle sebagai dependensinya
build folder ini dibuat dan digunakan oleh gradle pada saat kita membangun sebuah project pada flutter
ios sama seperti folder android, folder ini berisi file dan kode untuk aplikasi IOS disinilah pengaturan untuk IOS. Saat membuat aplikasi ios, flutter menggunakan Cocoapods sebagai dependency managernya
lib Disinilah kode aplikasi kita berada, kita akan mendapati file main.dart entri titik utama aplikasi flutter. Di dalam folder ini kita juga dapat menambahkan file baru untuk kebutuhan project flutter kita dengan menggunakan extension .dart
test Folder ini berfungsi sebagai kode pengujian unit berada. Kita juga dapat menambahkan lebih banyak file dan subfolder pada folder ini.

Container

Container bisa diartikan Bahasa Indonesia sebagai wadah yang dimana dapat menyimpan berbagai macam attribute dan menampung berbagai macam fungsi objek yang membuat kotak container bisa menampilkan berbagai macam efek dan hasil didalamnya.

Container widget pada flutter merupakan “Single Child Widget” yang berarti hanya dapat memiliki satu buah child widget saja. Akan tetapi dalam sebuah container kita dapat menempatkan row, column, text atau bahkan container lain. Container widget juga dapat dijadikan sebagai dasar dan serangkaian awal dari suatu layout aplikasi.

Contoh Penerapan Container

contoh kodenya :

new Center(
        child: new Container(
          decoration: BoxDecoration(
            border: Border.all(),
          ),
          height: 200.0,
          width: 200.0,
          child: new Text(
            'Hello Flutter',
            style: new TextStyle(
              fontSize: 20.0,
              color: Colors.red,
            ),
          ),
        ),
      ),

Output

outputcontainer

Source lengkapnya : ContainerApp

Image

Menampilkan gambar pada aplikasi mobile adalah salah satu fitur yang harus dimiliki oleh setiap aplikasi mobile. Hampir tidak ada aplikasi mobile saat ini tidak menggunakan fitur menampilkan sebuah gambar, berikut adalah koda dan cara menampilkan gambar pada aplikasi mobile dengan menggunakan flutter :

  • Buatlah folder baru dengan nama images pada project
  • lalu set pada file pubspec.yaml, aktifkan komen :
# To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg

Menjadi :

# To add assets to your application, add an assets section, like this:
assets:
      - images/
  • lalu get package dan save file (ctrl + s)

get package pada visual code studio

  • langkah berikutnya adalah ubah file main.dart
child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'images/flutterlogo.png',
              width: 200,
              height: 200,
            ),
            Text(
              'Logo Flutter',
              style: new TextStyle(
                fontSize: 15.0,
              ),
            ),
          ],
        ),
      ),

Outputnya

image

untuk source lengkapnya : imagesApps

Artikel Berikutnya :

Widget Text Dan Icon