MDC-103 Flutter: Renk, Şekil, Yükseklik ve Tür ile Malzeme Teması

1. Giriş

Artık Material Flutter'ı kullanarak uygulamalarınızın özgün bir tarza sahip. Materyal Tasarım'ın kısa süre önce genişlemesi, tasarımcılara ve geliştiricilere ürünlerinin markalarını ifade etmeleri için daha fazla esneklik sağlıyor.

MDC-101 ve MDC-102 codelab'lerinde, giysi ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı uygulamanın temellerini oluşturmak için Material Flutter'ı kullandınız. Bu uygulama, giriş ekranıyla başlayan ve ardından kullanıcıyı ürünlerin gösterildiği bir ana ekrana yönlendiren bir kullanıcı işlemleri akışı içeriyor.

Oluşturacaklarınız

Bu codelab'de Shrine uygulamasını aşağıdakileri kullanarak özelleştireceksiniz:

• Renk
• Yazı biçimi
• Rakım
• Şekil
• Düzen

Bu codelab'deki Material Flutter bileşenleri ve alt sistemleri

• Temalar
• Yazı biçimi
• Rakım
• Resim listesi

2. Flutter geliştirme ortamınızı kurma

Bu laboratuvarı tamamlamak için iki yazılıma ihtiyacınız vardır: Flutter SDK'sı ve düzenleyici.

Codelab'i aşağıdaki cihazlardan birini kullanarak çalıştırabilirsiniz:

• Bilgisayarınıza bağlı ve Geliştirici moduna ayarlanmış fiziksel bir Android veya iOS cihaz.
• iOS simülatörü (Xcode araçlarının yüklenmesini gerektirir).
• Android Emülatör (Android Studio'da kurulum gerektirir).
• Tarayıcı (hata ayıklama için Chrome gereklidir).
• Windows, Linux veya macOS masaüstü uygulaması olarak Uygulamayı dağıtmayı planladığınız platformda gerçekleştirmeniz gerekir. Bu nedenle, bir Windows masaüstü uygulaması geliştirmek istiyorsanız uygun derleme zincirine erişmek için Windows'da geliştirme yapmanız gerekir. İşletim sistemine özgü gereksinimler docs.flutter.dev/desktop sayfasında ayrıntılı olarak açıklanmıştır.

3. codelab başlangıç uygulamasını indirme

MDC-102'den mi devam ediyorsunuz?

MDC-102'yi tamamladıysanız kodunuz bu codelab'de kullanılmaya hazır olmalıdır. Şu adıma geçin: Renkleri değiştirme.

Sıfırdan mı başlıyorsunuz?

Starter codelab uygulamasını indirin

file_downloadBaşlangıç uygulamasını indirin

Başlangıç uygulaması material-components-flutter-codelabs-103-starter_and_102-complete/mdc_100_series dizininde bulunur.

...veya GitHub'dan klonlayın

Bu codelab'i GitHub'dan klonlamak için şu komutları çalıştırın:

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

Projeyi açın ve uygulamayı çalıştırın

1. Projeyi istediğiniz düzenleyicide açın.
2. "Uygulamayı çalıştırma" talimatlarını izleyin Başlarken: Seçtiğiniz düzenleyici için uygulamayı test edin.

Başarıyla gerçekleştirildi. Cihazınızdaki önceki codelab'lerde bulunan Tapınak giriş sayfasını göreceksiniz.

"Sonraki"yi tıklayın. ürün sayfasını görüntüleyin.

4. Renkleri değiştirme

Shrine markasını temsil eden bir renk şeması oluşturuldu ve tasarımcı bu renk şemasını Shrine uygulaması genelinde uygulamanızı istiyor

Başlamak için bu renkleri projemize aktaralım.

colors.dart Oluştur

lib uygulamasında colors.dart adlı yeni bir dart dosyası oluşturun. material.dart verilerini içe aktarın ve const Color değer ekleyin:

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;

Özel renk paleti

Bu renk teması, bir tasarımcı tarafından özel renklerle oluşturulmuştur (aşağıdaki resimde gösterilmektedir). Shrine'ın markasından seçilen ve daha zengin bir palet oluşturacak şekilde genişletilen Materyal Tema Düzenleyici'ye uygulanan renkler içerir. (Bu renkler, 2014 Material renk paletlerinden değil.)

Materyal Tema Düzenleyici, bunları sayısal olarak etiketlenmiş tonlar halinde düzenlemiştir. Bunlar her bir rengin 50, 100, 200, .... ila 900. etiketini içerir. Shrine yalnızca pembe numunenin 50, 100 ve 300 ve kahverengi numunenin 900 tonlarını kullanır.

Widget'ların her renkli parametresi, bu şemalardaki bir renkle eşlenir. Örneğin, aktif olarak giriş alırken metin alanının süslemelerinin rengi temanın Birincil rengi olmalıdır. Bu renge erişilemiyorsa (arka planı üzerinde kolayca görülmesi kolaysa) bunun yerine başka bir renk kullanın.

Artık kullanmak istediğimiz renkler olduğuna göre bunları kullanıcı arayüzüne uygulayabiliriz. Bunu, widget hiyerarşimizin üst kısmındaki MaterialApp örneğine uyguladığımız ThemeData widget'ının değerlerini ayarlayarak yapacağız.

ThemeData.light() işlevini özelleştirme

Flutter'da birkaç yerleşik tema bulunur. Açık tema bunlardan biridir. Bir ThemeData widget'ını sıfırdan oluşturmak yerine, açık temayı kopyalayıp değerleri değiştirerek uygulamamıza uygun hale getireceğiz.

colors.dart dosyasını app.dart. uygulamasına aktaralım

import 'colors.dart';

Ardından, aşağıdakini ShrineApp sınıfının kapsamı dışında app.dart dosyasına ekleyin:

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

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light(useMaterial3: true);
  return base.copyWith(
    colorScheme: base.colorScheme.copyWith(
      primary: kShrinePink100,
      onPrimary: kShrineBrown900,
      secondary: kShrineBrown900,
      error: kShrineErrorRed,
    ),
    // TODO: Add the text themes (103)
    // TODO: Decorate the inputs (103)</