Tutorial Dart 24 : Memahami Flutter Scaffold dalam Pemorgraman Dart

Last Updated on September 14, 2021 by

Flutter Scaffold adalah widget yang berfungsi untuk menyediakan framework yang mengimplementasikan struktur tata letak visual desain material dasar dari aplikasi flutter. Scaffold Flutter menyediakan API untuk menampilkan drawer, snack bar dan lembaran bawah.

Lihatlah konstruktornya dan properti yang dimilikinya pada artikel ini. Codekey akan mengulas parameternya satu per satu. Jika Anda tertarik dengan pembahasan tentang Flutter Scaffold pastikan Anda tidak melewatkan pembahasan artikel kali ini dan menyimaknya sampai akhir hanya di Codekey!

Flutter Scaffold : Definisi

Scaffold adalah kelas dalam flutter yang menyediakan banyak widget atau kita dapat mengatakan API seperti drawer, snackbar, bottomnavigationbar, floatingactionbutton, appbar dll. Scaffold akan memperluas atau menempati seluruh layar perangkat. Itu akan menempati ruang yang tersedia. Scaffold akan memberikan kerangka kerja untuk menerapkan tata letak desain bahan dasar dari aplikasi.

Scaffold hadir dalam pembangunan dan pengembangan aplikasi mobile ketika kita menggunakan flutter dan dart.  Scaffold sangat diperlukan ketika membangun UI Anda menggunakan flutter SDK. Scaffold sejatinya adalah struktur sementara yang digunakan untuk mendukung kru kerja dan bahan untuk membantu konstruksi, pemeliharaan, dan perbaikan bangunan, jembatan, dan semua struktur buatan manusia lainnya.

Dalam pembangunan dan pengembangan aplikasi mobile dengan flutter dan bahasa dart, kelas scaffold digunakan untuk mengimplementasikan desain bahan dasar struktur tata letak visual. Kelas ini menyediakan API untuk menampilkan beberapa properti seperti appBar, body, drawer, dan floatingActionButton.

Dalam istilah yang lebih sederhana, Scaffold seperti struktur yang ditentukan oleh kerangka kerja (flutter) yang berisi elemen-elemen dasar yang diperlukan untuk membangun antarmuka pengguna (UI).

Berikut ini adalah contoh penerapannya.

1.	const Scaffold({  
2.	  Key key,  
3.	  this.appBar,  
4.	  this.body,  
5.	  this.floatingActionButton,  
6.	  this.floatingActionButtonLocation,  
7.	  this.persistentFooterButtons,  
8.	  this.drawer,  
9.	  this.endDrawer,  
10.	  this.bottomNavigationBar,  
11.	  this.bottomSheet,  
12.	  this.floatingActionButtonAnimator,  
13.	  this.backgroundColor,  
14.	  this.resizeToAvoidBottomPadding = true,  
15.	  this.primary = true,  
16.	})   

Selanjutnya, ini adalah penjelasan tentang detail properties di atas.

1. appBar dan Body

Tidak ada aplikasi Scaffold yang lengkap tanpa menggunakan keduanya karena mereka adalah widget minimum yang perlu digunakan untuk membuat desain bahan minimal. Anda pun bisa menciptakan Scaffold tanpa melewati parameter apa pun di konstruktor.

Hal ini pun tidak akan menghasilkan kesalahan apapun karena secara terprogram, tidak mungkin untuk memaksa pengguna untuk menyediakan argumen konstruktor.

Lihat contoh appBar di bawah ini:

1.	Widget build(BuildContext context)   
2.	{  
3.	  return Scaffold(  
4.	    appBar: AppBar(  
5.	      title: Text('First Flutter Application'),  
6.	    ), )  
7.	}  

Pada kode di atas, judul properti menggunakan text widget untuk menampilkan teks pada layar. Anda dapat menggunakan emulator Android atau iOS. Saya hanya menggunakan iOS di sini sebagai referensi karena tidak ada perbedaan antara output Android dan iOS.

Meskipun AppBar menyediakan banyak fungsi menarik yang akan saya daftarkan dalam posting terpisah, namun, di sini kami akan memberikan judul sederhana ke appbar menggunakan judul: parameter konstruktor

Kami dapat menerapkan berbagai permutasi dan kombinasi dengan tampilan appbar seperti mengubah warna latar belakang dan menggunakan ikon alih-alih teks sebagai judul.Sementara itu, widget di dalam properti body akan ditempatkan di bagian kiri atas ruang yang tersedia secara default. Lihat kode di bawah ini:

