Belajar Membuat Aplikasi Tempat Wisata Dengan Flutter : Bagian Pertama

Pada kelas ini kita akan mengembangkan sebuah aplikasi yang menampilkan tempat-tempat wisata di Bandung. Hasil akhir dari keseluruhan codelab akan seperti berikut:

Dalam codelab pertama ini kita akan membuat sebuah tampilan yang menggabungkan semua widget-widget yang sebelumnya kita pelajari. Tampilannya adalah seperti berikut:

Sebelum kita membuat tampilan di atas, kita akan bedah terlebih dahulu layout-nya.

Pada layout di atas kita dapat memetakan widget-widget dalam bentuk diagram seperti di bawah ini:

1. Buat project Flutter baru dan berikan nama yang sesuai, misalnya wisata_bandung. Hapus kode aplikasi counter yang diberikan ketika project dibuat.
2. Tuliskan kode dasar yang menampilkan widget MaterialAppseperti berikut:
   
   

   
   import 'package:flutter/material.dart';
    
   void main() => runApp(MyApp());
    
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Wisata Bandung',
         theme: ThemeData.dark(),
       );
     }
   }
   
   

   Di sini karena aplikasi kita akan bernuansa gelap maka kita akan menggunakan tema dark yang bisa diatur melalui parameter theme pada MaterialApp.
3. Lalu kita akan membuat kode untuk susunan widget sesuai diagram yang telah kita buat. Untuk membuat kode kita lebih rapi kita akan membuat kelas Stateless Widget baru untuk menampung kode tampilan kita. Mari namakan kelas ini DetailScreen.
   
   

   
   class DetailScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold();
     }
   }
   
   

   Jangan lupa untuk menambahkan widget DetailScreen sebagai home dari MaterialApp.
   
   

   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Wisata Bandung',
         theme: ThemeData.dark(),
         home: DetailScreen(),
       );
     }
   }
   
   

4. Sesuai diagram di atas, kita akan menyusun beberapa widget secara vertikal sehingga kita perlu menggunakan widget Column.
   
   

   
   class DetailScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Column(),
       );
     }
   }
   
   

   Jalankan aplikasi Anda. Saat ini device atau emulator Anda memang masih belum menampilkan apa pun. Namun, kita akan memanfaatkan fitur hot reload untuk melihat perubahan-perubahan yang akan kita lakukan ke depan.
5. Komponen pertama yang akan kita buat adalah bagian judul dari halaman. Tentunya untuk menampilkan teks kita akan menggunakan widget Text.
   
   

   
   class DetailScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Column(
           children: <Widget>[
             Text('Farm House Lembang'),
           ],
         ),
       );
     }
   }
   
   

6. Ketika Anda menyimpan project atau menjalankan hot reload, tampilan aplikasi Anda sekarang mungkin tidak sesuai dengan keinginan, seperti teks terlalu ke atas dan juga terlalu kecil.
   Untuk itulah kita perlu membungkus widget Text ke dalam Container supaya kita dapat memberikan property seperti margin atau padding. Jika Anda menggunakan IDE Android Studio, Anda dapat memanfaatkan shortcut Alt+Enter untuk membungkus widget ke widget lain.
   
7.  Tambahkan margin atas supaya teks memiliki jarak terhadap bagian atas layar.
   
   

   
   class DetailScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Column(
           children: <Widget>[
             Container(
               margin: EdgeInsets.only(top: 16.0),
               child: Text('Farm House Lembang'),
             ),
           ],
         ),
       );
     }
   }
   
   

   Pada kode di atas kita hanya memberikan margin atas sebesar sebesar 16.0. Anda dapat memanfaatkan metode EdgeInsets lain seperti all() untuk memberikan margin ke semua sisi atau symmetric() apabila Anda ingin memberikan margin ke sisi vertikal atau horizontal.
