Seperti yang kita pelajari di artikel sebelumnya, widget adalah segalanya dalam kerangka Flutter. Kami telah mempelajari cara membuat widget baru di artikel sebelumnya.

Di artikel ini, mari kita pahami konsep sebenarnya di balik pembuatan widget dan berbagai jenis widget yang tersedia di kerangka Flutter .

Mari kita periksa widget MyHomePage aplikasi Hello World . Kode untuk tujuan ini adalah seperti yang diberikan di bawah ini -

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar(title: Text(this.title), ), 
         body: Center(child: Text( 'Hello World',)),
      );
   }
}

Di sini, kami telah membuat widget baru dengan memperluas StatelessWidget .

Perhatikan bahwa StatelessWidget hanya memerlukan satu build metode untuk diimplementasikan di kelas turunannya. The membangun metode mendapatkan lingkungan konteks yang diperlukan untuk membangun widget melalui BuildContext parameter dan mengembalikan widget itu membangun.

Dalam kode tersebut, kita telah menggunakan judul sebagai salah satu argumen konstruktor dan juga menggunakan Key sebagai argumen lain. Judul digunakan untuk menampilkan judul dan Key digunakan untuk mengidentifikasi widget di lingkungan membangun.

Di sini, membangun metode memanggil membangun metode scaffold , yang pada gilirannya memanggil membangun metode AppBar dan Pusat untuk membangun user interface-nya.

Terakhir, metode build Center memanggil metode Text build.

Untuk pemahaman yang lebih baik, representasi visual yang sama diberikan di bawah ini -

Visualisasi Bangun Widget

Di Flutter , widget dapat dikelompokkan ke dalam beberapa kategori berdasarkan fiturnya, seperti yang tercantum di bawah -

• Widget khusus platform
• Widget tata letak
• Widget pemeliharaan status
• Widget independen / dasar platform

Mari kita bahas masing-masing secara rinci sekarang.

Widget khusus platform

Flutter memiliki widget khusus untuk platform tertentu - Android atau iOS.

Widget khusus Android dirancang sesuai dengan pedoman desain Material oleh OS Android. Widget khusus Android disebut sebagai widget Material .

Widget khusus iOS dirancang sesuai dengan Panduan Antarmuka Manusia oleh Apple dan disebut sebagai widget Cupertino .

Beberapa widget material yang paling banyak digunakan adalah sebagai berikut -

• Perancah
• AppBar
• BottomNavigationBar
• TabBar
• TabBarView
• ListTile
• RaisedButton
• FloatingActionButton
• FlatButton
• IconButton
• DropdownButton
• PopupMenuButton
• ButtonBar
• BidangTeks
• Kotak centang
• Radio
• Beralih
• Slider
• Pemilih Tanggal & Waktu
• SimpleDialog
• AlertDialog

Beberapa widget Cupertino yang paling sering digunakan adalah sebagai berikut -

• CupertinoButton
• CupertinoPicker
• CupertinoDatePicker
• CupertinoTimerPicker
• CupertinoNavigationBar
• CupertinoTabBar
• CupertinoTabScaffold
• CupertinoTabView
• CupertinoTextField
• CupertinoDialog
• CupertinoDialogAction
• CupertinoFullscreenDialogTransition
• CupertinoPageScaffold
• CupertinoPageTransition
• CupertinoActionSheet
• CupertinoActivityIndicator
• CupertinoAlertDialog
• CupertinoPopupSurface
• Penggeser Cupertino
• Widget tata letak

Di Flutter, widget dapat dibuat dengan membuat satu atau beberapa widget. Untuk membuat banyak widget menjadi satu widget, Flutter menyediakan widget dalam jumlah besar dengan fitur tata letak. Misalnya, widget anak bisa dipusatkan menggunakan widget Center .

Beberapa widget tata letak yang populer adalah sebagai berikut -

• Container - Kotak persegi panjang yang didekorasi menggunakan widget BoxDecoration dengan latar belakang, batas, dan bayangan.
• Center - Menengahkan widget anaknya.
• Row - Susun anak-anaknya dalam arah horizontal.
• Kolom - Susun anak-anaknya dalam arah vertikal.
• Stack - Atur satu di atas yang lain.

Kami akan memeriksa widget tata letak secara detail di bab Pengantar widget tata letak yang akan datang .

