MDC-101 Flutter: Dasar-Dasar Komponen Material (MDC) (Flutter)

Apa yang dimaksud dengan Desain Material dan Komponen Material untuk Flutter?

Desain Material adalah sistem untuk membuat produk digital yang tegas dan indah. Dengan menyatukan gaya, branding, interaksi, dan gerakan di bawah kumpulan prinsip dan komponen yang konsisten, tim produk dapat memahami potensi desain terbesar mereka.

Komponen Material untuk Flutter (MDC-Flutter) menyatukan desain dan teknik dengan library komponen yang menciptakan pengalaman pengguna yang konsisten di seluruh aplikasi dan platform. Seiring berkembangnya sistem Desain Material, komponen ini diupdate untuk memastikan implementasi pixel-perfect yang konsisten, sesuai dengan standar pengembangan front-end Google. MDC juga tersedia untuk Android, iOS, dan web.

Dalam codelab ini, Anda akan mem-build halaman login menggunakan beberapa komponen MDC Flutter.

Yang akan Anda buat

Codelab ini adalah yang pertama dari empat codelab yang akan memandu Anda mem-build aplikasi bernama Shrine, sebuah aplikasi e-commerce yang menjual pakaian dan perlengkapan rumah. Codlab ini akan mendemonstrasikan cara menyesuaikan komponen agar mencerminkan merek atau gaya apa pun menggunakan MDC-Flutter.

Dalam codelab ini, Anda akan mem-build halaman login untuk Shrine yang berisi:

  • Gambar logo Shrine
  • Nama aplikasi (Shrine)
  • Dua kolom teks, yang pertama untuk memasukkan nama pengguna dan yang kedua untuk sandi
  • Dua tombol

Android

iOS

Komponen MDC dalam codelab ini

  • Kolom teks
  • Tombol
  • Ripple (bentuk visual masukan untuk peristiwa sentuh)

Bagaimana Anda menilai tingkat pengalaman Anda menggunakan pengembangan Flutter?

Pemula Menengah Mahir

Sebelum memulai

Untuk mulai mengembangkan aplikasi seluler dengan Flutter, Anda harus:

  1. Mendownload dan menginstal Flutter SDK.
  2. Mengupdate PATH Anda dengan Flutter SDK.
  3. Menginstal Android Studio dengan plugin Flutter dan Dart, atau editor favorit Anda.
  4. Menginstal emulator Android, simulator iOS (perlu Mac dengan Xcode), atau menggunakan perangkat fisik.

Untuk informasi selengkapnya terkait penginstalan Flutter, lihat Get Started: Install. Untuk menyiapkan editor, lihat Get Started: Set up an editor. Saat menginstal emulator Android, Anda dapat menggunakan opsi default seperti ponsel Pixel 3 dengan Image Sistem terbaru. Tindakan ini disarankan, tetapi tidak diperlukan untuk mengaktifkan akselerasi VM. Setelah menyelesaikan keempat langkah di atas, Anda dapat kembali ke codelab. Untuk menyelesaikan codelab ini, cukup instal Flutter untuk satu platform (Android atau iOS).

Memastikan Flutter SDK Anda berada dalam status yang tepat

Sebelum melanjutkan codelab ini, pastikan SDK Anda berada dalam status yang tepat. Jika Flutter SDK telah diinstal sebelumnya, gunakan flutter upgrade untuk memastikan bahwa SDK berada dalam status terbaru.

 flutter upgrade

flutter doctor. akan otomatis dijalankan saat Anda menjalankan flutter upgrade. Jika ini adalah penginstalan Flutter baru dan tidak memerlukan upgrade, jalankan flutter doctor secara manual. Anda akan menerima laporan jika ada dependensi yang harus diinstal untuk menyelesaikan penyiapan. Anda dapat mengabaikan tanda centang yang tidak relevan bagi Anda (misalnya, Xcode jika Anda tidak bermaksud untuk mengembangkan untuk iOS).

 flutter doctor

Pertanyaan Umum (FAQ)

Download project awal

Project awal terletak di direktori material-components-flutter-codelabs-101-starter/mdc_100_series.

...atau meng-clone codelab dari GitHub

Untuk meng-clone codelab ini dari GitHub, jalankan perintah berikut:

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

