MDC-103 Flutter: Tema Material dengan Warna, Bentuk, Ketinggian, dan Jenis (Flutter)

logo_components_color_2x_web_96dp.png

Komponen Material (MDC) membantu developer menerapkan Desain Material. Dibuat oleh tim engineer dan desainer UX di Google, MMD memiliki banyak komponen UI yang indah dan fungsional serta tersedia untuk Android, iOS, web dan Flutter.material.io/develop

Kini Anda dapat menggunakan MDC untuk lebih menyesuaikan gaya unik aplikasi Anda. Ekspansi yang baru-baru ini dilakukan oleh Desain Material meningkatkan fleksibilitas desainer dan developer untuk mengekspresikan merek produk mereka.

Dalam codelab MDC-101 dan MDC-102, Anda menggunakan Komponen Material (MDC) untuk membuat dasar-dasar aplikasi bernama Shrine, sebuah aplikasi e-commerce yang menjual pakaian dan perlengkapan rumah. Aplikasi ini berisi alur pengguna yang dimulai dengan layar login, kemudian mengarahkan pengguna ke layar utama yang menampilkan produk.

Yang akan Anda buat

Dalam codelab ini, Anda akan menyesuaikan aplikasi Shrine menggunakan:

  • Warna
  • Tipografi
  • Ketinggian
  • Bentuk
  • Tata Letak

7f521db8a762f5ee.png 7ac46e5cb6b1e064.png

Komponen dan subsistem MDC-Flutter di codelab ini

  • Tema
  • Tipografi
  • Ketinggian
  • Daftar gambar

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 4 langkah di atas, Anda dapat kembali ke codelab. Untuk menyelesaikan codelab ini, cukup instal Flutter untuk satu platform (Android atau iOS).

Pastikan 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

Dengan menjalankan flutter upgrade, flutter doctor. akan otomatis dijalankan. Jika penginstalan Flutter ini baru saja dilakukan dan tidak memerlukan upgrade, jalankan flutter doctor secara manual. Anda akan mendapat 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 melakukan pengembangan untuk iOS).

 flutter doctor

Pertanyaan Umum (FAQ)

Melanjutkan dari MDC-102?

Jika Anda sudah menyelesaikan MDC-102, kode Anda seharusnya siap untuk codelab ini. Lewati ke langkah: Mengubah warna.

Memulai dari awal?

Mendownload aplikasi codelab awal

Download aplikasi awal

Aplikasi awal terletak di direktori material-components-flutter-codelabs-103-starter_and_102-complete/mdc_100_series.

...atau meng-clone 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 103-starter_and_102-complete

Menyiapkan project

Petunjuk berikut menganggap Anda menggunakan Android Studio (IntelliJ).

Membuka project

1. Buka Android Studio.

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

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

4. Jika diminta:

  • Instal update platform dan plugin 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 Anda juga dapat melakukan pengujian di Simulator atau perangkat iOS jika Anda telah menginstal Xcode.

1. Pilih perangkat atau emulator. Jika emulator Android belum berjalan, 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 dropdown Flutter Device Selection di bagian atas layar editor Anda, lalu pilih perangkat (misalnya, iPhone SE atau Android SDK yang dibuat untuk <version>).
  • Tekan ikon Play ().

Berhasil! Anda seharusnya melihat halaman login Shrine dari codelab sebelumnya di simulator atau emulator.

Android

iOS

Klik "Next" untuk melihat halaman beranda dari codelab sebelumnya.

Android

iOS

Skema warna yang merepresentasikan merek Shrine telah dibuat, dan desainer ingin Anda mengimplementasikan skema warna tersebut ke aplikasi Shrine

Untuk memulai, mari kita impor warna tersebut ke project kita.

Membuat colors.dart

Buat file dart baru di lib bernama colors.dart. Impor Komponen Material dan tambahkan nilai const Color:

import 'package:flutter/material.dart';

const kShrinePink50 = Color(0xFFFEEAE6);
const kShrinePink100 = Color(0xFFFEDBD0);
const kShrinePink300 = Color(0xFFFBB8AC);
const kShrinePink400 = Color(0xFFEAA4A4);

const kShrineBrown900 = Color(0xFF442B2D);

const kShrineErrorRed = Color(0xFFC5032B);

const kShrineSurfaceWhite = Color(0xFFFFFBFA);
const kShrineBackgroundWhite = Colors.white;

