Menulis Aplikasi Flutter Pertama Anda, bagian 2

Flutter adalah toolkit UI Google untuk mem-build aplikasi yang cantik dan dikompilasi secara native dari satu codebase untuk seluler, web, dan desktop. Flutter berfungsi dengan kode yang sudah ada, digunakan oleh developer dan organisasi di seluruh dunia, serta gratis dan bersifat open source.

Dalam codelab ini, Anda akan memperluas aplikasi Flutter seluler dasar agar menyertakan interaktivitas. Anda juga akan membuat halaman kedua (disebut rute) yang dapat dibuka pengguna. Terakhir, Anda akan mengubah tema (warna) aplikasi. Codelab ini melanjutkan bagian 1, setelah Anda membuat daftar tanpa batas yang dimuat secara lambat, tetapi kami akan menyediakan kode awalnya jika Anda ingin langsung memulai dari bagian 2.

Yang akan Anda pelajari di bagian 2

  • Cara menulis aplikasi Flutter yang terlihat alami di iOS, Android, dan web
  • Cara menggunakan hot reload untuk siklus pengembangan yang lebih cepat
  • Cara menambahkan interaktivitas ke widget stateful
  • Cara membuat dan membuka layar kedua
  • Cara mengubah tampilan aplikasi menggunakan tema

Yang akan Anda build di bagian 2

Anda akan memulai dengan aplikasi seluler sederhana yang menghasilkan daftar usulan nama tanpa batas untuk perusahaan startup. Pada akhir codelab, pengguna akhir Anda dapat memilih dan membatalkan pilihannya, sehingga yang disimpan hanya nama terbaik. Dengan mengetuk ikon daftar di kanan atas panel aplikasi, Anda akan membuka halaman baru (disebut rute) yang hanya mencantumkan nama yang difavoritkan.

GIF animasi berikut menunjukkan cara kerja aplikasi yang telah selesai.

7fcab088cd22cff7.gif

Apa yang ingin Anda pelajari dari codelab ini?

Saya baru mengenal topik ini, jadi saya ingin melihat ringkasan yang bagus. Saya sedikit paham soal topik ini, tetapi saya perlu mengingat kembali. Saya sedang mencari kode contoh untuk digunakan dalam project saya. Saya sedang mencari penjelasan tentang sesuatu yang spesifik.

Jika Anda belum menyelesaikan Bagian 1, buka Menyiapkan lingkungan Flutter dalam Menulis aplikasi Flutter pertama Anda, bagian 1, guna menyiapkan lingkungan untuk pengembangan Flutter Anda.

Jika Anda telah menyelesaikan bagian 1 dari codelab ini, Anda pasti sudah memiliki aplikasi awal, startup_namer. Anda dapat melanjutkan ke langkah berikutnya.

Jika tidak memiliki startup_namer, Anda tidak perlu khawatir karena Anda dapat membuatnya menggunakan petunjuk berikut.

b2f84ff91b0e1396.pngBuat aplikasi Flutter sederhana dengan template. Buat project Flutter bernama startup_namer, lalu migrasikan ke keamanan null seperti berikut.

$ flutter create startup_namer
$ cd startup_namer
$ dart migrate --apply-changes

Anda biasanya akan mengedit lib/main.dart, tempat kode Dart berada.

b2f84ff91b0e1396.png Hapus semua kode dari lib/main.dart. Gantilah kode tersebut dengan kode dari file ini, yang menampilkan daftar usulan nama startup tanpa batas yang dimuat secara lambat.

b2f84ff91b0e1396.png Perbarui pubspec.yaml dengan menambahkan paket kata berbahasa Inggris:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  english_words: ^4.0.0-0    // NEW

Paket kata berbahasa Inggris membuat pasangan kata secara acak, yang berpotensi digunakan sebagai nama startup.

b2f84ff91b0e1396.png Saat melihat pubspec di tampilan editor Android Studio, klik Pub get di kanan atas untuk menarik paket ke dalam project Anda. Anda akan melihat tampilan berikut di konsol:

flutter pub get
Running "flutter pub get" in startup_namer...
Process finished with exit code 0

b2f84ff91b0e1396.png Jalankan aplikasi.

Scroll sejauh yang Anda inginkan untuk melihat usulan nama startup yang disediakan secara terus menerus.

Pada langkah ini, Anda akan menambahkan ikon hati ke setiap baris. Pada langkah berikutnya, Anda akan membuat ikon tersebut dapat diketuk dan menyimpan nama favorit.