Menyiapkan project

Petunjuk berikut menganggap Anda menggunakan Android Studio (IntelliJ).

Membuka project

1. Buka Android Studio.

2. Jika Anda melihat layar sambutan, klik Open an existing Android Studio project.

3 Buka direktori material-components-flutter-codelabs/mdc_100_series, lalu klik Open. Project akan terbuka. Anda dapat mengabaikan error yang muncul di Analisis Dart sampai Anda telah berhasil membuat project tersebut satu kali.

4. Jika diminta:

  • Instal update platform dan plugin apa pun atau FlutterRunConfigurationType.
  • Jika Dart atau Flutter SDK tidak dikonfigurasi, tetapkan jalur Flutter SDK untuk plugin Flutter.
  • Konfigurasikan framework Android.
  • Klik "Get dependencies" atau "Run ‘flutter packages get'".

Lalu mulai ulang Android Studio.

Menjalankan aplikasi awal

Petunjuk berikut menganggap Anda melakukan pengujian di emulator atau perangkat Android, tetapi pengujian juga dapat dilakukan di Simulator atau perangkat iOS jika Anda telah menginstal Xcode.

1. Pilih perangkat atau emulator. Jika emulator Android belum dijalankan, pilih Tools -> Android -> AVD Manager untuk membuat perangkat virtual dan memulai emulator. Jika AVD sudah ada, Anda dapat memulai emulator langsung dari pemilih perangkat di Android Studio, seperti yang ditunjukkan di langkah berikutnya. (Untuk Simulator iOS, jika belum berjalan, luncurkan simulator di mesin pengembangan Anda dengan memilih Flutter Device Selection -> Open iOS Simulator).

2. Mulai aplikasi Flutter Anda:

  • Cari menu drop-down Flutter Device Selection di bagian atas layar editor Anda, lalu pilih perangkatnya (misalnya, iPhone SE atau Android SDK yang dibuat untuk <versi>).
  • Tekan ikon Play ().

Berhasil! Kode awal untuk halaman login Shrine akan berjalan di simulator Anda. Anda akan melihat logo Shrine dan nama "Shrine" tepat di bawahnya.

Android

iOS

Mari kita lihat kodenya.

Widget di login.dart

Buka login.dart. Akan berisi seperti ini:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                SizedBox(height: 16.0),
                Text('SHRINE'),
              ],
            ),
            SizedBox(height: 120.0),
            // TODO: Wrap Username with AccentColorOverride (103)
            // TODO: Remove filled: true values (103)
            // TODO: Wrap Password with AccentColorOverride (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

// TODO: Add AccentColorOverride (103)

Perhatikan bahwa file berisi pernyataan import dan dua class baru:

  • Pernyataan import membawa Komponen Material ke dalam file ini.
  • Class LoginPage merepresentasikan seluruh halaman yang ditampilkan dalam simulator.
  • Fungsi build() class _LoginPageState mengontrol pembuatan semua widget yang ada di UI.

Untuk memulai, kita akan menambahkan dua kolom teks ke halaman login, tempat pengguna memasukkan nama pengguna dan sandi. Kita akan menggunakan widget TextField, yang menampilkan label mengambang dan mengaktifkan ripple sentuh.

Struktur halaman ini dibuat khusus dengan ListView, yang menyusun turunannya di kolom yang dapat di-scroll. Mari kita tempatkan kolom teks di bagian bawah.

Menambahkan widget TextField

Tambahkan dua kolom teks baru dan spasi setelah SizedBox(height: 120.0).

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
SizedBox(height: 12.0),
// [Password]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

Setiap kolom teks memiliki kolom decoration: yang menggunakan widget InputDecoration. Kolom filled: berarti latar belakang kolom teks mudah diisi untuk membantu pengguna mengenali area ketuk atau target sentuh dari kolom teks. Nilai obscureText: true kolom teks kedua secara otomatis mengganti input yang diketik pengguna dengan butir, yang sesuai untuk sandi.

Simpan project Anda (dengan tombol: perintah + s) yang menjalankan hot reload.

Sekarang Anda akan melihat halaman dengan dua kolom teks untuk Nama Pengguna dan Sandi. Lihat animasi label mengambang:

Android

iOS