Palet warna kustom

Tema warna ini telah dibuat oleh desainer dengan warna kustom (ditampilkan di gambar di bawah). Tema warna ini berisi warna yang telah dipilih dari merek Shrine dan diterapkan ke Material Theme Editor, yang telah memperluasnya untuk membuat palet yang lebih lengkap. (Warna ini bukan dari palet warna Material 2014.)

Material Theme Editor telah mengatur warna-warna tersebut menjadi shade yang diberi label secara numerik, meliputi label 50, 100, 200, .... hingga 900 untuk setiap warna. Shrine hanya menggunakan shade 50, 100, dan 300 dari swatch merah muda dan 900 dari swatch cokelat.

wlq5aH94SfU47pcalUqOSK57OCX4HnJJTpMVzVrBZreUOE-CrkX2akKrnTbgwf6BQNMBi-nn16jpgQHDeQZixTCeh1A0qTXcxDMTcc2-e6uJg0LPjkXWEVlV7cwS0U1naqpnHToEIQ 1HLdzGp-TIhg2ULijquMw_KQdk18b080CVQN_oECAhiCnFI11Nm3nbcsCIXvZBXULMajAW9NEmGZ7iR_j-eEF6NiODuaike96xVpLwUIzfV4dzTg9uQHsmNG-BDTOd04e6_eRLs--Q

Setiap parameter widget berwarna dipetakan ke warna dari skema ini. Misalnya, warna untuk dekorasi kolom teks ketika menerima input secara aktif harus berupa Warna primer tema. Jika warna tersebut tidak dapat diakses (mudah dilihat pada latar belakangnya), gunakan PrimaryVariant sebagai gantinya.

Variasi ini dibuat untuk Pedoman Material 2014 dan masih tersedia di pedoman (artikel Color System ) dan MDC-Flutter saat ini. Untuk mengaksesnya dalam kode, cukup panggil warna dasar kemudian shade-nya (umumnya nilai ratusan). Misalnya, Merah Muda 400 diambil dengan perintah: Colors.pink[400].

Anda dapat menggunakan palet ini untuk desain dan kode Anda. Jika sudah memiliki warna yang spesifik untuk merek Anda, Anda dapat membuat palet harmonis Anda sendiri menggunakan alat pembuatan palet atau Material Theme Editor.

Setelah memiliki warna yang ingin digunakan, kita dapat menerapkannya ke UI. Kita akan melakukan ini dengan menyetel nilai widget ThemeData yang kita terapkan ke instance MaterialApp di bagian atas hierarki widget kita.

Menyesuaikan ThemeData.light()

Flutter menyertakan beberapa tema bawaan. Salah satunya adalah tema terang. Kita akan menyalin tema terang dan mengubah nilainya agar sesuai untuk aplikasi kita, bukan membuat widget ThemeData dari awal.

Mari kita impor colors.dart di app.dart.

import 'colors.dart';

Kemudian, tambahkan hal berikut ke app.dart di luar cakupan class ShrineApp:

// TODO: Build a Shrine Theme (103)
final ThemeData _kShrineTheme = _buildShrineTheme();

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    accentColor: kShrineBrown900,
    primaryColor: kShrinePink100,
    buttonTheme: base.buttonTheme.copyWith(
      buttonColor: kShrinePink100,
      colorScheme: base.colorScheme.copyWith(
        secondary: kShrineBrown900,
      ),
    ),
    buttonBarTheme: base.buttonBarTheme.copyWith(
      buttonTextTheme: ButtonTextTheme.accent,
    ),
    scaffoldBackgroundColor: kShrineBackgroundWhite,
    cardColor: kShrineBackgroundWhite,
    textSelectionColor: kShrinePink100,
    errorColor: kShrineErrorRed,
    // TODO: Add the text themes (103)
    // TODO: Add the icon themes (103)
    // TODO: Decorate the inputs (103)
  );
}

Sekarang, tetapkan theme: di bagian akhir fungsi build() ShrineApp (di widget MaterialApp) agar menjadi tema baru kita:

  // TODO: Add a theme (103)
  theme: _kShrineTheme, // New code

Klik tombol Play. Layar login Anda sekarang akan terlihat seperti ini:

Android

iOS

Dan layar utama Anda akan terlihat seperti ini:

Android

iOS

