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.