Widget pemeliharaan status

Di Flutter, semua widget berasal dari StatelessWidget atau StatefulWidget .

Widget yang diturunkan dari StatelessWidget tidak memiliki informasi status apa pun tetapi mungkin berisi widget yang diturunkan dari StatefulWidget . Sifat dinamis dari aplikasi adalah melalui perilaku interaktif widget dan status berubah selama interaksi. Misalnya, mengetuk tombol penghitung akan menambah / mengurangi status internal penghitung satu kali dan sifat reaktif widget Flutter akan merender ulang widget secara otomatis menggunakan informasi status baru.

Kita akan mempelajari konsep widget StatefulWidget secara rinci di bab manajemen State yang akan datang .

Widget independen / dasar platform

Flutter menyediakan banyak widget dasar untuk membuat antarmuka pengguna yang sederhana dan kompleks dengan cara yang tidak bergantung platform. Mari kita lihat beberapa widget dasar di bab ini.

Teks

Widget teks digunakan untuk menampilkan sepotong string. Gaya string dapat diatur dengan menggunakan properti style dan kelas TextStyle . Kode contoh untuk tujuan ini adalah sebagai berikut -

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

Widget teks memiliki konstruktor khusus, Text.rich , yang menerima turunan dari tipe TextSpan untuk menentukan string dengan gaya berbeda. Widget TextSpan bersifat rekursif dan menerima TextSpan sebagai turunannya. Kode contoh untuk tujuan ini adalah sebagai berikut -

Text.rich( 
   TextSpan( 
      children: <TextSpan>[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

Properti terpenting dari widget Teks adalah sebagai berikut -

• maxLines, int - Jumlah baris maksimum untuk ditampilkan

• overflow, TextOverFlow - Tentukan bagaimana visual overflow ditangani menggunakan kelas TextOverFlow

• style, TextStyle - Tentukan gaya string menggunakan kelas TextStyle

• textAlign, TextAlign - Perataan teks seperti kanan, kiri, rata, dll., menggunakan kelas TextAlign

• textDirection, TextDirection - Arah teks ke aliran, baik dari kiri ke kanan atau kanan ke kiri

Gambar

Widget gambar digunakan untuk menampilkan gambar dalam aplikasi. Widget gambar menyediakan konstruktor yang berbeda untuk memuat gambar dari berbagai sumber dan itu adalah sebagai berikut -

• Gambar - Pemuat gambar umum menggunakan ImageProvider

• Image.asset - Muat gambar dari aset proyek flutter

• Image.file - Muat gambar dari folder sistem

• Image.memory - Muat gambar dari memori

• Image.Network - Muat gambar dari jaringan

Opsi termudah untuk memuat dan menampilkan gambar di Flutter adalah dengan menyertakan gambar sebagai aset aplikasi dan memuatnya ke widget sesuai permintaan.

• Buat folder, aset di folder proyek dan tempatkan gambar yang diperlukan.

• Tentukan aset di pubspec.yaml seperti yang ditunjukkan di bawah ini -

flutter: 
   assets: 
      - assets/smiley.png

• Sekarang, muat dan tampilkan gambar di aplikasi.

Image.asset('assets/smiley.png')

• Source code lengkap widget MyHomePage aplikasi hello world dan hasilnya seperti gambar dibawah ini -.

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar( title: Text(this.title), ), 
         body: Center( child: Image.asset("assets/smiley.png")),
      ); 
   }
}

Gambar yang dimuat seperti yang ditunjukkan di bawah ini -

Properti terpenting dari widget Gambar adalah sebagai berikut -

• image, ImageProvider - Gambar aktual untuk dimuat

• width, double - Lebar gambar

• tinggi, ganda - Tinggi gambar

• alignment, AlignmentGeometry - Cara menyelaraskan gambar dalam batas-batasnya

Ikon

Widget ikon digunakan untuk menampilkan mesin terbang dari font yang dijelaskan di kelas IconData . Kode untuk memuat ikon email sederhana adalah sebagai berikut -

Icon(Icons.email)

Source Code lengkap untuk menerapkannya dalam aplikasi hello world adalah sebagai berikut -

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center( child: Icon(Icons.email)),
      );
   }
}

Ikon yang dimuat seperti yang ditunjukkan di bawah ini -