Widget Catalog

Daftar ini diambil dari Flutter - Widget Catalog. Hanya menampilkan widget yang akan dipakai umum dipakai (dalam perkuliahan).

---

AppBar

Referensi

• AppBar - Flutter Docs

---

Center

Center adalah blok pengaturan (alignment block) yang digunakan untuk mengatur child-nya pada posisi tengah.

Center(
  child: Text('Hello World'),
),

---

Column

Column(
  children: [
    Text('Baris 1'),
    Text('Baris 2'),
  ],
) 

Referensi”

• Column - Flutter Docs
• 📚 Catatan Column

---

Container

Container digunakan untuk “membungkus” child, mengatur ukuran blok area dan memberikan dekorasi seperti warna, padding, border radius. Jika parameter aligment diisi, maka Container menyesuaikan ukuran ke parent.s

Container(
  padding: EdgeInsets.all(8.0),  // jarak dari border ke child
  color: Colors.blue[600], // warna background
  alignment: Alignment.center, // posisi child
  child: Text("Hello"),
)

Referensi”

• Container - Flutter Docs
• 📚 Catatan Container

---

ElevatedButton

ElevatedButton(
  style: ElevatedButton.styleFrom(shape: StadiumBorder()),
  onPressed: () {},
  child: Text('Button 1'),
),

Referensi:

• ElevatedButton - Flutter Docs

• 📚 Catatan ElevatedButton

Expanded

Wadah yang secara otomatis mengatur ukurannya sehingga memenuhi area. Biasa digunakan sebagai children Row dan Column.

Expanded(
  flex: 1,
  child: Text("Hallo")
)

---

GridView

Membuat tampilan berbentuk grid.

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: [
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.teal[100],
      child: const Text("He'd have you all unravel at the"),
    ),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.teal[200],
      child: const Text('Heed not the rabble'),
    ),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.teal[300],
      child: const Text('Sound of screams but the'),
    ),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.teal[400],
      child: const Text('Who scream'),
    ),    
  ],
)

Referensi:

• GridView - Flutter Docs

---

Icon

Icon(
  Icons.favorite,
  color: Colors.pink,
  size: 24.0,
  semanticLabel: 'Text to announce in accessibility modes',
),

Daftar icon yang bisa digunakan check di Google Fonts - Material Icons Referensi:

• Icon - Flutter Docs

---

Image

// membaca gambar dari URL
Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

// Cara 1: membaca data dari asset
Image(
  image: AssetImage('assets/bg.jpg'),
)

Untuk bisa menggunakan assets, pastikan Anda mendaftarkan folder/file assets pada file pubspec.yaml, section flutter, dibawah uses-material-design: true

flutter:
  uses-material-design: true
  assets:
  - assets/

Perhatikan indentasi pada penulisan assets: dan - assets/. Indentasi ini diperlukan. - assets/ bisa dirubah sesuai dengan nama folder yang Anda gunakan untuk menyimpan gambar. Jadi, jika Anda menyimpan gambar di folder img, maka ditulis - img/.

Referensi:

• Image - Flutter Docs
• 📚 Catatan Image

• How to add image in flutter - stackoverflow

Row

Referensi:

• 📚 Catatan Row
• Row - Flutter Docs

---

Scaffold

Scaffold adalah sebuah widget dalam flutter yang menyediakan banyak widget seperti Drawer, ` , BottomNavigationBar, FloatingActionButton, AppBar, dan lain-lain. Scaffold akan memperluas atau menempati seluruh layar perangkat. Widget ini akan menempati ruang yang tersedia. Scaffold` akan memberikan kerangka untuk menerapkan layout dasar material design dari aplikasi.

Scaffold(
  appBar: AppBar(
    title: Text('Nextgen Tutorial'),
  ),
  body: Center(
    child: Text("Selamat Datang di Nextgen Tutorial!!"),
  ),
)

Referensi:

• Scaffold - Flutter Docs

---

Stack

Stack adalah sebuah wadah yang menyusun komponen children secara bertumpuk.

Stack(
  alignment: Alignment.bottomRight,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 90,
      height: 90,
      color: Colors.green,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
)

---

Text

Widget untuk menampilkan text.

Text(
  "Hello World",
  textAlign: TextAlign.center,
  style: const TextStyle(
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    fontSize: 20,
    color: Colors.black
  ),
)

---

TextField

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  )
),

Referensi:

• 📚 Catatan TextField