Scribd Logo
Upload

Welcome to Scribd!

  • Interface 2

    Uploaded by

    Muhammad Itba' Hikmatullah Azzam
    13 views37 pages
    interface 2

    Original Title

    interface 2

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    interface 2

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    Download as pdf
    13 views37 pages

    Interface 2

    Uploaded by

    Muhammad Itba' Hikmatullah Azzam
    interface 2

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    Download as pdf
    of 37
    Bab 10 Bab ini masih membahas seputar pembuatan user interface (UI), lanjutan dari bab sebelumnya. Kali ini, kita akan membahas tentang penggunaan komponen-komponen umum yang disediakan oleh Flutter, Kemampuan dalam menggunakan komponen-komponen merupakan hal vital yang sangat diperlukan dalam membangun tampilan layar. Dengan memiliki kemampuan ini, kita dapat membuat tampilan yang cocok atau sesuai dengan aplikasi yang akan kita kembangkan. Dalam bab ini, pembahasan komponen akan dikelompokkan berdasarkan fungsinya. Struktur Aplikasi Dalam pembuatan aplikasi Flutter, kita memerlukan beberapa komponen dasar untuk membentuk struktur aplikasi tersebut. Komponen-komponen tersebut adalah MateriapApp, Scaffold, AppBar, dan Material. Kelas MaterialApp Kelas. ini menyatakan bahwa aplikasi dibuat menggunakan komponen- Komponen Material Design dan digunakan sebagai kontainer utama di dalam layar, Tiga properti yang sering digunakan pada saat bekerja dengan MaterialApp adalah title, theme, dan home, Contoh penggunaannya Adalah sebagai berikut: fie, Kelas Scaffold Kelas Scaffold berfungsi untuk membentuk struktur tampilan yang terdir dari application bar (bagian header) dan body. Untuk membuat application bar, kita perlu mengisi nilai ke dalam properti appBar pada kelas Scaffold, Bagian body dibuat dengan mengisi properti body. Kelas AppBar Kelas AppBar berfungsi untuk membuat application bar, yang nantinya diisi ke dalam properti appBar. Properti yang paling sering digunakan dalam kelas AppBar adalah title, yang perlu diisi dengan objek dari kelas Text. ‘kadang disertai dengan tombol-tombol aksi tertent Bt be dali application bas Kelas Material Kelas Material adalah kelas opsional yang dapat digunakan untuk mengisi properti body pada saat kita membuat objek dari kelas Scaffold. Peeaserier Umacn ak anak) Kelas Material pada umumnya digunakan untuk layar-layar tampilan yang memerlukan proses penggambaran di atas kanvas dan animasi. Untuk layar- layar yang hanya menampilkan komponen-komponen standar, kita tidak perlu menggunakan kelas Material. Teks, Gambar, dan Icon Teks, gambar, dan icon adalah komponen-komponen dasar yang sangat sering digunakan dalam pembuatan tampilan aplikasi. Untuk memenuhi kebutuhan ini, Flutter menyediakan kelas Text, Image, dan Icon. Text( “Teks yang akan ditampilkan’, style: // ... textDirection: // ... Untuk mengatur gaya (style) dari teks yang ditampilkan, gunakan Kelas TextStyle (lihat kembali pembahasan pada bab sebelumnya). Arahteksketikaditampilkandapatdiaturmenggunakan propertitextDirection, yang nilainya bisa berupa TextDi rection. 1tr (teks ditampilkan dari kiri ke kanan) atau TextDirection.rtl (teks ditampilkan dari kanan ke kiri). Jika panjang teks yang ditampilkan melebihi lebar layar, maka kita perly mengisi properti softWrap dengan nilai true agar sisa dari teks tersebut ditampilkan di bagian bawahnya. Untuk membatasi jumlah maksimal baris yang diperbolehkan, isikan nilai (bilangan bulat) pada properti maxLines, import ‘package: flutter/material.dart’ ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: “Demo Flutter’, appBar: AppBar( title: Text( ‘Demo Text.softwrap’), )» body: Column( children: [ Container( margin: EdgeInsets.al1(5.@), padding: EdgeInsets.all(10.@), child: Text( ‘Organic Chemistry’, style: TextStyle( fontSize: 26.0, fontWeight: FontWeight.bold, )s )s )» Container( height: 10.0, )s Container( margin: EdgeInsets.all(5.@), padding: EdgeInsets.al1(10 child: Text( < _ this. longText, o * + 9 © | @ a 4 ° a t Posisi teks dapat diatur menggunakan properti textAlign. Nilai untuk properti ini dapat berupa TextAlign.left, TextAlign.center, TextAlign. right, dan TextAlign. justify. Contoh aplikasi di bawah ini menunjukkan pengaruh dari penggunaan nilai-nilai tersebut. ‘kage: flutter/material.dart? ; final String paragraf3 « «7 teks pada paragraf ini dibuat menggunakan nilai : sehingga teks ditampilkan rata kanan. TextAlign right eons : final String paragrafa = °'” Teks pada paragraf ini dibuat menggunakan nilai TextAlii just: sehingga teks ditampilkan rata kiri dan kanan. yt om ees 3 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Demo Text.textAlign’), )» body: Column( children: [ Container( margin: EdgeInsets.all(10.@), child: Text( this.paragraf1, style: TextStyle( fontSize: 18.0, ), textAlign: TextAlign.left, » ), Container( gin: EdgeInsets.al1(10.@), d: Text( this, paragr: “style: TextStyle( fontSize: 18.0, Peieatian: TextAlign. justify, Hasil yang diberikan oleh kode di atas adalah sebagai berikut: ¢ * ° « 1° ® / a 1 a ‘i | 0 0 - Nilai lain yang juga dapat digunakan untuk properti textAlign adalah TextAlign.start dan TextAlign.end, Posisi teks yang diatur nilai TextAlign. start dan TextAlign.end akan tergantung dari nilai properti textDirection. Jika properti textDirection bernilai TextDirection.1tr make Pid Sepaieccin anes as Se import ‘package: flutter/material, dart’; void main() => runApp(MyApp()); class MyApp extends StatelesswWidget { werride Widget build(BuildContext context) { return MaterialApp( title: ‘Demo Flutter’, home: Home(), 3 } t class Home extends StatelessWidget { final String teks1 = ‘Nilai TextAlign.start pada teks dengan TextDirection.1tr’; final String teks2 = ‘Nilai TextAlign.end pada teks dengan TextDirection.1tr’; final String teks3 = ‘Nilai TextAlign.start pada teks dengan TextDirection.rtl’; final String teks4 = ‘Nilai TextAlign.end pada teks dengan TextDirection.rtl?; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Demo Text.textAlign’), )s body: Column( children: [ Container( margins EdgeInsets.all(1@.@), : Text ( Cantainer( margin: Edgetnsets.all(10.0), child: Text( this.teks3, style: TextStyle( fontSize: 18.8, ), textDirection: TextDirection.rtl, textAlign: TextAlign.start, ds ds Container( margin: EdgeInsets.a11(10.0), child: Text( this.teks4, style: TextStyle( fontSize: 18.0, ); textDirection: TextDirection.rtl, textAlign: TextAlign.end, ), ds L ), 5 } } Hasil yang diberikan adalah sebagai berikut: Kelas Image 4 a d » Kita perlu menempatkan file gambar yang akan ditampilkan (*. jpeg, * jpg, *.png, dil) ke dalam direktorj aplikasi (biasanya pada sub-direktori images). File tersebut dijadikan sebagai aset atau file sumber daya (resource file). Selain itu, agar file gambar dapat dikenal oleh aplikasi kita juga perlu mengubah kode konfigurasi yang terdapat di dalam file pubspec.yaml, Sebagai contoh, jika kita ingi in menampilkan file gambar dengan nama fotol. jpeg dan foto2. jpeg, simpan file tersebut ke dalam direktori nama- aplikasi/imag eS. Selanjutnya, ubah konfigurasi pada file pubspec. yaml menjadi seperti berikut: # To add assets to like this: assets: - images/foto1. jpeg ~ images/foto2. jpeg your application, add an Untuk menampilkan gambar-gambar di atas ke layar, gunakan metode asset () yang didefinisikan pada kelas Image, seperti yang ditunjukkan oleh contoh aplikasi di bawah ini. import 4 ‘images/fotol. jpeg’ + height: 250.0, fit: BoxFit. cover, ys Divider(), Image.asset( ‘images/foto2. jpeg’, height: 250.0, fit: BoxFit.cover, ds ec’ Ps $ © Q 4 | © ia Kelas Icon Kelas Icon digunakan untuk menampilkan gambar icon. Flutter m banyak daftar icon yang disimpan ke dalam kelas Icons. Objek ee biasanya ditampilkan pada saat kita membuat objek dari kelas IconButto”- Contoh aplikasi di bawah ini menunjukkan cara membuat icon pada bagian application bar. ; pada aplikasi ini kita menyertakan dua file gambar dengan nama pizza jpeg dan cake. jpeg. Oleh karena itu, kita perlu mengubah konfigurasi pada file pubspec yam1 menjadi seperti berikut: # To add assets to your application, add an assets” like this: ‘ assets: - images/pizza.jpeg - images/cake. jpeg Kode untuk file lib/main.dart dapat dilihat di bawah ini. import ‘package: flutter/material.dart? ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: ‘Demo Flutter’, home: Home(), )3 } } class Home extends StatefulWidget { @override HomeState createState() => HomeSta TconButton( icon: Icon(Icons.local_pizza), onPressed: () { select Image(@); h, ) IconButton( icon: Icon(Icons.cake), onPressed: () { selectImage(1); }, ), 1, » body: ListView( children: [ Image .asset( this.fileName, height: 250.0, fit: BoxFit.cover, )s Hasil yang diberikan adalah sebagai berikut: tuk melihat cara kerja aplikasi di atas, ilih salah sat pada bagian kanan application bar, ‘ wheres terdapat masukan dan Pilihan Komponen masukan dan pilihan adalah komponen yang digunakan agar pengguna dapat berinteraksi dengan aplikasi. Sebagai contoh, pengguna dapat memasukkan nilai tertentu ke dalam komponen TextField dan aplikasi akan menangkap dan memproses nilai tersebut sesuai kebutuhan, Sub-bab ini akan membahas komponen-komponen masukan dan pilihan yang disediakan oleh Flutter. Kelas TextField Komponen paling lazim digunakan untuk menerima masukan dari pengguna adalah textbox. Dalam Material Design, textbox diimplementasikan menggunakan kelas TextField. Dengan komponen ini, pengguna dapat memasukkan data nama, alamat, email, password, dan lain-lain. Sama seperti kelas Text, dalam kelas TextField juga terdapat properti style, textAlign, textDirection, dan maxLines. Properti-properti tersebut digunakan untuk mengatur gaya tampilan teks yang terdapat pada komponen TextField. Contoh penggunaan kelas TextField dapat dilihat pada aplikasi di bawah ini. class Home extends Sta’ @override HomeState createstate() } class HomeState extends Heaton { String name =; String text = °; void onPressed() { setState(() { if (this.name.trim(),length == @) return; this.text = ‘Hai ‘+ this.name + ‘, apa kabar?’; ns } void onChanged(String value) { - setState(() { this.name = value; build(Buildcontext context) { n Scaffold( _AppBar ( Text(‘Demo TextField’), fn tte qwerty io asdtgnjkt | o 4 + $ © o q 4 ° o Orrxcvbam@ mm, o ° Untuk melihat cara kerja aplikasi di atas, isikan nama ke dalam komponen TextField, lalu klik tombol yang ada. Pada umumnya komponen TextField disertai dengan teks petunjuk untuk memudahkan pengguna dalam memahami maksud aplikasi. Untuk membuat teks petunjuk seperti ini, kita perlu mengisi properti decoration pada TextField dengan nilai berupa objek dari kelas InputDecoration. Pada objek InputDecoration, isikan nilai untuk properti hintText. Jika ingin mengatur gaya untuk teks petunjuk yang ditampilkan, sertakan juga nilai untuk properti hintStyle. Kode di bawah ini menunjukkan penggunaan properti decoration pada TextField. Rai xedtutton( bila an s onPressed: () { o ontednerchaseht 18.0))) Text (this. text), th rama lenghap Kelas Checkbox dan CheckboxListTile Kelas Checkbox digunakan untuk membuat komponen pilihan, Dalam komponen ini, pengguna diizinkan untuk memilih lebih dari satu piliban. Keadaan atau nilai pada komponen Checkbox diperoleh melalui properti value. Nilai tersebut akan berubah ketika terjadi event Checkbox, Contoh aplikasi di bawah ini menunjukkan penggunaan kelas Checkbox. : } } class Home extends Statefulwidget 5 @override HomeState createState() => Homestate() ; } class HomeState extends State bahasa = [ ‘Java’, ‘Kotlin’, ‘Dart’]; bool selectedi = false; bool selected2 = false; bool selected3 = false; List list = []; void onChanged1(bool value) { setState(() { this.selected1 = value; y)5 if (value) list.add(@); else list.remove(@); print(list); bs void onChanged2(bool value) { setState(() { this.selected2 = value; y)3 if (value) list. add (1). value: this.selected1, a ‘onChanged: (bool value) { onChanged1(value); h ) ce Container(width: 8.0,), : ‘Text (this. bahasa[@]) ae ( children: [ — Checkbox( value: this.selected2, onChanged: (bool value) { onChanged2(value); }, cad Container(width: 8.0,), ext (this. bahasa[1]) 1: [ e ® * $ ® a Qa 4 ° Q Ketika komponen Checkbox pertama (Java) dipilih, aplikasi akan memicu terjadinya event onChanged. Selanjutnya, ketika event tersebut terjadi, aplikasi memanggil metode onChanged1(). Dalam metode onChanged1(), nilai dari komponen Checkbox disimpan ke dalam variabel selected1. void aon so { oe Rogie gost Jika variabel tersebut bernilai true, maka aplikasi akan menambahkan elemen baru dengan nilai 0 ke dalam variabel List. Jika sebaliknya, aplikasi akan menghapus elemen dengan nilai 0 dari variabel List. Konsep di atas juga diterapkan untuk komponen Checkbox kedua ketiga. Perbedaannya terletak pada variabel yang digunakan dan metode Yang dipanggil pada saat event onChanged terjadi. Selain untuk menampung beberapa pilihan, komponen Checkbox juga digunakan untuk menentukan apakah suatu flag tertentu akan diaktifkan atay tidak, Contoh aplikasi di bawah ini menunjukkan penggunaan komp Checkbox untuk mengaktifkan/menonaktifkan komponen TextField, Hflutter/material.dart’; n() => runApp(MyApp()) 3 . MyApp extends StatelessWidget { ‘ide Widget build(Buildcontext context) { return MaterialApp( title: ‘Demo Flutter’, theme; ThemeData( primarySwatch: Colors.blue, )s home: Home(), extends StatefulWidget { ‘createState() => HomeState(); extends State { ls . Re : + @override widget butld(ButlaContext context) ee return Scaffold( appBar: AppBar( title: Text( ‘Demo Checkbox’), )» body: Container( padding: EdgeInsets.all(10.0), child: Column( : mainAxisAlignment: MainAxisAlignment.center, children: [ TextField( enabled: !this.selected, 4 onChanged: (String value) { onTextFieldChanj hb decoration: InputDecoration( hintText: ‘Ketik teks di sini’, hintStyle: TextStyle( fontStyle: FontStyle.normal, € ve ois qwertyutop asatgnjket ® * 9 © a Q 4 ° D Qrixevbam@ mo e Untuk memahami cara kerja dari aplikasi di atas, pilih komponen Checkbox, Ketika komponen tersebut dalam keadaan dipilih (checked), komponen TextField menjadi tidak aktif. Pada dua contoh sebelumnya, pembuatan deskripsi_ pada komponen Checkbox harus dilakukan menggunakan bantuan komponen Text. Flutter menyediakan komponen lain untuk membuat disertai dengan teks dan icon, kelas CheckboxListTile Checkbox yang Jangsung yaitu CheckboxListTile. Contoh penggunaan dapat dilihat pada aplikasi di bawah ini, class Home extends StatefulWidget { @override HomeState createState() => HomeState(); } class HomeState extends State { final List bahasa = [‘Java’, ‘Kotlin’, ‘Dart’ ]; bool selectedi = false; bool selected2 = false; bool selected3 = false; Listcint> list = []; void onChanged1(bool value) { setState(() { this.selected1 = value; y3 if (value) list.add(@); else list.remove(@); print(list); } void onChanged2(bool value) { setState(() { this.selected2 = value; ys if (value) list.add(1); else list.remove(1); print(list); bs void onChanged3(bool value) { setstate(() { this.selected3 = value; value: this, selectedi, pos onchanged: (bool value) { onchangedt( title: Text(this-bahasal@))» activecolor; Colors.red, secondary: Icon(Icons. Language)» ) CheckboxListTile( value: this.selected2, onchanged: (bool value) { onChanged2( va: title: Text (this.bahasa[1]), activeColor: Colors.red, secondary: Icon(Icons language) » )s CheckboxListTile( value: this.selected3, onChanged: (bool value) { onChanged3(value);— title: Text (this. bahasa[2]), activeColor; Colors.red, secondary: Icon(Icons . language), Kelas Radio dan RadioListTile na seperti Checkbox, kelas Radio juga digunakan untuk membuat jomponen pilihan. Perbedaannya, pada Radio pengguna hanya diizinkan untuk memilih satu pilihan. Dalam bekerja dengan Radio, kita perlu mengisi pilai untuk properti value, groupValue, dan onChanged. Properti value menyatakan nilai ketika komponen tersebut dipilih, groupValue untuk menyatakan nilai yang sedang dipilih (aktif) pada kelompok tertentu, sedangkan onchanged untuk menangani kejadian ketika komponen tersebut dipilih. import ‘package :flutter/material.dart? ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: ‘Demo Flutter’, theme: ThemeData( primarySwatch: Colors.blue, > home: Home(), ae, to Ree Text( ‘Demo wie da _ body: Container( padding: EdgeInsets,a11(10.0), child: Column( children: [ Text(‘Jenis Kelamin:’), ‘ Row( children: [ Radio( value: @, groupValue: this.selected, onChanged: (int value) { onChanged(vi » Container(width: 8.0,), Text(‘Pria’) L ae Row( children: [ this. selected, | (int value) { erouprl € i) * is 2 a Q Pada kode di atas kita mendefinisikan nilai 0 untuk properti value pada komponen Radio pertama. Untuk Radio kedua, kita mengisi nilai 1. Anda dapat menggunakan nilai lain untuk keperluan ini, misalnya 88 dan 99 atau yang lain. Selain Radio, Flutter juga menyediakan kelas RadioListTile. Kelas ini digunakan untuk membuat komponen Radio yang dapat disertai dengan teks dan icon. Penggunaan kelas RadioListTile dapat dilihat pada aplikasi di bawah ini. - void onchanged(int “setState(() { i pie eaat ae ee . value; print (‘Pilihan: ${this.selected}’); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Demo Radio’), )» body: Container( padding: EdgeInsets.al1(10.0), child: Column( children: [ Text(‘Jenis Kelamin:’), RadioListTile( value: @, groupValue: this. selected, onChanged: (int value) { onChi title: Text(‘Pria’), activeColor: Colors. ae wo ® « S$ 2 oa Q 4 Kelas Switch dan SwitchListTile Kelas Switch digunakan untuk membuat pilihan yang menyatakan dua keadaan, mati (off) atau hidup (on). Komponen ini banyak digunakan untuk membuat layar yang berkaitan dengan penyetelan (setting) dan konfigurasi aplikasi. Properti yang wajib digunakan dalam kelas Switch adalah value dan onChanged, sama seperti pada saat kita menggunakan kelas Checkbox. Contoh penggunaannya dapat dilihat pada aplikasi di bawah ini, Class Home extends StatefulWidget { @override HomeState createState() => HomeState(); } t class HomeState extends State { | final List settings = (‘Airplane mode’, ‘WLAN’, ‘Mobile Data’, ‘Bluetooth’ ]; Listcbool> settingvalues = [false, false, false, false]; void onSwitchiChanged(bool value) { zs setState(() { f this.settingValues[@] = value; v3 print (settingevalues) $: } void onSwitch2Changed(bool value) { setState(() { this.settingValues[1] = value; 3 print (settingValues) ; " void onSwitch3Changed(bool value) { setState(() { this.settingValues[2] = value; })3 print(settingValues) ; d onSwitch4Changed(bool value) { ‘setState(() { , this.settingValues[3] = value; value: this. settingvalues[a] onChanged; (bool value) { onswitchiChanged( value); bh )s Container(width: 8.0,), Text(this.settings(@}), 1, )» Divider(), Row( children: fi Switch( value: this.settingValues[1], onChanged: (bool value) { onSwitch2Changed (value); bs )» Container(width: 8.0,), Text (this.settings[1]), 1, )» Divider(), Row( children: [ Switch( value: this.settingValues[2], onChanged: (bool value) { onswitch3Changed(value); Lb : 2 Container(width: 8.0,), hee Text (this.settings[2]), Hasil yang diberikan adalah sebagai berikut: o ® « 9 ® S 7a iz ° Oo Pada kode di atas kita menyimpan nilai-nilai dari komponen Switch pada variabel settingValues. Untuk menyimpan nilai tersebut, kita mendefinisikan empat metode berikut: . - this.settingValues[3] = value; 3 yint( settingValues); } selain kelas Switch, kita juga dapat membuat aplikasi seperti di atas menggunakan kelas SwitchListTile. Dalam SwitchListTile, kita dapat membuat deskripsi dengan mengatur properti title dan icon dengan properti secondary. Contoh penggunaannya dapat dilihat di bawah ini. import ‘package: flutter/material.dart’ ; void main() => runApp(MyApp())5 class MyApp extends StatelesswWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: ‘Demo Flutter’, theme: ThemeData( primarySwatch: Colors.blue, rer) { s.settingValues(2] » value; t(settingValues); void onswitchachanged(bool value) { SetState(() ( 5 a this. settingValues[3] = value; tcl guteingalivs); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Demo Switch’), ), v body: Container( padding: EdgeInsets.al1(10.@), child: ListView( children: [ SwitchListTile( value: this.settingValues[@], onChanged: (bool value) { onSwitch1Changed(: title: Text(this.settings[®]), Me secondary: Icon(Icons.airplanemode_; ¢. noo04 fP BOD s4 & Kelas Slider Kelas Slider digunakan sebagai komponen masukan yang

    You might also like