Belajar Class Di Flutter : Navigation

dart flutter

Belajar Class Di Flutter : Navigation

Navigation

Kita telah bisa membuat satu tampilan screen (layar/page) pada pembelajaran sebelumnya. Namun, pada saat membangun sebuah aplikasi kita akan membuat banyak sekali screen dan kita akan berpindah dari satu screen ke screen lainnya.

Dalam pemrograman Android kita mengenal Intent lalu pada pemrograman website terdapat tag untuk berpindah dari satu page ke page lain.

 Pada Flutter kita akan menggunakan sebuah class bernama Navigator. 

Dengan Navigator ini kita akan berpindah dari satu screen ke screen lainnya. Berikut ini contohnya:

Perlu kita ketahui bahwa konsep navigasi pada Flutter mirip sekali dengan pemrograman Android, yakni bahwa ketika berpindah screen/activity akan menjadi tumpukan (stack). 

Jadi ketika berpindah dari satu screen ke screen lain (push), maka screen pertama akan ditumpuk oleh screen kedua. Kemudian apabila kembali dari screen kedua ke pertama, maka screen kedua akan dihapus (pop).

Kita akan membuat kode seperti contoh di atas. Kita membutuhkan screen kedua yang kodenya seperti berikut:

class SecondScreen extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Kembali'),
        ),
      ),
    );
  }
}

Dan untuk screen pertama kodenya seperti berikut:

class FirstScreen extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.blue,
          textColor: Colors.white,
          child: Text('Pindah Screen'),
        ),
      ),
    );
  }
}

Navigator.push

Untuk berpindah ke screen kedua kita akan menggunakan sebuah method Navigator.push, method tersebut ditulis seperti berikut:

Navigator.push(context, MaterialPageRoute(builder: (context) {
   return WidgetScreen();
}));

Pada kode di atas Navigator.push memiliki dua parameter. Pertama ialah context dan yang kedua Route. Parameter context ini merupakan variabel Context yang ada pada method build. 

Parameter route berguna untuk menentukan tujuan ke mana kita akan berpindah screen. 

Route tersebut kita isikan dengan MaterialPageRoute yang di dalamnya terdapat builder yang nantinya akan diisi dengan tujuan screen-nya. 

Maka untuk melakukan perpindahan screen kita akan membuat event onPressed pada tombol RaisedButton yang ada pada screen pertama:

1. class FirstScreen extends StatelessWidget {
2.   @override
3.   Widget build(BuildContext context) {
4.     return Scaffold(
5.       appBar: AppBar(
6.         title: Text('First Screen'),
7.       ),
8.       body: Center(
9.         child: RaisedButton(
10.           color: Colors.blue,
11.           textColor: Colors.white,
12.           child: Text('Pindah Screen'),
13.           onPressed: () {
14.             Navigator.push(context, MaterialPageRoute(builder: (context) {
15.               return SecondScreen();
16.             }));
17.           },
18.         ),
19.       ),
20.     );
21.   }
22. }

Navigator.pop

Setelah dapat berpindah ke screen lain dan kembali ke screen sebelumnya, maka kita akan belajar menggunakan Navigator.pop. Penulisan Navigator.pop seperti berikut:

Navigator.pop(context)

Pada Navigator.pop kita hanya cukup menambahkan parameter context yang merupakan variabel dari method build.

Untuk kembali dari screen kedua kita dapat menambahkan event onPressed pada RaisedButton yang ada pada screen kedua dan kita masukkan Navigator.pop pada event, seperti berikut:

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Kembali'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Mengirimkan Data Antar Halaman

Seringkali beberapa halaman pada aplikasi perlu saling berinteraksi dengan berbagi dan saling mengirimkan data. Pada Flutter kita memanfaatkan constructor dari sebuah class untuk mengirimkan data antar halaman.

Sebagai contoh kita memiliki pesan yang akan dikirimkan dari First Screen menuju Second Screen.

String message = 'Hello from First Screen!';

Untuk mengirimkan variabel message tersebut ke Second Screen, maka kita akan mengirimkannya sebagai parameter dari constructor kelas Second Screen seperti berikut:

1. class FirstScreen extends StatelessWidget {
2.   String message = 'Hello from First Screen!';
3.  
4.   @override
5.   Widget build(BuildContext context) {
6.     return Scaffold(
7.       appBar: AppBar(
8.         title: Text('First Screen'),
9.       ),
10.       body: Center(
11.         child: RaisedButton(
12.           color: Colors.blue,
13.           textColor: Colors.white,
14.           child: Text('Pindah Screen'),
15.           onPressed: () {
16.             Navigator.push(context, MaterialPageRoute(builder: (context) {
17.               return SecondScreen(message);
18.             }));
19.           },
20.         ),
21.       ),
22.     );
23.   }
24. }