Selain perubahan warna, desainer juga telah memberi kita tipografi khusus untuk digunakan. ThemeData Flutter mencakup 3 tema teks. Setiap tema teks adalah koleksi gaya teks, seperti "headline" dan "title". Kita akan menggunakan beberapa gaya untuk aplikasi kita dan mengubah beberapa nilainya.

Menyesuaikan tema teks

Untuk mengimpor font ke project, font harus ditambahkan ke file pubspec.yaml.

Di pubspec.yaml, tambahkan kode berikut langsung setelah tag flutter::

  # TODO: Insert Fonts (103)
  fonts:
    - family: Rubik
      fonts:
        - asset: fonts/Rubik-Regular.ttf
        - asset: fonts/Rubik-Medium.ttf
          weight: 500

Sekarang Anda dapat mengakses dan menggunakan font Rubik.

Memecahkan masalah file pubspec

Anda mungkin mengalami error saat menjalankan pub get jika Anda memotong dan menempel deklarasi di atas. Jika Anda mengalami error, mulai dengan menghapus spasi kosong di awal dan menggantinya dengan indentasi 2 spasi. (Dua spasi sebelumnya

fonts:

, empat spasi sebelumnya

family: Rubik

, dan seterusnya.)

Jika Anda melihat Mapping values are not allowed here, periksa indentasi baris yang memiliki masalah dan indentasi baris di atasnya.

Di login.dart, ubah kode berikut di dalam Column():

Column(
  children: <Widget>[
    Image.asset('assets/diamond.png'),
    SizedBox(height: 16.0),
    Text(
      'SHRINE',
      style: Theme.of(context).textTheme.headline5,
    ),
  ],
)

Di app.dart, tambahkan kode berikut setelah _buildShrineTheme():

// TODO: Build a Shrine Text Theme (103)
TextTheme _buildShrineTextTheme(TextTheme base) {
  return base.copyWith(
    headline5: base.headline5.copyWith(
      fontWeight: FontWeight.w500,
    ),
    headline6: base.headline6.copyWith(
        fontSize: 18.0
    ),
    caption: base.caption.copyWith(
      fontWeight: FontWeight.w400,
      fontSize: 14.0,
    ),
    bodyText1: base.bodyText1.copyWith(
      fontWeight: FontWeight.w500,
      fontSize: 16.0,
    ),
  ).apply(
    fontFamily: 'Rubik',
    displayColor: kShrineBrown900,
    bodyColor: kShrineBrown900,
  );
}

Tindakan ini mengambil TextTheme dan mengubah tampilan headline, judul, dan teks.

Menerapkan fontFamily dengan cara ini akan menerapkan perubahan hanya ke nilai skala tipografi yang ditentukan di copyWith() (headline, judul, teks).

Untuk beberapa font, kita menyetel fontWeight kustom. Widget FontWeight memiliki nilai ratusan. Di font, w500 (ketebalan 500) biasanya medium dan w400 biasanya reguler.

Menggunakan tema teks baru

Tambahkan tema berikut ke _buildShrineTheme setelah:

// TODO: Add the text themes (103)

textTheme: _buildShrineTextTheme(base.textTheme),
primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),

Klik tombol Stop, kemudian tombol Play.

Teks di layar utama dan layar login terlihat berbeda—beberapa teks menggunakan font Rubik, dan teks lainnya dirender dengan warna cokelat, bukan hitam atau putih.

Android

iOS

Perhatikan bahwa ikon masih berwarna putih. Itu karena ada tema terpisah untuk ikon.

Menggunakan tema ikon utama yang disesuaikan

Tambahkan tema ikon ke fungsi _buildShrineTheme():

    // TODO: Add the icon theme (103)
    primaryIconTheme: base.iconTheme.copyWith(
      color: kShrineBrown900
    ),

Klik tombol Play.

Android

iOS

Ikon cokelat di panel aplikasi.

Menyusutkan teks

Labelnya sedikit terlalu besar.

Di home.dart, ubah children: dari Column terdalam:

// TODO: Change innermost Column (103)
children: <Widget>[
// TODO: Handle overflowing labels (103)

  Text(
    product == null ? '' : product.name,
    style: theme.textTheme.button,
    softWrap: false,
    overflow: TextOverflow.ellipsis,
    maxLines: 1,
  ),
  SizedBox(height: 4.0),
  Text(
    product == null ? '' : formatter.format(product.price),
    style: theme.textTheme.caption,
  ),
  // End new code
],