Selanjutnya, kita akan menambahkan dua tombol ke halaman login: "Cancel" dan "Next". Kita akan menggunakan dua jenis widget tombol MDC: FlatButton (disebut "Text Button" di Pedoman Material) dan RaisedButton (disebut sebagai "Contained Button").

Menambahkan ButtonBar

Setelah kolom teks, tambahkan ButtonBar ke turunan ListView:

// TODO: Add button bar (101)
ButtonBar(
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

ButtonBar menyusun turunannya dalam baris.

Menambahkan tombol

Lalu tambahkan dua tombol ke daftar ButtonBar children:

    // TODO: Add buttons (101)
    FlatButton(
      child: Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    RaisedButton(
      child: Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101)
      },
    ),

Simpan project Anda. Di bawah kolom teks terakhir, Anda akan melihat dua tombol muncul:

Android

iOS

ButtonBar menangani tugas tata letak untuk Anda. Posisi tombol ditempatkan secara horizontal, sehingga muncul bersebelahan, sesuai dengan padding di ButtonTheme saat ini. (Anda dapat mempelajarinya lebih lanjut di codelab MDC-103).

Menyentuh tombol akan memulai animasi ink ripple (efek riak tinta), tanpa memengaruhi hal lain. Mari menambahkan fungsionalitas ke dalam fungsi anonim onPressed:, sehingga tombol batal akan menghapus kolom teks, dan tombol berikutnya akan menutup layar:

Menambahkan TextEditingControllers

Agar nilai kolom teks dapat dihapus, kita akan menambahkan TextEditingControllers untuk mengontrol teksnya.

Tepat di bawah deklarasi class _LoginPageState, tambahkan pengontrol sebagai variabel final.

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

Pada kolom controller: kolom teks pertama, tetapkan _usernameController:

// [Name]
TextField(
  controller: _usernameController,

Pada kolom controller: kolom teks kedua, sekarang tetapkan _passwordController:

// [Password]
TextField(
  controller: _passwordController,

Mengedit onPressed

Tambahkan perintah untuk menghapus setiap pengontrol di fungsi onPressed: FlatButton:

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

Simpan project Anda. Sekarang, saat Anda mengetik sesuatu ke dalam kolom teks, Anda tidak perlu lagi menghapus setiap kolom.

Formulir login ini tampak bagus. Mari tingkatkan tindakan pengguna agar menjelajah ke bagian aplikasi Shrine lainnya.

Pop

Untuk menutup tampilan ini, kita sebaiknya memunculkan (atau menghapus) halaman ini (yang disebut Flutter sebagai rute) dari stack navigasi.

Dalam fungsi onPressed: RaisedButton, muncul rute terbaru dari Navigator:

        // TODO: Show the next page (101)
        Navigator.pop(context);

Terakhir, buka home.dart dan tetapkan resizeToAvoidBottomInset ke false di Scaffold:

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

Tindakan ini akan memastikan bahwa tampilan keyboard tidak mengubah ukuran halaman beranda atau widgetnya.

Selesai. Simpan project. Lanjutkan dan klik "Next".

Anda berhasil!

Android

iOS

Layar ini adalah titik awal untuk codelab berikutnya, yang akan Anda kerjakan di MDC-102.

Kita telah menambahkan beberapa tombol serta kolom teks dan hampir tidak perlu mempertimbangkan kode tata letak. Komponen Material untuk Flutter dilengkapi dengan banyak gaya dan dapat ditempatkan di layar dengan cukup mudah.

Langkah berikutnya

Tombol dan kolom teks adalah dua komponen inti dalam Sistem Material, tetapi sebenarnya masih banyak lagi. Anda juga dapat menjelajahi widget lainnya di library Komponen Material Flutter.

Atau, buka MDC-102: Tata Letak dan Struktur Desain Material untuk mempelajari komponen yang dicakup dalam MDC-102 untuk Flutter.

Codelab berikutnya

Saya dapat menyelesaikan codelab ini dengan upaya dan dalam durasi waktu yang wajar

Sangat setuju Setuju Netral Tidak setuju Sangat tidak setuju

Saya ingin terus menggunakan Komponen Material pada masa mendatang

Sangat setuju Setuju Netral Tidak setuju Sangat tidak setuju