b2f84ff91b0e1396.png Tambahkan Set _saved ke _RandomWordsState. Set ini menyimpan pasangan kata yang difavoritkan pengguna. Set lebih disarankan daripada List karena penerapan Set yang benar dapat mencegah entri duplikat.

class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _saved = <WordPair>{};     // NEW
  final _biggerFont = TextStyle(fontSize: 18.0);
  ...
}

b2f84ff91b0e1396.png Dalam fungsi _buildRow, tambahkan pemeriksaan alreadySaved untuk memastikan bahwa pasangan kata belum ditambahkan ke favorit.

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);  // NEW
  ...
}

Pada _buildRow(), Anda juga akan menambahkan ikon berbentuk hati ke objek ListTile untuk mengaktifkan penambahan favorit. Pada langkah berikutnya, Anda akan menambahkan kemampuan untuk berinteraksi dengan ikon hati.

b2f84ff91b0e1396.png Tambahkan ikon setelah teks, seperti yang ditunjukkan di bawah:

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return ListTile(
    title: Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: Icon(   // NEW from here...
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),                // ... to here.
  );
}

b2f84ff91b0e1396.png Lakukan hot reload pada aplikasi.

Sekarang Anda akan melihat ikon hati kosong di setiap baris, tetapi ikon tersebut belum interaktif.

Android

iOS

Terjadi masalah?

Jika aplikasi tidak berjalan dengan semestinya, Anda dapat menggunakan kode di link berikut untuk membuatnya kembali normal.

Pada langkah ini, Anda akan membuat ikon hati dapat diketuk. Saat pengguna mengetuk entri dalam daftar, lalu mengubah status favoritnya, pasangan kata tersebut akan ditambahkan atau dihapus dari kumpulan nama favorit tersimpan.

Agar dapat melakukannya, Anda harus mengubah fungsi _buildRow. Jika entri kata telah ditambahkan ke favorit, mengetuknya lagi akan menghapusnya dari favorit. Jika tile sudah diketuk, fungsi ini akan memanggil setState() untuk memberi tahu framework bahwa statusnya telah diubah.

b2f84ff91b0e1396.png Tambahkan onTap ke metode _buildRow, seperti yang ditunjukkan di bawah:

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return ListTile(
    title: Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: Icon(
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),
    onTap: () {      // NEW lines from here...
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else {
          _saved.add(pair);
        }
      });
    },               // ... to here.
  );
}

b2f84ff91b0e1396.pngLakukan hot reload pada aplikasi.

Anda akan dapat mengetuk tile mana pun untuk memfavoritkan atau membatalkan favorit entri. Saat tile diketuk, animasi percikan tinta implisit akan muncul dari titik ketuk.

Android

iOS

Terjadi masalah?

Jika aplikasi tidak berjalan dengan semestinya, Anda dapat menggunakan kode di link berikut untuk membuatnya kembali normal.

Pada langkah ini, Anda akan menambahkan halaman baru (disebut rute di Flutter) yang menampilkan nama favorit. Anda akan mempelajari cara bernavigasi antara rute asal dan rute baru.

Di Flutter, Navigator mengelola stack yang berisi rute aplikasi. Jika rute didorong ke stack Navigator, tampilannya akan diperbarui ke rute tersebut. Jika rute dimunculkan dari stack Navigator, tampilan akan dikirimkan ke rute sebelumnya.

Selanjutnya, Anda akan menambahkan ikon daftar ke AppBar pada metode build untuk _RandomWordsState. Saat pengguna mengklik ikon daftar, rute baru yang berisi nama favorit tersimpan akan didorong ke Navigator untuk menampilkan ikon tersebut.

b2f84ff91b0e1396.png Tambahkan ikon dan tindakan yang terkait ke metode build:

class _RandomWordsState extends State<RandomWords> {
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
        actions: [
          IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }
  ...
}

b2f84ff91b0e1396.pngTambahkan fungsi _pushSaved() ke class _RandomWordsState.

  void _pushSaved() {
  }

b2f84ff91b0e1396.png Lakukan hot reload pada aplikasi. Ikon daftar a114478ae13b853.png akan muncul di panel aplikasi. Mengetuknya tidak memicu apa pun karena fungsi _pushSaved masih kosong.