Menempatkan teks di tengah bawah

Kita ingin menempatkan label di tengah, dan meratakan teks ke bagian bawah setiap kartu, bukan ke bagian bawah setiap gambar.

Pindahkan label ke akhir (bawah) sumbu utama dan ubah ke posisi tengah:

// TODO: Align labels to the bottom and center (103)

  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignment: CrossAxisAlignment.center,

Simpan project.

Android

iOS

Hampir benar, tetapi teks tidak berada di tengah-tengah kartu.

Ubah perataan sumbu silang Column induk:

// TODO: Center items on the card (103)

    crossAxisAlignment: CrossAxisAlignment.center,

Simpan project. Layar utama Anda sekarang akan terlihat seperti ini:

Android

iOS

Terlihat jauh lebih baik.

Memberi tema kolom teks

Anda juga dapat memberi tema dekorasi di kolom teks dengan InputDecorationTheme.

Di app.dart, di metode _buildShrineTheme(), tentukan nilai inputDecorationTheme::

// TODO: Decorate the inputs (103)
inputDecorationTheme: InputDecorationTheme(
  border: OutlineInputBorder(),
),

Saat ini, kolom teks memiliki dekorasi filled. Mari kita hapus. Menghapus filled dan menentukan inputDecorationTheme akan memberikan gaya garis batas untuk kolom teks.

Di login.dart, hapus nilai filled: true:

// Remove filled: true values (103)
TextField(
  controller: _usernameController,
  decoration: InputDecoration(
    // Removed filled: true
    labelText: 'Username',
  ),
),
SizedBox(height: 12.0),
TextField(
  controller: _passwordController,
  decoration: InputDecoration(
    // Removed filled: true
    labelText: 'Password',
  ),
  obscureText: true,
),

Klik tombol Flutter Hot Restart di bawah menu Run (untuk memulai ulang aplikasi dari awal). Layar login Anda akan terlihat seperti ini ketika kolom Username aktif (ketika Anda mengetik di kolom tersebut):

Android

iOS

Mengetik di kolom teks—dekorasi dan placeholder yang mengambang dirender dalam warna primer. Tetapi kita tidak dapat melihatnya dengan mudah. Teks tersebut tidak dapat diakses bagi orang yang kesulitan membedakan piksel dan tidak memiliki kontras warna yang cukup. (Untuk informasi selengkapnya, lihat "Warna yang tersedia" di artikel tentang Warna Pedoman Material.) Mari kita tentukan focusedBorder: di inputDecorationTheme: untuk mengganti Warna aksen untuk kolom teks menjadi PrimaryVariant yang diberikan desainer kepada kita pada tema warna di atas.

Di app.dart, tentukan focusedBorder: di bawah inputDecorationTheme: :

// TODO: Decorate the inputs (103)
inputDecorationTheme: InputDecorationTheme(
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(
      width: 2.0,
      color: kShrineBrown900,
    ),
  ),
  border: OutlineInputBorder(),
),

Selanjutnya, kita akan mengubah properti labelStyle untuk kedua kolom teks untuk mewarnai label dengan tema warna yang diberikan oleh desainer.

Di login.dart, tambahkan labelStyle: di bawah InputDecoration() widget TextField :

TextField(
  controller: _usernameController,
  decoration: InputDecoration(
    labelText: 'Username',
    labelStyle: TextStyle(color: Theme.of(context).accentColor),
  ),
),
SizedBox(height: 12.0),
TextField(
  controller: _passwordController,
  decoration: InputDecoration(
    labelText: 'Password',
    labelStyle: TextStyle(color: Theme.of(context).accentColor),
  ),
),

Agar memiliki gaya label yang berbeda ketika kolom teks difokuskan dan tidak difokuskan, kita ingin menyiapkan FocusNode untuk setiap widget TextField, serta syarat untuk membuat labelStyle menjadi dinamis berdasarkan apakah widget sedang difokuskan atau tidak.

Di login.dart, mari kita lakukan inisialisasi FocusNodes dan warna label yang tidak difokuskan di bagian atas class _LoginPageState, di bawah pengontrol kolom teks:

