Menulis aplikasi Flutter pertama Anda, bagian 1

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 membuat aplikasi Flutter seluler yang sederhana. Jika Anda sudah memahami konsep pemrograman dasar dan kode berorientasi objek—seperti variabel, loop, dan kondisional—Anda akan dapat menyelesaikan codelab. Anda tidak harus memiliki pengalaman menggunakan pemrograman web, seluler, atau Dart.

Yang akan Anda pelajari di bagian 1

  • Cara menulis aplikasi Flutter yang terlihat alami di iOS, Android, dan web
  • Struktur dasar aplikasi Flutter
  • Menemukan dan menggunakan paket untuk memperluas fungsi
  • Menggunakan hot reload untuk siklus pengembangan yang lebih cepat
  • Cara menerapkan widget stateful
  • Cara membuat daftar tanpa batas yang dimuat secara lambat

Di bagian 2 codelab ini, Anda akan menambahkan interaktivitas, mengubah tema aplikasi, dan menambahkan kemampuan untuk membuka halaman baru (disebut rute di Flutter).

Yang akan Anda build di bagian 1

Anda akan menerapkan aplikasi sederhana yang membuat nama untuk diusulkan kepada perusahaan startup. Pengguna dapat memilih dan membatalkan pilihannya, sehingga yang disimpan hanya nama terbaik. Kode tersebut menghasilkan 10 nama sekaligus secara lambat. Saat pengguna men-scroll, nama lainnya akan dibuat. Pengguna dapat men-scroll tanpa ada batasan.

GIF animasi berikut menunjukkan cara kerja aplikasi pada tahap penyelesaian:

6556f8b61acd6a89.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.

Anda memerlukan dua software untuk menyelesaikan lab ini—Flutter SDK dan editor. (Codelab mengasumsikan bahwa Anda menggunakan Android Studio, tetapi Anda dapat menggunakan editor pilihan lainnya.)

Anda dapat menjalankan codelab dengan menggunakan perangkat berikut:

  • Perangkat Android atau iOS fisik yang terhubung ke komputer dan disetel ke mode developer
  • Simulator iOS (perlu menginstal alat Xcode)
  • Android Emulator (memerlukan penyiapan di Android Studio)
  • Browser (Chrome diperlukan untuk proses debug)

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 Ganti konten dari lib/main.dart. Hapus semua kode dari lib/main.dart lalu ganti dengan kode berikut, yang menampilkan "Hello World" di bagian tengah layar.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

b2f84ff91b0e1396.png Jalankan aplikasi. Anda akan melihat output Android, iOS, atau web, bergantung pada perangkat yang digunakan.

Android

iOS

cf1e10b838bf60ee.png Pengamatan

  • Contoh ini membuat aplikasi Material. Material adalah bahasa desain visual yang merupakan standar di seluler dan web. Flutter menawarkan berbagai kumpulan widget Material.
  • Metode utama menggunakan notasi panah (=>). Gunakan notasi panah untuk fungsi atau metode satu baris.
  • Aplikasi akan memperluas StatelessWidget, yang menjadikan aplikasi itu sendiri sebagai widget. Di Flutter, hampir semua hal merupakan widget, termasuk perataan, padding, dan tata letak.
  • Widget Scaffold, dari library Material, menyediakan panel aplikasi default, judul, dan properti isi yang menampung hierarki widget untuk layar utama. Subhierarki widget dapat menjadi cukup rumit.
  • Tugas utama widget adalah menyediakan metode build yang menjelaskan cara menampilkan widget sehubungan dengan widget lainnya pada tingkat yang lebih rendah.
  • Isi contoh ini terdiri dari widget Center yang berisi widget turunan Text. Widget Center meratakan subhierarki widgetnya dengan bagian tengah layar.

Pada langkah ini, Anda akan mulai menggunakan paket open source bernama english_words, yang berisi beberapa ribu kata berbahasa Inggris yang paling sering digunakan, plus beberapa fungsi utilitas.

Anda dapat menemukan paket english_words, serta banyak paket open source lainnya, di pub.dev.

b2f84ff91b0e1396.png File pubspec mengelola aset untuk aplikasi Flutter. Di pubspec.yaml, tambahkan english_words: ^4.0.0 (english_words 4.0.0 atau lebih tinggi) ke daftar dependensi:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  english_words: ^4.0.0   # add this line

b2f84ff91b0e1396.png Saat melihat pubspec di tampilan editor Android Studio, klik Packages get. Tindakan ini akan menarik paket ke dalam project Anda. Anda akan melihat tampilan berikut di konsol:

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

Jika dart pub get dijalankan, file pubspec.lock juga akan otomatis dibuat dengan daftar semua paket yang ditarik ke dalam project dan nomor versinya.