Selanjutnya, Anda akan mem-build rute dan mendorongnya ke stack Navigator. Tindakan tersebut mengubah layar agar menampilkan rute baru. Konten untuk halaman baru dibuat di properti builder MaterialPageRoute dalam fungsi anonim.

b2f84ff91b0e1396.png Panggil Navigator.push, seperti yang ditunjukkan di bawah, untuk mendorong rute ke stack Navigator. IDE akan melaporkan adanya kode yang tidak valid, tetapi Anda akan memperbaikinya di bagian berikutnya.

void _pushSaved() {
  Navigator.of(context).push(
  );
}

Selanjutnya, Anda akan menambahkan MaterialPageRoute beserta builder-nya. Untuk saat ini, tambahkan kode yang membuat baris ListTile. Metode divideTiles() dari ListTile akan menambahkan spasi horizontal di antara setiap ListTile. Variabel divided menampung baris terakhir yang dikonversi menjadi daftar oleh fungsi praktis, yaitu toList().

b2f84ff91b0e1396.pngTambahkan kode, seperti yang ditunjukkan dalam cuplikan kode berikut:

  void _pushSaved() {
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        // NEW lines from here...
        builder: (BuildContext context) {
          final tiles = _saved.map(
            (WordPair pair) {
              return ListTile(
                title: Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );
          final divided = ListTile.divideTiles(
            context: context,
            tiles: tiles,
          ).toList();

          return Scaffold(
            appBar: AppBar(
              title: Text('Saved Suggestions'),
            ),
            body: ListView(children: divided),
          );
        }, // ...to here.
      ),
    );
  }

Properti builder akan mengirimkan Scaffold yang berisi panel aplikasi untuk rute baru bernama SavedSuggestions. Isi dari rute baru terdiri dari ListView yang berisi baris ListTiles. Setiap baris dipisahkan oleh satu pemisah.

b2f84ff91b0e1396.png Lakukan hot reload pada aplikasi. Favoritkan beberapa pilihannya, lalu ketuk ikon daftar di panel aplikasi. Rute baru yang berisi favorit akan muncul. Perhatikan bahwa Navigator menambahkan tombol "Back" ke panel aplikasi. Anda tidak harus menerapkan Navigator.pop secara eksplisit. Ketuk tombol kembali untuk kembali ke rute asal.

iOS - Rute utama

iOS - Rute saran tersimpan

Terjadi masalah?

Jika aplikasi tidak berjalan dengan semestinya, Anda dapat menggunakan kode di link berikut untuk membuatnya kembali normal.

Pada langkah ini, Anda akan memodifikasi tema aplikasi. Tema mengontrol tampilan dan nuansa aplikasi. Anda dapat menggunakan tema default, yang bergantung pada perangkat fisik atau emulator, atau menyesuaikan temanya untuk mencerminkan branding Anda.

Anda dapat dengan mudah mengubah tema aplikasi dengan mengonfigurasi class ThemeData. Aplikasi akan menggunakan tema default, tetapi Anda akan mengubah warna primer aplikasi menjadi putih.

b2f84ff91b0e1396.png Ubah warnanya dalam class MyApp:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      theme: ThemeData(          // Add the 3 lines from here...
        primaryColor: Colors.white,
      ),                         // ... to here.
      home: RandomWords(),
    );
  }
}

b2f84ff91b0e1396.png Lakukan hot reload pada aplikasi. Seluruh latar belakang sekarang berwarna putih, termasuk panel aplikasi.

Sebagai latihan, gunakan ThemeData untuk mengubah aspek UI lainnya. Class Colors di library Material menyediakan banyak konstanta warna yang dapat Anda coba terapkan. Hot reload membuat eksperimen dengan UI menjadi cepat dan mudah.

Android

iOS

Terjadi masalah?

Jika Anda keluar jalur, gunakan kode dari link berikut guna melihat kode untuk aplikasi final.

Anda telah menulis aplikasi Flutter interaktif yang dijalankan di iOS dan Android dengan melakukan hal berikut:

  • Menulis kode Dart
  • Menggunakan hot reload untuk siklus pengembangan yang lebih cepat
  • Menerapkan widget stateful, menambahkan interaktivitas ke aplikasi Anda
  • Membuat rute dan menambahkan logika untuk berpindah antara rute asal dan rute baru
  • Mempelajari cara mengubah tampilan UI aplikasi menggunakan tema

Pelajari Flutter SDK lebih lanjut melalui referensi berikut:

Referensi lainnya mencakup:

Selain itu, ikuti komunitas Flutter.