class _LoginPageState extends State<LoginPage> {
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();
  final _unfocusedColor = Colors.grey[600];
  final _usernameFocusNode = FocusNode();
  final _passwordFocusNode = FocusNode();

Ganti initState dan tambahkan pemroses untuk FocusNodes:

@override
void initState() {
  super.initState();
  _usernameFocusNode.addListener(() {
      setState(() {
        //Redraw so that the username label reflects the focus state
      });
   });
  _passwordFocusNode.addListener(() {
      setState(() {
        //Redraw so that the password label reflects the focus state
      });
   });
}

Terakhir, tambahkan properti focusNode: di dalam widget TextField dan tambahkan syarat untuk labelStyle: di bawah InputDecoration():

TextField(
  controller: _usernameController,
  decoration: InputDecoration(
    labelText: 'Username',
    labelStyle: TextStyle(
        color: _usernameFocusNode.hasFocus
           ? Theme.of(context).accentColor
           : _unfocusedColor),
  ),
  focusNode: _usernameFocusNode,
),
SizedBox(height: 12.0),
TextField(
  controller: _passwordController,
  decoration: InputDecoration(
    labelText: 'Password',
    labelStyle: TextStyle(
        color: _passwordFocusNode.hasFocus
           ? Theme.of(context).accentColor
           : _unfocusedColor),
  ),
  focusNode: _passwordFocusNode,
),

Klik tombol Play.

Android

iOS

Setelah Anda memberikan gaya pada halaman dengan warna dan tipografi yang cocok dengan Shrine, mari kita lihat kartu yang menampilkan produk Shrine. Saat ini, kartu diletakkan di atas permukaan putih di samping navigasi situs.

Menyesuaikan ketinggian Kartu

Di home.dart, tambahkan nilai elevation: ke Kartu:

// TODO: Adjust card heights (103)

    elevation: 0.0,

Simpan project.

Android

iOS

Anda telah menghapus bayangan di bawah kartu.

Mari kita ubah ketinggian komponen di layar login untuk melengkapinya.

Mengubah ketinggian tombol NEXT

Ketinggian default untuk RaisedButtons adalah 2. Mari kita ubah ketinggiannya menjadi lebih tinggi.

Di login.dart, tambahkan nilai elevation: ke RaisedButton NEXT:

RaisedButton(
  child: Text('NEXT'),
  elevation: 8.0, // New code

Klik tombol Flutter Hot Restart di bawah menu Run (untuk memulai ulang aplikasi dari awal). Layar login Anda sekarang akan terlihat seperti ini:

Android

iOS

Shrine memiliki gaya geometrik yang keren, yang menentukan elemen dengan bentuk persegi delapan atau persegi panjang. Mari kita terapkan pemberian gaya pada bentuk pada kartu di layar utama, serta kolom serta tombol teks di layar login.

Mengubah bentuk kolom teks di layar login

Di app.dart, impor file batas sudut yang dipotong khusus:

import 'supplemental/cut_corners_border.dart';

Masih di app.dart, tambahkan bentuk dengan sudut yang dipotong ke tema dekorasi kolom teks:

// TODO: Decorate the inputs (103)
inputDecorationTheme: InputDecorationTheme(
  focusedBorder: CutCornersBorder(
    borderSide: BorderSide(
      width: 2.0,
      color: kShrineBrown900,
    ),
  ),
  border: CutCornersBorder(), // Replace code
),

Mengubah bentuk tombol di layar login

Di login.dart, tambahkan batas persegi panjang yang miring ke tombol CANCEL:

FlatButton(
  child: Text('CANCEL'),
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(7.0)),
  ),

FlatButton tidak memiliki bentuk yang terlihat, jadi mengapa kita menambahkan bentuk batas? Agar animasi ripple terikat dengan bentuk yang sama saat disentuh.

Sekarang tambahkan bentuk yang sama ke tombol NEXT:

RaisedButton(
  child: Text('NEXT'),
  elevation: 8.0,
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(7.0)),
  ),

Untuk mengubah bentuk semua tombol, kita juga dapat mengupdate buttonTheme di app.dart. Ini merupakan tantangan bagi orang yang mempelajarinya.

Klik tombol Flutter Hot Restart di bawah menu Run (untuk memulai ulang aplikasi dari awal):

Android

iOS

Selanjutnya, mari kita ubah tata letak untuk menampilkan kartu dalam ukuran dan rasio lebar tinggi yang berbeda, sehingga setiap kartu terlihat unik dari kartu lain.

Mengganti GridView dengan AsymmetricView

Kita sudah menulis file untuk tata letak asimetris.