8. Selanjutnya, sesuai contoh kita akan membuat teks judul berada di tengah. Tambahkan parameter atau properti textAlign pada widget Text.
   
   

   
   Container(
     margin: EdgeInsets.only(top: 16.0),
     child: Text(
       'Farm House Lembang',
       textAlign: TextAlign.center,
       style: TextStyle(
         fontSize: 30.0,
         fontWeight: FontWeight.bold,
       ),
     ),
   ),
   
   

   Lakukan hot reload. Tidak ada perubahan, apa sebabnya? Jika menggunakan Android Studio Anda dapat memanfaatkan fitur Flutter Inspector untuk melihat layout widget di dalam aplikasi.
   Dari gambar di atas bisa kita lihat ternyata layout aplikasi kita tidak penuh hingga seluruh halaman. Ini disebabkan sisi horizontal dari Column hanya menyesuaikan dengan konten yang ada di dalamnya. Untuk memaksimalkan ukuran lebar dari Column, tambahkan kode berikut:
   
   

   
   body: Column(
     crossAxisAlignment: CrossAxisAlignment.stretch,
     children: <Widget>[
       Container(
         margin: EdgeInsets.only(top: 16.0),
         child: Text(
           'Farm House Lembang',
           textAlign: TextAlign.center,
           style: TextStyle(
             fontSize: 30.0,
             fontWeight: FontWeight.bold,
           ),
         ),
       ),
     ],
   ),
   
   

   Parameter crossAxisAlignment berguna untuk mengatur alignment horizontal dari Column. Selain itu Column juga memiliki parameter mainAxisAlignment yang berfungsi untuk mengatur alignment secara vertikal (alignment utama). Kedua parameter ini juga berlaku sebaliknya untuk widget Row.
9. Setelah menyelesaikan judul, selanjutnya kita akan membuat bagian kedua yaitu informasi dari tempat wisata.
   Seperti yang terlihat kita perlu menyusun widget secara horizontal dan vertikal. Mari tambahkan child kedua dari Column dengan sebuah Container berisi Row. Tambahkan juga margin pada sisi atas dan bawah untuk memberikan jarak antar widget.
   
   

   
   class DetailScreen extends StatelessWidget {  @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: <Widget>[
             Container(...),
             Container(
               margin: EdgeInsets.symmetric(vertical: 16.0),
               child: Row(
                 children: <Widget>[],
               ),
             ),
           ],
         ),
       );
     }
   }
   
   

10. Buat widget Column untuk menyusun Icon dan Text.

1. class DetailScreen extends StatelessWidget {
2. @override
3. Widget build(BuildContext context) {
4. return Scaffold(
5. body: Column(
6. crossAxisAlignment: CrossAxisAlignment.stretch,
7. children: <Widget>[
8. Container(...),
9. Container( margin: EdgeInsets.symmetric(vertical: 16.0),
10. child: Row(
11. children: <Widget>[
12. Column(
13. children: <Widget>[
14. Icon(Icons.calendar_today),
15. Text('Open Everyday'),
16. ],
17. ),
18. ],
19. ),
20. ),
21. ],
22. ),
23. );
24. }
25. }

1. Jika Anda merasa jarak antara Icon dan Text terlalu rapat, Anda dapat menambahkan widget SizedBoxuntuk membuat “kotak” yang berguna untuk memberikan jarak.
   
   

   
   Column(
     children: <Widget>[
       Icon(Icons.calendar_today),
       SizedBox(height: 8.0),
       Text('Open Everyday'),
     ],
   ),
   
   

2. Selanjutnya sebagai tantangan, lengkapilah informasi tempat wisata dengan pasangan ikon dan teks sesuai contoh yang diberikan.
   
3. Jika hanya membuat 3 Column di dalam Row, maka tampilan widget Anda akan berurutan di sisi kiri layar seperti berikut:
   Bagaimana membuatnya menjadi lebih rapi? Jawabannya adalah mainAxisAlignment. Tambahkan MainAxisAlignment.spaceEvenlysebagai parameter untuk membuat masing-masing child di dalam Row memiliki jarak yang sama.

