1. Giriş
Materyal Tasarım ve Material Flutter kitaplığı nedir?
Materyal Tasarım, cesur ve güzel dijital ürünler oluşturmaya yönelik bir sistemdir. Stil, markalama, etkileşim ve hareket tutarlı bir dizi ilke ve bileşen altında birleştirildiğinde ürün ekipleri en büyük tasarım potansiyellerini gerçekleştirebilir.
Materyal Flutter kitaplığı, uygulamalar ve platformlar arasında tutarlı bir kullanıcı deneyimi oluşturmak için Materyal Tasarım bileşenlerinin (kısaca MDC) tasarımlarını uygulayan Flutter widget'ları içerir. Materyal Tasarım sistemi geliştikçe bu bileşenler, Google'ın ön uç geliştirme standartlarına uygun olarak piksel açısından mükemmel ve tutarlı bir uygulama sağlamak için güncellenir.
Bu codelab'de, Material Flutter'ın çeşitli bileşenlerini kullanarak bir giriş sayfası oluşturacaksınız.
Ne oluşturacaksınız?
Bu codelab, Shrine adlı bir uygulama oluşturma konusunda size yol gösterecek dört codelab'den ilkidir. Shrine, giyim ve ev eşyaları satan bir e-ticaret uygulamasıdır. Bu örnekte, Material Flutter kullanarak bileşenleri herhangi bir markayı veya stili yansıtacak şekilde nasıl özelleştirebileceğiniz gösterilmektedir.
Bu codelab'de, Shrine için aşağıdakileri içeren bir giriş sayfası oluşturacaksınız:
- Shrine'ın logosunun resmi
- Uygulamanın adı (Shrine)
- Biri kullanıcı adı, diğeri şifre girmek için kullanılan iki metin alanı
- İki düğme
Android | iOS |
|
|
Bu kod laboratuvarındaki Material Flutter bileşenleri ve alt sistemleri
- Metin alanı
- Düğme
- Mürekkep dalgası (dokunma etkinlikleri için görsel geri bildirim biçimi)
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
Başlangıç projesi material-components-flutter-codelabs-101-starter/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 101-starter
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 Shrine'ın giriş sayfası için başlangıç kodu cihazınızda çalışıyor olmalıdır. Shrine logosunu ve hemen altında "Shrine" adını görmelisiniz.
Android | iOS |
|
|
Koda göz atalım.
login.dart Widget'ları
login.dart uygulamasını açın. Şunları içermelidir:
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
const LoginPage({Key? key}) : super(key: key);
@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: const EdgeInsets.symmetric(horizontal: 24.0),
children: <Widget>[
const SizedBox(height: 80.0),
Column(
children: <Widget>[
Image.asset('assets/diamond.png'),
const SizedBox(height: 16.0),
const Text('SHRINE'),
],
),
const SizedBox(height: 120.0),
// TODO: Remove filled: true values (103)
// TODO: Add TextField widgets (101)
// TODO: Add button bar (101)
],
),
),
);
}
}
Bu dosyanın bir import ifadesi ve iki yeni sınıf içerdiğini unutmayın:
importifadesi, bu dosyada Material kitaplığının kullanılmasına olanak tanır.LoginPagesınıfı, simülatörde gösterilen sayfanın tamamını temsil eder._LoginPageStatesınıfınınbuild()işlevi, kullanıcı arayüzümüzdeki tüm widget'ların nasıl oluşturulacağını kontrol eder.
4. TextField widget'ları ekleme
Başlamak için giriş sayfamıza, kullanıcıların kullanıcı adlarını ve şifrelerini girecekleri iki metin alanı ekleyeceğiz. Kayar etiket görüntüleyen ve dokunma dalgalanmasını etkinleştiren TextField widget'ını kullanacağız.
Bu sayfa, temel olarak alt öğelerini kaydırılabilir bir sütunda düzenleyen bir ListView ile yapılandırılmıştır. Aşağıya metin alanları ekleyelim.
TextField widget'larını ekleme
const SizedBox(height: 120.0) simgesinden sonra iki yeni metin alanı ve bir boşluk ekleyin.
// TODO: Add TextField widgets (101)
// [Name]
TextField(
decoration: const InputDecoration(
filled: true,
labelText: 'Username',
),
),
// spacer
const SizedBox(height: 120.0),
// [Password]
TextField(
decoration: const InputDecoration(
filled: true,
labelText: 'Password',
),
obscureText: true,
),
Metin alanlarının her birinde InputDecoration widget'ı alan bir decoration: alanı vardır. filled: alanı, metin alanının arka planının hafifçe doldurulması anlamına gelir. Bu sayede kullanıcılar, metin alanının dokunma veya dokunma hedef alanını tanıyabilir. İkinci metin alanının obscureText: true değeri, kullanıcının yazdığı girişi otomatik olarak madde işaretleriyle değiştirir. Bu, şifreler için uygundur.
Anında Yeniden Yükleme işlemi gerçekleştiren klavye kısayolu (command + s) ile projenizi kaydedin.
Kullanıcı adı ve şifre için iki metin alanı içeren bir sayfa görmelisiniz. Kayan etiket animasyonuna göz atın:
Android | iOS |
|
|
5. Düğme ekleme
Ardından, giriş sayfamıza "İptal" ve "Sonraki" olmak üzere iki düğme ekleyeceğiz. İki tür düğme widget'ı kullanacağız: TextButton ve ElevatedButton.
OverflowBar'ı ekleme
Metin alanlarından sonra OverflowBar öğesini ListView öğesinin alt öğelerine ekleyin:
// TODO: Add button bar (101)
OverflowBar(
alignment: MainAxisAlignment.end,
// TODO: Add a beveled rectangular border to CANCEL (103)
children: <Widget>[
// TODO: Add buttons (101)
],
),
OverflowBar, alt öğelerini bir satırda düzenler.
Düğmeleri ekleme
Ardından, OverflowBar'nın children listesine iki düğme ekleyin:
// TODO: Add buttons (101)
TextButton(
child: const 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)
ElevatedButton(
child: const Text('NEXT'),
onPressed: () {
// TODO: Show the next page (101)
},
),
Projenizi kaydedin. Son metin alanının altında iki düğme görünür:
Android | iOS |
|
|
OverflowBar, düzenleme işini sizin yerinize yapar. Düğmeleri yatay olarak konumlandırır, böylece yan yana görünürler.
Bir düğmeye dokunulduğunda başka bir şey olmaksızın mürekkep dalgalanması animasyonu başlatılır. İptal düğmesinin metin alanlarını temizlemesi ve sonraki düğmesinin ekranı kapatması için anonim onPressed: işlevlerine işlevsellik ekleyelim:
TextEditingController'lar ekleme
Metin alanlarının değerlerinin temizlenebilmesi için metinlerini kontrol etmek üzere TextEditingControllers ekleyeceğiz.
_LoginPageState sınıfının bildiriminin hemen altına denetleyicileri final değişkenleri olarak ekleyin.
// TODO: Add text editing controllers (101)
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();
İlk metin alanının controller: alanında _usernameController değerini ayarlayın:
// TODO: Add TextField widgets (101)
// [Name]
TextField(
controller: _usernameController,
İkinci metin alanının controller: alanında _passwordController değerini ayarlayın:
// TODO: Add TextField widgets (101)
// [Password]
TextField(
controller: _passwordController,
Edit onPressed
TextButton'ın onPressed: işlevinde her denetleyiciyi temizlemek için bir komut ekleyin:
// TODO: Clear the text fields (101)
_usernameController.clear();
_passwordController.clear();
Projenizi kaydedin. Artık metin alanlarına bir şeyler yazdığınızda iptal'e bastığınızda her alan tekrar temizleniyor.
Bu giriş formu iyi durumda. Kullanıcılarımızı Shrine uygulamasının geri kalanına yönlendirelim.
Çarpıcı
Bu görünümü kapatmak için bu sayfayı (Flutter'ın rota dediği) gezinme yığınından kaldırmamız (veya silmemiz) gerekir.
ElevatedButton'ın onPressed: işlevinde, Navigator'dan en son rotayı çıkarın:
// TODO: Show the next page (101)
Navigator.pop(context);
Son olarak, home.dart uygulamasını açın ve Scaffold bölümünde resizeToAvoidBottomInset ayarını false olarak belirleyin:
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,
);
Bu işlem, klavyenin görünümünün ana sayfanın veya widget'larının boyutunu değiştirmemesini sağlar.
İşte bu kadar. Projenizi kaydedin. "Sonraki"yi tıklayın.
Başardınız!
Android | iOS |
|
|
Bu ekran, MDC-102'de üzerinde çalışacağınız bir sonraki codelab'imizin başlangıç noktasıdır.
6. Tebrikler!
Metin alanları ve düğmeler ekledik. Düzen koduyla neredeyse hiç ilgilenmemiz gerekmedi. Flutter için Material Components, çok sayıda stil içerir ve ekrana neredeyse zahmetsizce yerleştirilebilir.
Sonraki adımlar
Metin alanları ve düğmeler, Material System'deki iki temel bileşendir ancak daha birçok bileşen vardır. Diğerlerini Material Components widget kataloğunda inceleyebilirsiniz.
Alternatif olarak, Flutter için MDC-102'de ele alınan bileşenler hakkında bilgi edinmek üzere MDC-102: Materyal Tasarım Yapısı ve Düzeni'ne gidin.