b2f84ff91b0e1396.png Di lib/main.dart, impor paket yang baru:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';  // Add this line.

Saat mengetik, Android Studio akan memberi Anda saran library untuk diimpor. Kemudian, string impor akan dirender menjadi berwarna abu-abu, sehingga Anda tahu bahwa library yang diimpor tidak digunakan (sejauh ini).

Selanjutnya, Anda akan menggunakan paket english_words untuk membuat teks, bukan menggunakan "Hello World".

b2f84ff91b0e1396.pngLakukan perubahan berikut:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random(); // Add this line.
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(                       // Drop the const, and
          //child: Text('Hello World'),     // Replace this text...
          child: Text(wordPair.asPascalCase),  // With this text.
        ),
      ),
    );
  }
}

b2f84ff91b0e1396.png Jika aplikasi sedang berjalan, lakukan hot reload e11f6ccd1560a28b.png untuk mengupdate aplikasi yang sedang berjalan. (Dari command line, Anda dapat mengetikkan r untuk melakukan hot reload.) Setiap kali mengklik hot reload atau menyimpan project, Anda akan melihat pasangan kata yang berbeda dan dipilih secara acak di aplikasi yang berjalan. Ini karena pasangan kata dibuat di dalam metode build yang akan dijalankan setiap kali MaterialApp memerlukan rendering, atau saat mengalihkan Platform di Flutter Inspector.

Android

iOS

Terjadi masalah?

Jika aplikasi tidak berjalan dengan semestinya, cari apakah ada salah ketik. Jika perlu, gunakan kode di link berikut untuk membuat aplikasi normal kembali.

Widget stateless tidak dapat diubah, yang berarti propertinya juga tidak dapat diubah—semua nilai bersifat final.

Widget stateful mempertahankan status yang mungkin berubah selama masa aktif widget. Untuk menerapkan widget stateful, diperlukan setidaknya dua class: 1) StatefulWidget yang membuat instance class State. Objek StatefulWidget itu sendiri tidak dapat diubah serta dapat dibuang dan dibuat ulang, tetapi objek State akan tetap ada selama masa aktif widget.

Pada langkah ini, Anda akan menambahkan widget stateful, RandomWords, yang membuat class State-nya, _RandomWordsState. Anda kemudian akan menggunakan RandomWords sebagai turunan di dalam widget stateless MyApp yang sudah ada.

b2f84ff91b0e1396.png Buat kode boilerplate untuk widget stateful.

Kode ini dapat ditempatkan di file bagian mana saja di luar MyApp, tetapi sebaiknya tempatkan di bagian bawah file. Di lib/main.dart, posisikan kursor ke semua kodenya, tekan Return beberapa kali untuk memulai baris baru. Di IDE Anda, mulailah mengetik stful. Editor akan bertanya apakah Anda ingin membuat widget Stateful. Tekan Return untuk menyetujui. Kode boilerplate untuk dua class akan muncul, dan kursor akan diposisikan agar Anda dapat memasukkan nama widget stateless.

b2f84ff91b0e1396.png Masukkan RandomWords sebagai nama widget Anda.

Seperti yang terlihat pada kode di bawah, hanya sedikit hal yang dapat dilakukan widget RandomWords selain membuat class State-nya.

Setelah Anda memasukkan RandomWords sebagai nama widget stateful, IDE akan otomatis memperbarui class State yang menyertainya, dan menamainya _RandomWordsState. Secara default, nama class State diawali dengan garis bawah. Dengan memberikan awalan garis bawah pada ID, Anda akan menegakkan privasi dalam bahasa Dart dan ini merupakan praktik terbaik yang direkomendasikan untuk objek State.

IDE juga akan otomatis memperbarui class status untuk memperluas State<RandomWords>, yang menunjukkan bahwa Anda menggunakan class State generik yang khusus digunakan dengan RandomWords. Sebagian besar logika aplikasi ditempatkan di sini⁠—sehingga status widget RandomWords dapat dipertahankan. Class ini menyimpan daftar pasangan kata yang dibuat, yang akan terus bertambah seiring pengguna men-scroll dan, di bagian 2 lab ini, juga memfavoritkan pasangan kata saat pengguna menambahkan atau menghapusnya dari daftar dengan mengklik ikon hati.

Kedua class sekarang akan terlihat seperti berikut:

class RandomWords extends StatefulWidget {
  @override
  _RandomWordsState createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

b2f84ff91b0e1396.png Perbarui metode build() di _RandomWordsState.

Ganti return Container(); dengan dua baris berikut:

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();      // NEW
    return Text(wordPair.asPascalCase);      // NEW
  }
}

b2f84ff91b0e1396.png Hapus kode pembuatan kata dari MyApp dengan melakukan perubahan berikut:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();  // DELETE

    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          //child: Text(wordPair.asPascalCase), // REPLACE with...
          child: RandomWords(),                 // ...this line
        ),
      ),
    );
  }
}

