Scaffold adalah sebuah widget dalam flutter yang menyediakan banyak widget seperti Drawer, SnackBar, 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.
Berikut hirarki dari class scaffold :
Object
↳ Diagnosticable
↳ Diagnosticable Tree
↳ Widget
↳ StateFul Widget
↳ ScaffoldConstructor dari Class Scaffold
Constructor merupakan sebuah method atau fungsi khusus yang digunakan untuk membuat instance atau object dari class. Dalam konteks class Scaffold di Flutter, constructor digunakan untuk menginisialisasi dan mengatur berbagai properti dan widget yang terdapat pada tampilan aplikasi.
Sintaks constructor class Scaffold di Flutter dapat dituliskan dengan format sebagai berikut:
const Scaffold({
Key key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding,
this.resizeToAvoidBottomInset,
this.primary = true,
this.drawerDragStartBehavior
= DragStartBehavior.start,
this.extendBody = false,
this.drawerScrimColor,
});Properti dari Class Scaffold
Class Scaffold dalam Flutter adalah widget yang menyediakan kerangka kerja dasar untuk membangun aplikasi Flutter yang lengkap dengan mengintegrasikan widget-widget umum seperti AppBar, Drawer, BottomNavigationBar, dan lain-lain.
Salah satu properti penting dari class Scaffold adalah “appBar” yang bertipe AppBar. Properti ini digunakan untuk menentukan AppBar yang akan ditampilkan di bagian atas aplikasi.
Selain itu, class Scaffold juga memiliki properti “body” yang bertipe Widget. Properti ini digunakan untuk menentukan isi utama dari aplikasi. Isi utama ini bisa berupa widget seperti ListView, GridView, Column, Row, atau widget lainnya.
Class Scaffold juga memiliki beberapa properti lainnya seperti “floatingActionButton”, “bottomNavigationBar”, “drawer”, “endDrawer”, “persistentFooterButtons”, dan lain-lain yang bisa digunakan untuk menambahkan fungsi dan interaksi tambahan pada aplikasi.
Secara keseluruhan, class Scaffold sangat penting dalam membangun aplikasi Flutter karena menyediakan kerangka kerja dasar yang mudah digunakan dan dapat disesuaikan dengan kebutuhan pengembang.
1. appBar
Properti ini menampilkan sebuah bilah horizontal yang biasanya ditempatkan di bagian atas Scaffold. Properti appBar menggunakan widget AppBar yang memiliki properti sendiri seperti elevation, title, brightness, dan sebagainya.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Nextgen Tutorial'),
),
),
);
}
}Output:
2. body
Properti ini akan menampilkan konten utama atau primer pada Scaffold. Konten ini akan berada di bawah appBar dan di bawah floatingActionButton. Secara default, widget yang berada di dalam body akan ditampilkan pada sudut kiri.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Nextgen Tutorial'),
),
body: const Center(
child: Text(
"Selamat Datang di Nextgen Tutorial!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
),
);
}
}Output:
3. floatingActionButton
FloatingActionButton adalah sebuah tombol yang biasanya diletakkan di sudut kanan bawah. Tombol ini berupa sebuah ikon yang mengambang di atas konten layar dan tetap berada di posisi yang sama bahkan jika kita menggulir halaman.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Nextgen Tutorial'),
),
body: const Center(
child: Text(
"Selamat Datang di Nextgen Tutorial!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
floatingActionButton: FloatingActionButton(
elevation: 10.0,
child: const Icon(Icons.add),
onPressed: () {
// action on button press
},
),
),
);
}
}Output:
Di sini properti elevation digunakan untuk memberikan efek bayangan pada tombol. Icon digunakan untuk menempatkan ikon tombol dengan menggunakan beberapa ikon yang sudah terpasang di SDK flutter. Fungsi onPressed() adalah fungsi yang akan dipanggil saat tombol ditekan dan baris kode di dalam fungsi akan dieksekusi.
4. drawer
Drawer adalah panel menu yang muncul di samping layar aplikasi. Untuk membuka menu tersebut, pengguna harus menggeser layar ke kiri atau ke kanan, sesuai dengan tindakan yang telah ditentukan. Ikon untuk membuka drawer juga secara otomatis disediakan pada AppBar pada posisi tertentu. Tindakan membuka drawer juga sudah diatur secara otomatis oleh komponen Scaffold.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Nextgen Tutorial'),
),
body: const Center(
child: Text(
"Selamat Datang di Nextgen Tutorial!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
floatingActionButton: FloatingActionButton(
elevation: 10.0,
child: const Icon(Icons.add),
onPressed: () {
},
),
drawer: Drawer(
child: ListView(
children: const [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Nextgen Tutorial',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
],
),
),
),
);
}
} Sebagai parent widget, dalam contoh di atas digunakan ListView dan membagi panel menjadi dua bagian, yaitu Header dan Menu. Dalam contoh di atas juga digunakan DrawerHeader untuk memodifikasi bagian Header panel. Di bagian Header, dapat ditampilkan ikon atau detail pengguna sesuai dengan aplikasi. ListTile juga digunakan untuk menambahkan item pada bagian Menu.
Output:
Kita juga dapat menambahkan ikon sebelum item menggunakan properti leading dari ListTile, di mana teknik ini akan menggunakan widget Icon.
Contoh:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Nextgen Tutorial'),
),
body: const Center(
child: Text(
"Selamat Datang di Nextgen Tutorial!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
floatingActionButton: FloatingActionButton(
elevation: 10.0,
child: const Icon(Icons.add),
onPressed: () {
},
),
drawer: Drawer(
child: ListView(
children: const [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Nextgen Tutorial',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('Item 1'),
leading: Icon(Icons.people),
),
ListTile(
title: Text('Item 2'),
leading: Icon(Icons.mail),
),
],
),
),
),
);
}
} Output:
5. bottomNavigationBar
Properti bottomNavigationBar adalah seperti menu yang berada di bagian bawah Scaffold. Kita sering melihat navigation bar ini pada kebanyakan aplikasi. Kita bisa menambahkan beberapa ikon, teks, atau keduanya dalam bar sebagai item.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Nextgen Tutorial'),
),
body: const Center(
child: Text(
"Selamat Datang di Nextgen Tutorial!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
floatingActionButton: FloatingActionButton(
elevation: 10.0,
child: const Icon(Icons.add),
onPressed: () {
// action on button press
},
),
drawer: Drawer(
child: ListView(
children: const [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Nextgen Tutorial',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('Item 1'),
leading: Icon(Icons.people),
),
ListTile(
title: Text('Item 2'),
leading: Icon(Icons.mail),
),
],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
fixedColor: Colors.blue,
items: const [
BottomNavigationBarItem(
label: "Home",
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: "Search",
icon: Icon(Icons.search),
),
BottomNavigationBarItem(
label: "Profile",
icon: Icon(Icons.account_circle),
),
],
onTap: (int indexOfItem) {}),
),
);
}
} Dalam contoh di atas digunakan widget BottomNavigationBar untuk menampilkan bilah navigasi. Untuk mengatur warna ikon aktif, digunakan properti fixedColor. Untuk menambahkan item pada bilah navigasi, digunakan widget BottomNavigationBarItems yang memungkinkan untuk memberikan teks dan ikon. Untuk menangani tindakan yang dilakukan ketika pengguna mengetuk item pada bilah navigasi, digunakan fungsi onTap(int indexOfItem) yang akan dieksekusi sesuai dengan indeks posisi item yang ditekan.
Output:
6. backgroundColor
Properti ini digunakan untuk menentukan warna dari widget Scaffold secara keseluruhan.
7. floatingActionButtonAnimator
Properti ini digunakan untuk memberikan animasi pada tombol floatingActionButton.
8. primary
Properti ini untuk menentukan apakah Scaffold akan ditampilkan atau tidak.
9. drawerScrimColor
Properti ini digunakan untuk menentukan warna konten utama saat drawer dibuka.
10. bottomSheet
Properti ini menerima sebuah widget (final) sebagai object untuk menampilkannya di bagian bawah layar.
11. drawerDragStartBehaviour
Properti ini memuat object DragStartBehavior enum untuk menentukan perilaku drag pada drawer.
12. drawerEdgeDragWidth
Properti ini menentukan area di mana swipe atau drag akan mengakibatkan pembukaan drawer. Dan properti ini menerima double sebagai object.
13. drawerEnableOpenGesture
Properti ini memuat nilai boolean sebagai object untuk menentukan apakah gesture drag akan membuka drawer atau tidak, secara default properti ini diatur ke true.
14. endDrawer
Properti endDrawer menerima widget sebagai parameter. Ini mirip dengan Drawer, kecuali bahwa ia membuka di arah yang berlawanan.
15. endDrawerEnableOpenGesture
Properti ini juga menerima nilai boolean sebagai object untuk menentukan apakah gesture drag akan membuka endDrawer atau tidak.
16. extendBody
Properti extendBody menerima nilai boolean sebagai object. Secara default, properti ini selalu false tetapi tidak boleh null. Jika diatur ke true di hadapan bottomNavigationBar atau persistentFooterButtons, maka tinggi mereka ditambahkan ke body dan dipindahkan di bawah body.
17. extendBodyBehindAppBar
Properti ini dapat menerima nilai boolean sebagai object. Secara bawaan, properti ini selalu diatur ke false dan tidak boleh bernilai null. Jika properti diatur ke true, app-Bar yang berada di atas body akan diperluas sehingga tingginya akan ditambahkan ke body. Properti ini berguna ketika warna app-Bar tidak sepenuhnya opaque.
18. floatingActionButtonLocation
Properti ini bertanggung jawab untuk menentukan lokasi floatingActionButton.
19. persistentFooterButton
Properti ini menerima daftar widget, biasanya berupa tombol yang ditampilkan di bawah scaffold.
20. resizeToAvoidBottomInsets
Properti ini menerima nilai Boolean sebagai object. Jika diatur ke true, widget floating pada scaffold akan menyesuaikan ukuran mereka untuk menghindari mengganggu keyboard di layar.
Tutorial sebelumnya : Flutter Container
Tutorial setelahnya : Flutter MaterialApp
Semua Tutorial Flutter : Tutorial Flutter