Agar Second Screen bisa menerima data tersebut, maka kita perlu mengubah default constructor-nya dan menambahkan variabel untuk menampung datanya.

class SecondScreen extends StatelessWidget {
  final String message;
 
  SecondScreen(this.message);
}

Kemudian kita dapat menampilkan data yang diterima melalui variabel yang kita buat.

1. class SecondScreen extends StatelessWidget {
2.   final String message;
3.  
4.   SecondScreen(this.message);
5.  
6.   @override
7.   Widget build(BuildContext context) {
8.     return Scaffold(
9.       appBar: AppBar(
10.         title: Text('Second Screen'),
11.       ),
12.       body: Center(
13.         child: Column(
14.           mainAxisSize: MainAxisSize.min,
15.           children: <Widget>[
16.             Text(message),
17.             RaisedButton(
18.               child: Text('Kembali'),
19.               onPressed: () {
20.                 Navigator.pop(context);
21.               },
22.             ),
23.           ],
24.         ),
25.       ),
26.     );
27.   }
28. }

Sehingga tampilan Second Screen akan menampilkan pesan dari First Screen seperti berikut:

Anda dapat memahami Navigation secara mendalam dengan membaca dokumentasi Navigation Cookbook.

Belajar Widget Flutter : Expanded

dart flutter

Belajar Widget Flutter : Expanded

Expanded

Sejauh ini kita telah mempelajari beberapa widget dasar dan bagaimana menyusunnya secara horizontal maupun vertikal. 

Dalam pengembangan aplikasi mobile kita tahu bahwa terdapat banyak sekali perangkat dengan ukuran layar yang berbeda pula. Untuk itu penting bagi kita untuk bisa menyusun tampilan yang responsif terhadap ukuran layar.

Kira-kira bagaimana Anda akan menyusun layout dengan tampilan seperti berikut?

Tentunya akan sangat merepotkan apabila kita mengatur tinggi dari masing-masing kotak, bukan? Belum lagi jika harus mengembangkan aplikasi di ukuran yang lebih besar seperti perangkat tablet. 

Flutter memiliki widget Expanded yang dapat mengembangkan child dari Row atau Column sesuai dengan ruang yang tersedia. Cara menggunakannya Anda cukup membungkus masing-masing child ke dalam Expanded.

1. class Rainbow extends StatelessWidget {
2.   @override
3.   Widget build(BuildContext context) {
4.     return Column(
5.       children: <Widget>[
6.         Expanded(
7.           child: Container(
8.             color: Colors.red,
9.           ),
10.         ),
11.         Expanded(
12.           child: Container(
13.             color: Colors.orange,
14.           ),
15.         ),
16.         Expanded(
17.           child: Container(
18.             color: Colors.yellow,
19.           ),
20.         ),
21.         Expanded(
22.           child: Container(
23.             color: Colors.green,
24.           ),
25.         ),
26.         Expanded(
27.           child: Container(
28.             color: Colors.blue,
29.           ),
30.         ),
31.         Expanded(
32.           child: Container(
33.             color: Colors.indigo,
34.           ),
35.         ),
36.         Expanded(
37.           child: Container(
38.             color: Colors.purple,
39.           ),
40.         ),
41.       ],
42.     );
43.   }
44. }

Saat aplikasi dijalankan, masing-masing container akan menempati ruang kosong yang ada. Jika Anda menjalankan di ukuran layar yang berbeda, maka ukuran container juga akan menyesuaikan.

Bisa kita lihat seluruh container menempati ruang dengan ukuran yang sama. Ini disebabkan Expanded memiliki parameter flex yang memiliki nilai default 1. 

Anda dapat mengubah nilai flex ini sesuai perbandingan yang diinginkan. Misalnya Anda memberikan nilai flex 2 pada salah satu container.

Expanded(
  flex: 2,
  child: Container(
    color: Colors.blue,
  ),
),

Maka container berwarna biru ini akan menjadi lebih besar dengan perbandingan 2/(1 + 1 + 1 + 1 + 2 + 1 + 1) atau 2/8 dari halaman.

Dokumentasi berikut ini dapat Anda pelajari untuk memaksimalkan penggunaan widget Expanded Class.