b2f84ff91b0e1396.png Lakukan hot reload pada aplikasi. Aplikasi akan berperilaku seperti sebelumnya, dan menampilkan pasangan kata setiap kali Anda melakukan hot reload atau menyimpan aplikasi.

Terjadi masalah?

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

Pada langkah ini, Anda akan memperluas _RandomWordsState untuk membuat dan menampilkan daftar pasangan kata. Saat pengguna men-scroll, daftar (ditampilkan dalam widget ListView) akan terus bertambah. Konstruktor factory builder di ListView memungkinkan Anda mem-build tampilan daftar on demand secara lambat.

b2f84ff91b0e1396.png Tambahkan beberapa variabel status ke class _RandomWordsState.

Tambahkan daftar _suggestions untuk menyimpan pasangan kata yang disarankan. Tambahkan juga variabel _biggerFont untuk memperbesar ukuran font.

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

Selanjutnya, Anda akan menambahkan fungsi _buildSuggestions() ke class _RandomWordsState. Metode ini mem-build ListView yang menampilkan pasangan kata yang disarankan.

Class ListView menyediakan properti builder, itemBuilder, yang merupakan builder factory dan fungsi callback yang ditetapkan sebagai fungsi anonim. Dua parameter diteruskan ke fungsinya—BuildContext dan iterator baris, i. Iterator dimulai dari 0 dan akan bertambah setiap kali fungsi dipanggil, sekali untuk setiap pasangan kata yang disarankan. Model ini memungkinkan penambahan daftar saran secara terus-menerus saat pengguna men-scroll.

b2f84ff91b0e1396.png Tambahkan seluruh fungsi _buildSuggestions.

Di class _RandomWordsState, tambahkan fungsi berikut untuk menghapus komentar, jika Anda mau:

  Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(16),
      // The itemBuilder callback is called once per suggested
      // word pairing, and places each suggestion into a ListTile
      // row. For even rows, the function adds a ListTile row for
      // the word pairing. For odd rows, the function adds a
      // Divider widget to visually separate the entries. Note that
      // the divider may be difficult to see on smaller devices.
      itemBuilder: (BuildContext _context, int i) {
        // Add a one-pixel-high divider widget before each row
        // in the ListView.
        if (i.isOdd) {
          return Divider();
        }

        // The syntax "i ~/ 2" divides i by 2 and returns an
        // integer result.
        // For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.
        // This calculates the actual number of word pairings
        // in the ListView,minus the divider widgets.
        final int index = i ~/ 2;
        // If you've reached the end of the available word
        // pairings...
        if (index >= _suggestions.length) {
          // ...then generate 10 more and add them to the
          // suggestions list.
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }

Fungsi _buildSuggestions memanggil _buildRow satu kali per pasangan kata. Fungsi tersebut menampilkan setiap pasangan kata baru dalam ListTile, yang memungkinkan Anda membuat baris yang lebih menarik di bagian 2.

b2f84ff91b0e1396.png Tambahkan fungsi _buildRow ke _RandomWordsState:

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

b2f84ff91b0e1396.png Perbarui metode build untuk _RandomWordsState.

Ubah metode agar menggunakan _buildSuggestions(), bukan memanggil library pembuatan kata secara langsung. ( Scaffold menerapkan tata letak visual untuk Desain Material dasar.)

  @override
  Widget build(BuildContext context) {
    //final wordPair = WordPair.random(); // Delete these...
    //return Text(wordPair.asPascalCase); // ... two lines.

    return Scaffold (                     // Add from here...
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );                                      // ... to here.
  }

b2f84ff91b0e1396.png Perbarui metode build untuk MyApp, dengan mengubah judul, menghapus AppBar, dan mengubah properti beranda ke widget RandomWords.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }

b2f84ff91b0e1396.png Mulai ulang aplikasi. Anda akan tetap melihat daftar pasangan kata terlepas dari seberapa jauh Anda men-scroll.

Android

iOS

Terjadi masalah?

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

Selamat!

Anda telah menyelesaikan bagian 1 dari codelab ini. Jika Anda ingin memperluas aplikasi ini, lanjutkan ke bagian 2 untuk mengetahui cara memodifikasi aplikasi seperti berikut:

  • Menambahkan interaktivitas.
  • Menambahkan kemampuan untuk bernavigasi ke rute baru.
  • Mengubah warna tema.

Jika sudah menyelesaikan bagian 2, aplikasi Anda akan terlihat seperti ini:

7fcab088cd22cff7.gif

Langkah berikutnya yang lain

Pelajari Flutter SDK lebih lanjut dengan melihat referensi berikut:

Referensi lainnya mencakup:

Selain itu, ikuti komunitas Flutter.