1.	Widget build(BuildContext context) {   
2.	return Scaffold(   
3.	    appBar: AppBar(   
4.	    title: Text('First Flutter Application'),   
5.	    ),   
6.	    body: Center(   
7.	    child: Text("Selamat Datang di Codekey",   
8.	        style: TextStyle( color: Colors.black, fontSize: 30.0,   
9.	        ),   
10.	         ),   
11.	    ),  
12.	}  

Pada kode di atas, Codekey akan menampilkan teks “Selamat datang di Codekey!!” dalam atribut body. Teks tersebut akan disejajarkan atau diletakkan di tengah bagian halaman dengan menggunakan Center Widget. Pada kode di atas, kami juga telah melakukan penataan teks yang ada pada kode di atas dengan memakai widget TextStyle, seperti warna, ukuran font, dan lain-lain.

2. Flutter Scaffold Drawer

Drawer biasanya digunakan dengan properti Scaffold.drawer. Anak dari drawer biasanya ListView yang anak pertamanya adalah DrawerHeader yang menampilkan informasi status tentang pengguna saat ini. Anak-anak drawer yang tersisa sering dibuat dengan ListTiles, sering diakhiri dengan AboutListTile.

AppBar secara otomatis menampilkan IconButton yang sesuai untuk menampilkan Drawer ketika Drawer tersedia di Scaffold. Scaffold secara otomatis menangani gerakan tepi-swipe untuk menunjukkan drawer. Lihat kode berikut.

1.	drawer: Drawer(   
2.	        child: ListView(   
3.	        children: const <Widget>[   
4.	        DrawerHeader(   
5.	            decoration: BoxDecoration(   
6.	            color: Colors.red,   
7.	            ),   
8.	            child: Text(   
9.	            'Welcome to Javatpoint',   
10.	            style: TextStyle(   
11.	                color: Colors.green,   
12.	                fontSize: 30,   
13.	            ),   
14.	              ),   
15.	        ),   
16.	        ListTile(   
17.	            title: Text('1'),   
18.	        ),   
19.	        ListTile(  
20.	            title: new Text("All Mail Inboxes"),  
21.	            leading: new Icon(Icons.mail),  
22.	        ),  
23.	        Divider(  
24.	            height: 0.2,  
25.	        ),  
26.	        ListTile(  
27.	            title: new Text("Primary"),  
28.	        ),  
29.	        ListTile(  
30.	            title: new Text("Social"),  
31.	        ),  
32.	        ListTile(  
33.	            title: new Text("Promotions"),  
34.	        ),   
35.	        ],   
36.	         ),   
37.	  ),  

Dalam kode di atas, Codekey menggunakan properti drawer dari Scaffold Flutter untuk membuat drawer. Pada kode di atas kami menggunakan beberapa widget lain untuk membuat hasilnya menjadi lebih menarik. Pada widget ListView, Codekey  telah membagi panel menjadi dua bagian yaitu Header dan Menu.

Properti atau atribut DrawerHeader yang ada ini digunakan untuk memodifikasi header panel yang juga berisi ikon atau detail sesuai dengan aplikasi yang akan dibuat. Sekali lagi pada kode di atas, Codekey telah menggunakan ListTile untuk menambahkan item ke dalam daftar di menu.

3. floatingActionButton

floatingActionButton adalah tombol ikon yang melingkar di mana ia ditampilkan setiap saat dan umumnya dimaksudkan untuk mempromosikan tindakan primer atau paling banyak digunakan pada layar.

Fitur ini digunakan untuk aplikasi email populer seperti Gmail, digunakan untuk membuat email baru. floatingAction Button dibuat menggunakan widget floatingactionbutton () dengan minimal dua parameter konstruktor yang disebut ‘child:’ dan ‘onpressed:’

‘child:’ digunakan untuk menambahkan label saat ‘onpressed:’, yang dipanggil setiap kali pengguna menekan tombol, digunakan untuk memicu tindakan yang diinginkan. Untuk tujuan kesederhanaan, kami hanya akan mencetak pesan di jendela konsol ketika pengguna menekan floatingActionButton. Lihat kode di bawah ini:

1.	Widget build(BuildContext context) {   
2.	         return Scaffold(   
3.	    appBar: AppBar(title: Text('First Flutter Application')),   
4.	    body: Center(   
5.	        child: Text("Welcome to Javatpoint!!"),   
6.	    ),   
7.	    floatingActionButton: FloatingActionButton(   
8.	        elevation: 8.0,   
9.	        child: Icon(Icons.add),   
10.	        onPressed: (){   
11.	           print('I am Floating Action Button');  
12.	        }   
13.	    );   
14.	}  

Pada kode di atas kita menggunakan properti elevation yang memberikan efek bayangan ke tombol yang ada. Meskipun kami dapat menampilkan teks di tombol aksi mengambang, ini adalah praktik umum untuk menggunakan ikon / gambar sebagai gantinya, karena dua alasan utama yaitu:

• Ikon atau gambar pada Scaffold ini cenderung berfungsi untuk memicu tindakan pengguna
• Sulit untuk menyesuaikan teks yang panjang dan bermakna di dalam ruang kecil tombol aksi mengambang

4. persistentFooterButton

Seperti namanya, itu menampilkan satu set tombol yang tetap gigih di layar, bahkan jika tubuh scaffold bergulir. Jika digunakan bersama dengan bilah navigasi bawah, itu ditampilkan di atasnya, tetapi di bawah tubuh. Kita juga dapat menggunakan tombol datar di sini, tetapi untuk tujuan kesederhanaan, pada di bawah ini kita hanya akan menggunakan widget ‘iconbutton ()’ tanpa fungsi ‘onpressed:’ seperti yang kita ketahui sekarang bahwa apa artinya dan bagaimana itu bisa digunakan. Lihat contoh di bawah ini:

1.	persistentFooterButtons: <Widget>[  
2.	  RaisedButton(  
3.	    onPressed: () {},  
4.	    color: Colors.blue,  
5.	    child: Icon(  
6.	      Icons.add,  
7.	      color: Colors.white,  
8.	    ),  
9.	  ),  
10.	  RaisedButton(  
11.	    onPressed: () {},  
12.	    color: Colors.green,  
13.	    child: Icon(  
14.	      Icons.clear,  
15.	      color: Colors.white,  
16.	    ),  
17.	  ),  
18.	],  

Pada kode di atas, kita telah menggunakan RaisedButton yang menampilkan bagian bawah Scaffold. Kita juga dapat menggunakan FlatButton di sini.

5. bottomNavigationBar

Seperti namanya, navigation bar bawah, sama seperti appbar adalah strip horizontal di bagian bawah layar. Ini dapat memiliki beberapa item dan dapat menggunakan label teks, ikon, atau kombinasi keduanya navigation bar bawah umumnya dibuat untuk menampilkan pesan serta untuk menyediakan tindakan pintasan tertentu.

Ada widget yang disebut ‘bottomnavigationbar’ untuk membuat yang sama, namun, dengan ‘perancah’ dan ‘floatingactionbutton’, kami menggunakan widget ‘bottomappbar’ karena menyediakan kamar untuk tombol aksi mengambang dan tidak tumpang tindih. Properti ini akan dirender di bagian bawah body tetapi di atas bottomNavigationBar.  Lihat contoh kode di bawah ini:

1.	bottomNavigationBar: BottomNavigationBar(  
2.	  currentIndex: 0,  
3.	  fixedColor: Colors.grey,  
4.	  items: [  
5.	    BottomNavigationBarItem(  
6.	      title: Text("Home"),  
7.	      icon: Icon(Icons.home),  
8.	    ),  
9.	    BottomNavigationBarItem(  
10.	      title: Text("Search"),  
11.	      icon: Icon(Icons.search),  
12.	    ),  
13.	    BottomNavigationBarItem(  
14.	      title: Text("User Profile"),  
15.	      icon: Icon(Icons.account_circle),  
16.	    ),  
17.	  ],  
18.	  onTap: (int itemIndex){  
19.	    setState(() {  
20.	      _currentIndex = itemIndex;  
21.	    });  
22.	  },  
23.	),  

Untuk menampilkan beberapa widget di dalam ‘bottomappbar ()’ kita perlu menggunakan widget kontainer seperti ‘baris ()’ yang dapat merangkum beberapa widget anak di dalamnya.

6. Scaffold Class Flutter

Scaffold Class Flutter berfungsi untuk mengimplementasikan desain material dasar dari struktur visual dan layout. Berikut ini adalah contoh penerapan Scaffold Class Flutter.

/// Flutter code sample for Scaffold

// This example shows a [Scaffold] with a [body] and [FloatingActionButton].
// The [body] is a [Text] placed in a [Center] in order to center the text
// within the [Scaffold]. The [FloatingActionButton] is connected to a
// callback that increments a counter.
//
// ![The Scaffold has a white background with a blue AppBar at the top. A blue FloatingActionButton is positioned at the bottom right corner of the Scaffold.](https://flutter.github.io/assets-for-api-docs/assets/material/scaffold.png)

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(child: Text('You have pressed the button $_count times.')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Contoh kode ini juga bisa Anda lihat di: https://api.flutter.dev/flutter/material/Scaffold-class.html

Selanjutnya, kita akan lihat contoh di mana kita telah mencoba menggunakan sebagian besar properti Scaffold untuk memahami widget ini dengan cepat dan mudah.

Dalam contoh ini, kita akan melihat penerapan widget Scaffold dengan properti yang ada di dalam Scaffold Flutter seperti AppBar, BottomAppBar, FloatingActionButton, floatingActionButtonLocation, dan drawer.

1.	import 'package:flutter/material.dart';  
2.	  
3.	void main() => runApp(MyApp());  
4.	  
5.	/// This Widget is the main application widget.  
6.	class MyApp extends StatelessWidget {  
7.	  @override  
8.	  Widget build(BuildContext context) {  
9.	    return MaterialApp(  
10.	      home: MyStatefulWidget(),  
11.	    );  
12.	  }  
13.	}  
14.	  
15.	class MyStatefulWidget extends StatefulWidget {  
16.	  MyStatefulWidget({Key key}) : super(key: key);  
17.	  
18.	  @override  
19.	  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();  
20.	}  
21.	  
22.	class _MyStatefulWidgetState extends State<MyStatefulWidget> {  
23.	  int _count = 0;  
24.	  
25.	  Widget build(BuildContext context) {  
26.	    return Scaffold(  
27.	      appBar: AppBar(  
28.	        title: Text('Flutter Scaffold Example'),  
29.	      ),  
30.	      body: Center(  
31.	        child: Text('We have pressed the button $_count times.'),  
32.	      ),  
33.	      bottomNavigationBar: BottomAppBar(  
34.	        shape: const CircularNotchedRectangle(),  
35.	        child: Container(  
36.	          height: 50.0,  
37.	        ),  
38.	      ),  
39.	      floatingActionButton: FloatingActionButton(  
40.	        onPressed: () => setState(() {  
41.	          _count++;  
42.	        }),  
43.	        tooltip: 'Increment Counter',  
44.	        child: Icon(Icons.add),  
45.	      ),  
46.	      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,  
47.	      drawer: Drawer(  
48.	        elevation: 20.0,  
49.	        child: Column(  
50.	          children: <Widget>[  
51.	            UserAccountsDrawerHeader(  
52.	              accountName: Text("javatpoint"),  
53.	              accountEmail: Text("javatpoint@gmail.com"),  
54.	              currentAccountPicture: CircleAvatar(  
55.	                backgroundColor: Colors.yellow,  
56.	                child: Text("abc"),  
57.	              ),  
58.	            ),  
59.	            ListTile(  
60.	              title: new Text("Inbox"),  
61.	              leading: new Icon(Icons.mail),  
62.	            ),  
63.	            Divider( height: 0.1,),  
64.	            ListTile(  
65.	              title: new Text("Primary"),  
66.	              leading: new Icon(Icons.inbox),  
67.	            ),  
68.	            ListTile(  
69.	              title: new Text("Social"),  
70.	              leading: new Icon(Icons.people),  
71.	            ),  
72.	            ListTile(  
73.	              title: new Text("Promotions"),  
74.	              leading: new Icon(Icons.local_offer),  
75.	            )  
76.	          ],  
77.	        ),  
78.	      ),  
79.	    );  
80.	  }  
81.	}  

Demikianlah penjelasan tentang Widget Scaffold Flutter. Widget ini akan sangat membantu Anda dalam menciptakan aplikasi yang menarik dan interaktif. Anda bisa mencoba membuatnya dengan contoh-contoh kode yang sudah kami berikan sebelumnya.

Ingin belajar lebih banyak tentang bahasa pemrogaraman Dart khususnya framework Flutter? Kunjungi selalu situs Codekey di https://codekey.id. Codekey adalah media untuk belajar bahasa pemrograman.

Di sini kami akan memberikan banyak materi tentang bahasa pemrograman seperti tutorial, tips, dan trik untuk Anda dalam memecahkan masalah pemrograman. Jangan lupa untuk allow notification dari situs kami agar Anda tidak ketinggalan update terbaru.