1. class DetailScreen extends StatelessWidget {
2.   @override
3.   Widget build(BuildContext context) {
4.     return Scaffold(
5.       body: Column(
6.         crossAxisAlignment: CrossAxisAlignment.stretch,
7.         children: <Widget>[
8.           Container(...),
9.           Container(
10.             margin: EdgeInsets.symmetric(vertical: 16.0),
11.             child: Row(
12.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
13.               children: <Widget>[
14.                 Column(...),
15.                 Column(...),
16.                 Column(...),
17.               ],
18.             ),
19.           ),
20.         ],
21.       ),
22.     );
23.   }
24. }

1. Pada langkah ini harusnya Anda sudah bisa menampilkan teks deskripsi sesuai langkah yang diberikan sebelumnya. Anda cukup menambahkan widget Container dan Textuntuk menampilkan konten deskripsi. Anda juga dapat menambahkan style sesuai selera Anda.
   
   

   
   Container(
     padding: EdgeInsets.all(16.0),
     child: Text(
       'Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable.',
       textAlign: TextAlign.center,
       style: TextStyle(fontSize: 16.0),
     ),
   ),
   
   

2. Terakhir, kita ingin mengubah background aplikasi menjadi warna hitam. Untuk mengubah warna background, gunakan parameter yang ada pada widget Scaffold.
   
   

   
   class DetailScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         backgroundColor: Colors.black,
         body: Column(...),
       );
     }
   }
   
   
   
   

3. Keseluruhan kode Anda akan seperti berikut

1. import 'package:flutter/material.dart';
2.  
3. void main() => runApp(MyApp());
4.  
5. class MyApp extends StatelessWidget {
6.   @override
7.   Widget build(BuildContext context) {
8.     return MaterialApp(
9.       title: 'Wisata Bandung',
10.       theme: ThemeData.dark(),
11.       home: DetailScreen(),
12.     );
13.   }
14. }
15.  
16. class DetailScreen extends StatelessWidget {
17.   @override
18.   Widget build(BuildContext context) {
19.     return Scaffold(
20.       backgroundColor: Colors.black,
21.       body: Column(
22.         crossAxisAlignment: CrossAxisAlignment.stretch,
23.         children: <Widget>[
24.           Container(
25.             margin: EdgeInsets.only(top: 16.0),
26.             child: Text(
27.               'Farm House Lembang',
28.               textAlign: TextAlign.center,
29.               style: TextStyle(
30.                 fontSize: 30.0,
31.                 fontWeight: FontWeight.bold,
32.               ),
33.             ),
34.           ),
35.           Container(
36.             margin: EdgeInsets.symmetric(vertical: 16.0),
37.             child: Row(
38.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
39.               children: <Widget>[
40.                 Column(
41.                   children: <Widget>[
42.                     Icon(Icons.calendar_today),
43.                     SizedBox(height: 8.0),
44.                     Text('Open Everyday'),
45.                   ],
46.                 ),
47.                 Column(
48.                   children: <Widget>[
49.                     Icon(Icons.access_time),
50.                     SizedBox(height: 8.0),
51.                     Text('09:00 - 20:00'),
52.                   ],
53.                 ),
54.                 Column(
55.                   children: <Widget>[
56.                     Icon(Icons.monetization_on),
57.                     SizedBox(height: 8.0),
58.                     Text('Rp 25.000'),
59.                   ],
60.                 ),
61.               ],
62.             ),
63.           ),
64.           Container(
65.             padding: EdgeInsets.all(16.0),
66.             child: Text(
67.               'Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable.',
68.               textAlign: TextAlign.center,
69.               style: TextStyle(fontSize: 16.0),
70.             ),
71.           ),
72.         ],
73.       ),
74.     );
75.   }
76. }

Anda juga dapat mengunduh keseluruhan kodenya pada tautan berikut: https://github.com/dicodingacademy/a159-flutter-pemula-labs