Di home.dart, ubah keseluruhan file dengan kode berikut:

import 'package:flutter/material.dart';

import 'model/products_repository.dart';
import 'model/product.dart';
import 'supplemental/asymmetric_view.dart';

class HomePage extends StatelessWidget {
  // TODO: Add a variable for Category (104)

  @override
  Widget build(BuildContext context) {
  // TODO: Return an AsymmetricView (104)
  // TODO: Pass Category variable to AsymmetricView (104)
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print('Menu button');
          },
        ),
        title: Text('SHRINE'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              print('Search button');
            },
          ),
          IconButton(
            icon: Icon(Icons.tune),
            onPressed: () {
              print('Filter button');
            },
          ),
        ],
      ),
      body: AsymmetricView(products: ProductsRepository.loadProducts(Category.all)),
    );
  }
}

Simpan project.

Android

iOS

Sekarang produk di-scroll secara horizontal dalam pola seperti anyaman. Selain itu, teks status bar (waktu dan jaringan di bagian atas) kini berwarna hitam. Hal ini karena kita mengubah kecerahan AppBar menjadi terang, brightness: Brightness.light

Warna adalah cara efektif untuk mengekspresikan merek Anda, dan perubahan kecil pada warna dapat berpengaruh besar pada pengalaman pengguna Anda. Untuk mengujinya, mari kita lihat tampilan Shrine jika skema warna mereknya benar-benar berbeda.

Mengubah warna

Di colors.dart, tambahkan kode berikut:

const kShrinePurple = Color(0xFF5D1049);
const kShrineBlack = Color(0xFF000000);

Di app.dart, ubah fungsi _buildShrineTheme() dan _buildShrineTextTheme menjadi berikut:

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    primaryColor: kShrinePurple,
    buttonTheme: base.buttonTheme.copyWith(
      buttonColor: kShrinePurple,
      textTheme: ButtonTextTheme.primary,
      colorScheme: ColorScheme.light().copyWith(primary: kShrinePurple)
    ),
    scaffoldBackgroundColor: kShrineSurfaceWhite,
    textTheme: _buildShrineTextTheme(base.textTheme),
    primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
    accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
    primaryIconTheme: base.iconTheme.copyWith(
      color: kShrineSurfaceWhite
    ),
    inputDecorationTheme: InputDecorationTheme(
      focusedBorder: CutCornersBorder(
        borderSide: BorderSide(
          width: 2.0,
          color: kShrinePurple,
        ),
      ),
      border: CutCornersBorder(),
    ),
  );
}

TextTheme _buildShrineTextTheme(TextTheme base) {
  return base.copyWith(
    headline5: base.headline5.copyWith(
      fontWeight: FontWeight.w500,
    ),
    headline6: base.headline6.copyWith(
        fontSize: 18.0,
    ),
    caption: base.caption.copyWith(
      fontWeight: FontWeight.w400,
      fontSize: 14.0,
    ),
    bodyText1: base.bodyText1.copyWith(
      fontWeight: FontWeight.w500,
      fontSize: 16.0,
    ),
  ).apply(
    fontFamily: 'Rubik',
  );
}

Di login.dart, warnai logo berlian dengan warna hitam:

Image.asset(
  'assets/diamond.png',
  color: kShrineBlack, // New code
),

Di home.dart, ubah kecerahan AppBar menjadi gelap:

brightness: Brightness.dark,

Simpan project. Sekarang, tema baru akan muncul.

Android

iOS

Android

iOS

Hasilnya sangat berbeda. Mari kita kembalikan kode warna sebelum melanjutkan ke 104.

Download MDC-104 starter code

Sekarang, Anda telah membuat aplikasi yang menyerupai spesifikasi desain dari desainer Anda.

Langkah berikutnya

Sekarang Anda telah menggunakan komponen MDC berikut: tema, tipografi, ketinggian, dan bentuk. Anda dapat mempelajari lebih banyak komponen dan subsistem di library MDC-Flutter.

Temukan file-file di direktori supplemental untuk mempelajari cara kita membuat scroll horizontal, petak tata letak asimetris.

Bagaimana jika desain rencana aplikasi Anda berisi elemen yang tidak memiliki komponen di library MDC? Di MDC-104: Komponen Lanjutan Desain Material, kami menunjukkan cara membuat komponen kustom menggunakan library MDC untuk mencapai tampilan yang spesifik.

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