1. Giriş
| Material Components (MDC), geliştiricilerin Materyal Tasarım'ı uygulamasına yardımcı olur. Google'daki bir mühendis ve kullanıcı deneyimi tasarımcısı ekibi tarafından oluşturulan MDC, düzinelerce güzel ve işlevsel kullanıcı arayüzü bileşeni içerir. Android, iOS, web ve Flutter.material.io/develop için kullanılabilir. |
Artık uygulamalarınızın kendine özgü stilini her zamankinden daha fazla özelleştirmek için Material Flutter'ı kullanabilirsiniz. Material Design'ın yakın zamanda genişletilmesi, tasarımcılara ve geliştiricilere ürünlerinin markasını ifade etme konusunda daha fazla esneklik sunuyor.
MDC-101 ve MDC-102 adlı codelab'lerde, giyim ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı uygulamanın temel özelliklerini oluşturmak için Material Flutter'ı kullandınız. Bu uygulama, giriş ekranıyla başlayan ve kullanıcıyı ürünlerin gösterildiği bir ana ekrana yönlendiren bir kullanıcı akışı içeriyor.
Ne oluşturacaksınız?
Bu codelab'de, Shrine uygulamasını şu yöntemlerle özelleştireceksiniz:
- Renk
- Yazı biçimi
- Rakım
- Şekil
- Düzen
Android | iOS |
|
|
|
|
Bu kod laboratuvarındaki Material Flutter bileşenleri ve alt sistemleri
- Temalar
- Yazı biçimi
- Rakım
- Resim listesi
Flutter geliştirme deneyiminizi nasıl değerlendirirsiniz?
2. Flutter geliştirme ortamınızı kurma
Bu laboratuvarı tamamlamak için iki yazılım gerekir: Flutter SDK ve bir düzenleyici.
Codelab'i aşağıdaki cihazlardan herhangi 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üklenmesi gerekir).
- Android Emulator (Android Studio'da kurulum gerektirir).
- Tarayıcı (hata ayıklama için Chrome gereklidir).
- Windows, Linux veya macOS masaüstü uygulaması olarak. Dağıtmayı planladığınız platformda geliştirme yapmanız gerekir. Bu nedenle, bir Windows masaüstü uygulaması geliştirmek istiyorsanız uygun derleme zincirine erişmek için Windows'ta geliştirme yapmanız gerekir. docs.flutter.dev/desktop adresinde ayrıntılı olarak ele alınan işletim sistemine özgü gereksinimler vardır.
3. Codelab başlangıç uygulamasını indirin
MDC-102'den devam mı ediyorsunuz?
MDC-102'yi tamamladıysanız kodunuz bu codelab'de kullanılmaya hazırdır. Renkleri değiştirme adımına gidin.
Sıfırdan mı başlıyorsunuz?
Başlangıç Codelab uygulamasını indirin
Başlangıç uygulaması material-components-flutter-codelabs-103-starter_and_102-complete/mdc_100_series dizininde bulunur.
...veya GitHub'dan kopyalayın
Bu codelab'i GitHub'dan klonlamak için aşağıdaki 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çıp uygulamayı çalıştırın.
- Projeyi tercih ettiğiniz düzenleyicide açın.
- Seçtiğiniz düzenleyici için Başlarken: Test sürüşü bölümündeki "Uygulamayı çalıştırma" talimatlarını uygulayın.
Başarılı aktarım Cihazınızda önceki codelab'lerdeki Shrine giriş sayfasını görmeniz gerekir.
Android | iOS |
|
|
Ürün sayfasını görmek için "Sonraki"yi tıklayın.
Android | iOS |
|
|
4. Renkleri değiştirme
Shrine markasını temsil eden bir renk şeması oluşturuldu ve tasarımcı, bu renk şemasını Shrine uygulamasında uygulamanızı istiyor.
Başlamak için bu renkleri projemize aktaralım.
Oluştur colors.dart
lib içinde colors.dart adlı yeni bir Dart dosyası oluşturun. material.dart değerlerini içe aktarın ve const Color değerlerini 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ı, özel renkler (aşağıdaki resimde gösterilmiştir) kullanan bir tasarımcı tarafından oluşturulmuştur. Bu tema, Shrine'ın markasından seçilen ve Material Theme Editor'a uygulanan renkleri içerir. Material Theme Editor, daha dolu bir palet oluşturmak için bu renkleri genişletmiştir. (Bu renkler 2014 Materyal renk paletlerinden alınmamıştır.)
Material Theme Editor, bunları her rengin 50, 100, 200, ..., 900 etiketleri de dahil olmak üzere sayısal olarak etiketlenmiş tonlar halinde düzenlemiştir. Shrine, pembe renk kartelasında yalnızca 50, 100 ve 300 numaralı tonları, kahverengi renk kartelasında ise 900 numaralı tonu kullanır.
Bir widget'ın her renkli parametresi bu şemalardaki bir renkle eşlenir. Örneğin, aktif olarak giriş alan bir metin alanının süslemelerinin rengi, temanın birincil rengi olmalıdır. Bu renk erişilebilir (arka planında kolayca görülebilir) değilse bunun yerine başka bir renk kullanın.
Kullanmak istediğimiz renkleri belirlediğimize göre bunları kullanıcı arayüzüne uygulayabiliriz. Bunu, widget hiyerarşimizin en üstündeki MaterialApp örneğine uyguladığımız bir ThemeData widget'ının değerlerini ayarlayarak yapacağız.
Customize ThemeData.light()
Flutter'da birkaç yerleşik tema bulunur. Açık tema bunlardan biridir. ThemeData widget'ını sıfırdan oluşturmak yerine, açık temayı kopyalayıp değerleri uygulamamıza göre özelleştireceğiz.
app.dart. konumundaki colors.dart dosyasını içe aktaralım
import 'colors.dart';
Ardından, ShrineApp sınıfının kapsamı dışında app.dart dosyasına aşağıdakileri 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)
);
}
Şimdi ShrineApp'in build() işlevinin (MaterialApp widget'ında) sonundaki theme: değerini yeni temamız olarak ayarlayın:
// TODO: Customize the theme (103)
theme: _kShrineTheme, // New code
Projenizi kaydedin. Giriş ekranınız aşağıdaki gibi görünmelidir:
Android | iOS |
|
|
5. Tipografi ve etiket stillerini değiştirme
Tasarımcı, renk değişikliklerinin yanı sıra kullanmamız için belirli bir tipografi de verdi. Flutter'ın ThemeData'sında 3 metin teması bulunur. Her metin teması, "başlık" ve "başlık" gibi metin stillerinden oluşan bir koleksiyondur. Uygulamamız için birkaç stil kullanıp değerlerden bazılarını değiştireceğiz.
Metin temasını özelleştirme
Yazı tiplerinin projeye aktarılabilmesi için pubspec.yaml dosyasına eklenmesi gerekir.
pubspec.yaml dosyasında, flutter: etiketinden hemen sonra aşağıdakileri ekleyin:
# TODO: Insert Fonts (103)
fonts:
- family: Rubik
fonts:
- asset: fonts/Rubik-Regular.ttf
- asset: fonts/Rubik-Medium.ttf
weight: 500
Artık Rubik yazı tipine erişip bu yazı tipini kullanabilirsiniz.
pubspec.yaml dosyasıyla ilgili sorunları giderme
Yukarıdaki bildirimi kesip yapıştırırsanız pub get komutunu çalıştırırken hatalarla karşılaşabilirsiniz. Hata alırsanız baştaki boşluğu kaldırıp 2 boşluk girintisiyle boşluklarla değiştirerek başlayın. (İki boşluk önce
fonts:
, dört boşluk önce
family: Rubik
vb.)
Değerlerin eşlenmesine burada izin verilmiyor mesajını görüyorsanız sorunlu satırın ve üzerindeki satırların girintisini kontrol edin.
login.dart içinde, Column() bölümünde aşağıdaki bilgileri değiştirin:
Column(
children: <Widget>[
Image.asset('assets/diamond.png'),
const SizedBox(height: 16.0),
Text(
'SHRINE',
style: Theme.of(context).textTheme.headlineSmall,
),
],
)
app.dart alanında, _buildShrineTheme() öğesinden sonra aşağıdakileri ekleyin:
// TODO: Build a Shrine Text Theme (103)
TextTheme _buildShrineTextTheme(TextTheme base) {
return base
.copyWith(
headlineSmall: base.headlineSmall!.copyWith(
fontWeight: FontWeight.w500,
),
titleLarge: base.titleLarge!.copyWith(
fontSize: 18.0,
),
bodySmall: base.bodySmall!.copyWith(
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
bodyLarge: base.bodyLarge!.copyWith(
fontWeight: FontWeight.w500,
fontSize: 16.0,
),
)
.apply(
fontFamily: 'Rubik',
displayColor: kShrineBrown900,
bodyColor: kShrineBrown900,
);
}
Bu, TextTheme alır ve başlıkların, başlıkların ve altyazıların görünümünü değiştirir.
fontFamily öğesini bu şekilde uyguladığınızda değişiklikler yalnızca copyWith() içinde belirtilen tipografi ölçeği değerlerine (başlık, başlık, altyazı) uygulanır.
Bazı yazı tipleri için 100'lük artışlarla özel bir fontWeight ayarlıyoruz: w500 (500 ağırlık) orta, w400 ise normal ağırlığa karşılık geliyor.
Yeni metintemalarını kullanma
Hatadan sonra _buildShrineTheme öğesine aşağıdaki temaları ekleyin:
// TODO: Add the text themes (103)
textTheme: _buildShrineTextTheme(base.textTheme),
textSelectionTheme: const TextSelectionThemeData(
selectionColor: kShrinePink100,
),
Projenizi kaydedin. Bu kez, yazı tiplerini değiştirdiğimiz için uygulamayı da yeniden başlatın (Hot Restart olarak bilinir).
Android | iOS |
|
|
Giriş ve ana ekranlardaki metinler farklı görünüyor. Bazı metinlerde Rubik yazı tipi kullanılırken diğer metinler siyah veya beyaz yerine kahverengi olarak oluşturuluyor. Simgeler de kahverengi olarak oluşturulur.
Metni küçültme
Etiketler çok büyük.
home.dart içinde en içteki sütunun children: değerini değiştirin:
// TODO: Change innermost Column (103)
children: <Widget>[
// TODO: Handle overflowing labels (103)
Text(
product.name,
style: theme.textTheme.button,
softWrap: false,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
const SizedBox(height: 4.0),
Text(
formatter.format(product.price),
style: theme.textTheme.bodySmall,
),
// End new code
],
Metni ortalama ve bırakma
Etiketleri ortalamak ve metni her resmin en altına değil, her kartın en altına hizalamak istiyoruz.
Etiketleri ana eksenin sonuna (altına) taşıyın ve ortalanacak şekilde değiştirin:
// TODO: Align labels to the bottom and center (103)
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
Projenizi kaydedin.
Android | iOS |
|
|
Bu çok daha iyi görünüyor.
Metin alanlarına tema uygulama
Metin alanlarındaki süslemeleri InputDecorationTheme ile temalandırabilirsiniz.
app.dart bölümündeki _buildShrineTheme() yönteminde bir inputDecorationTheme: değeri belirtin:
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: OutlineInputBorder(),
),
Şu anda metin alanlarında filled süslemesi var. Şimdi bu sorunu giderelim. filled öğesini kaldırıp inputDecorationTheme öğesini belirtmek, metin alanlarına ana hat stili verir.
login.dart bölümünde filled: true değerlerini kaldırın:
// Remove filled: true values (103)
TextField(
controller: _usernameController,
decoration: const InputDecoration(
// Removed filled: true
labelText: 'Username',
),
),
const SizedBox(height: 12.0),
TextField(
controller: _passwordController,
decoration: const InputDecoration(
// Removed filled: true
labelText: 'Password',
),
obscureText: true,
),
Çalışır durumda yeniden başlatma. Kullanıcı adı alanı etkin olduğunda (içine yazdığınızda) giriş ekranınız aşağıdaki gibi görünmelidir:
Android | iOS |
|
|
Bir metin alanına yazın. Kenarlıklar ve kayan etiketler birincil renkte oluşturulur. Ancak bunu kolayca göremeyiz. Yeterli renk kontrastına sahip olmayan pikselleri ayırt etmekte zorlanan kullanıcılar bu özelliği kullanamaz. (Daha fazla bilgi için Materyal Tasarım yönergelerindeki Renk ve Erişilebilirlik makalesine bakın.)
app.dart bölümünde, inputDecorationTheme: altında bir focusedBorder: belirtin :
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrineBrown900,
),
),
),
Ardından, inputDecorationTheme: bölümünde bir floatingLabelStyle: belirtin :
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrineBrown900,
),
),
floatingLabelStyle: TextStyle(
color: kShrineBrown900,
),
),
Son olarak, kontrastı artırmak için İptal düğmesinde birincil renk yerine ikincil renk kullanılmasını sağlayalım.
TextButton(
child: const Text('CANCEL'),
onPressed: () {
_usernameController.clear();
_passwordController.clear();
},
style: TextButton.styleFrom(
primary: Theme.of(context).colorScheme.secondary,
),
),
Projenizi kaydedin.
Android | iOS |
|
|
6. Yüksekliği ayarlama
Sayfayı Shrine ile eşleşen belirli bir renk ve tipografiyle stilize ettiğinize göre şimdi yüksekliği ayarlayalım.
SONRAKİ düğmesinin yüksekliğini değiştirme
ElevatedButton için varsayılan yükseklik 2'dir. Daha da yükseltelim.
login.dart içinde, NEXT ElevatedButton'a style: değeri ekleyin:
ElevatedButton(
child: const Text('NEXT'),
onPressed: () {
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
foregroundColor: kShrineBrown900,
backgroundColor: kShrinePink100,
elevation: 8.0,
),
),
Projenizi kaydedin.
Android | iOS |
|
|
Kart yüksekliğini ayarlama
Şu anda kartlar, sitenin gezinme bölümünün yanındaki beyaz bir yüzeyde yer alıyor.
home.dart içinde, Kartlar'a elevation: değeri ekleyin:
// TODO: Adjust card heights (103)
elevation: 0.0,
Projeyi kaydedin.
Android | iOS |
|
|
Kartların altındaki gölgeyi kaldırdınız.
7. Şekil ekleme
Shrine, sekizgen veya dikdörtgen şekillerle öğeleri tanımlayan, geometrik bir stile sahiptir. Bu şekil stilini ana ekrandaki kartlarda, giriş ekranındaki metin alanlarında ve düğmelerde uygulayalım.
Giriş ekranındaki metin alanı şekillerini değiştirme
app.dart içinde aşağıdaki dosyayı içe aktarın:
import 'supplemental/cut_corners_border.dart';
Hâlâ app.dart içinde, metin alanı dekorasyon temasını, kesilmiş köşeli bir kenarlık kullanacak şekilde değiştirin:
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: CutCornersBorder(),
focusedBorder: CutCornersBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrineBrown900,
),
),
floatingLabelStyle: TextStyle(
color: kShrineBrown900,
),
),
Giriş ekranında düğme şekillerini değiştirme
login.dart bölümünde, İPTAL düğmesine eğimli dikdörtgen kenarlık ekleyin:
TextButton(
child: const Text('CANCEL'),
onPressed: () {
_usernameController.clear();
_passwordController.clear();
},
style: TextButton.styleFrom(
foregroundColor: kShrineBrown900,
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
),
),
),
TextButton'ın görünür bir şekli yok. O zaman neden kenarlık şekli ekleyelim? Bu nedenle, dokunulduğunda dalgalanma animasyonu aynı şekle bağlıdır.
Şimdi de AYRINTILAR düğmesine aynı şekli ekleyin:
ElevatedButton(
child: const Text('NEXT'),
onPressed: () {
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
foregroundColor: kShrineBrown900,
backgroundColor: kShrinePink100,
elevation: 8.0,
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
),
),
),
Tüm düğmelerin şeklini değiştirmek için app.dart içinde elevatedButtonTheme veya textButtonTheme da kullanabiliriz. Bu, öğrenen için bir zorluk olarak bırakılmıştır.
Çalışır durumda yeniden başlatma.
Android | iOS |
|
|
8. Düzeni değiştirme
Ardından, kartları farklı en-boy oranlarında ve boyutlarda gösterecek şekilde düzeni değiştirelim. Böylece her kart diğerlerinden farklı görünür.
GridView'ı AsymmetricView ile değiştirme
Asimetrik düzen için dosyaları zaten yazdık.
home.dart içinde aşağıdaki içe aktarma işlemini ekleyin:
import 'supplemental/asymmetric_view.dart';
_buildGridCards öğesini silip body ile değiştirin:
body: AsymmetricView(
products: ProductsRepository.loadProducts(Category.all),
),
Projeyi kaydedin.
Android | iOS |
|
|
Artık ürünler, dokuma deseninde yatay olarak kaydırılıyor.
9. Başka bir tema deneyin (isteğe bağlı)
Renk, markanızı ifade etmenin güçlü bir yoludur ve renkteki küçük bir değişiklik, kullanıcı deneyiminizi büyük ölçüde etkileyebilir. Bunu test etmek için markanın renk düzeni biraz farklı olsaydı Shrine'ın nasıl görüneceğine bakalım.
Renkleri değiştirme
colors.dart alanına aşağıdaki rengi ekleyin:
const kShrinePurple = Color(0xFF5D1049);
app.dart içinde _buildShrineTheme() işlevini aşağıdaki gibi değiştirin:
ThemeData _buildShrineTheme() {
final ThemeData base = ThemeData.light();
return base.copyWith(
colorScheme: base.colorScheme.copyWith(
primary: kShrinePurple,
secondary: kShrinePurple,
error: kShrineErrorRed,
),
scaffoldBackgroundColor: kShrineSurfaceWhite,
textSelectionTheme: const TextSelectionThemeData(
selectionColor: kShrinePurple,
),
appBarTheme: const AppBarTheme(
foregroundColor: kShrineBrown900,
backgroundColor: kShrinePink100,
),
inputDecorationTheme: const InputDecorationTheme(
border: CutCornersBorder(),
focusedBorder: CutCornersBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrinePurple,
),
),
floatingLabelStyle: TextStyle(
color: kShrinePurple,
),
),
);
}
Çalışır durumda yeniden başlatma. Yeni tema artık görünmelidir.
Android | iOS |
|
|
Android | iOS |
|
|
Sonuç çok farklı! app.dart's _buildShrineTheme değerini bu adımdan önceki haline geri döndürelim. Alternatif olarak 104'ün başlangıç kodunu indirebilirsiniz.
10. Tebrikler!
Bu noktaya kadar, tasarımcınızın tasarım spesifikasyonlarına benzeyen bir uygulama oluşturdunuz.
Sonraki adımlar
Artık aşağıdaki Material Flutter temalarını, tipografilerini, yüksekliklerini ve şekillerini kullanabilirsiniz. Material Flutter kitaplığında daha fazla bileşen ve alt sistem keşfedebilirsiniz.
Yatay kaydırmalı, asimetrik düzen ızgarasını nasıl oluşturduğumuzu öğrenmek için supplemental dizinindeki dosyaları inceleyin.
Planladığınız uygulama tasarımında kitaplıkta bileşenleri olmayan öğeler varsa ne olur? MDC-104: Material Advanced Components (MDC-104: Material Gelişmiş Bileşenleri) kursunda, istenen görünümü elde etmek için Material Flutter kitaplığını kullanarak özel bileşenlerin nasıl oluşturulacağı gösterilmektedir.