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. Ürün ekipleri stil, marka, etkileşim ve hareketi tutarlı bir ilke ve bileşen kümesi altında bir araya getirerek en büyük tasarım potansiyellerini gerçekleştirebilir.
Material Flutter kitaplığı, uygulamalar ve platformlar genelinde tutarlı bir kullanıcı deneyimi sunmak için Materyal Tasarım bileşenlerinin (kısaca MDC) tasarımlarını uygulayan Flutter widget'larını içerir. Materyal Tasarım sistemi geliştikçe bu bileşenler, Google'ın kullanıcı arabirimi geliştirme standartlarına uyarak tutarlı bir piksel mükemmelliğinde 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.
Oluşturacaklarınız
Bu codelab, giysi ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı uygulamayı geliştirme konusunda size rehberlik edecek dört codelab'den ilkidir. Bu kurs, Material Flutter kullanarak bileşenleri her marka veya stili yansıtacak şekilde nasıl özelleştirebileceğinizi gösterecek.
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ı (Yer)
- Biri kullanıcı adı, diğeri şifre için olmak üzere iki metin alanı
- İki düğme
Android | iOS |
|
|
Bu codelab'deki Material Flutter bileşenleri ve alt sistemleri
- Metin alanı
- Düğme
- Mürekkep dalgası (dokunma etkinlikleri için görsel bir geri bildirim biçimi)
Flutter geliştirme ile ilgili deneyim düzeyinizi nasıl değerlendirirsiniz?
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
Başlangıç projesi material-components-flutter-codelabs-101-starter/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 101-starter
Projeyi açın ve uygulamayı çalıştırın
- Projeyi istediğiniz düzenleyicide açın.
- "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ızda Shrine'ın giriş sayfasının başlangıç kodu çalışıyor olmalıdır. Shrine logosunu ve "Shrine" adını görebilirsiniz. tıklayın.
Android | iOS |
|
|
Koda bakalım.
login.dart içindeki 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)
],
),
),
);
}
}
Bir import ifadesi ve iki yeni sınıf içerdiğine dikkat edin:
importifadesi, bu dosyada Material kitaplığının kullanılmasına izin verir.LoginPagesınıfı, simülasyon aracında görüntülenen 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şturulduğunu kontrol eder.
4. TextField widget'ları ekleme
Başlangıç olarak, kullanıcıların kullanıcı adlarını ve şifrelerini girdikleri giriş sayfamıza iki metin alanı ekleyeceğiz. Kayan bir etiket görüntüleyen ve dokunma dalgasını etkinleştiren Metin Alanı widget'ını kullanacağız.
Bu sayfa, birincil olarak, alt öğelerini kaydırılabilir bir sütunda düzenleyen bir ListView öğesiyle yapılandırılır. Aşağıya metin alanları yerleştirelim.
TextField widget'larını ekleme
const SizedBox(height: 120.0) ifadesinden 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ı bulunur. filled: alanı, kullanıcıların metin alanındaki dokunma veya dokunma hedefi alanını tanımasına yardımcı olmak için metin alanının arka planının hafif doldurulacağı anlamına gelir. İkinci metin alanının obscureText: true değeri, kullanıcının girdiği giriş işaretlerini otomatik olarak madde işaretleriyle değiştirir. Bu işlem, şifreler için uygun olur.
Sıkı Yeniden Yükleme işlemi gerçekleştiren projenizi kaydedin (Komut + s tuş vuruşuyla).
Kullanıcı Adı ve Şifre için iki metin alanı içeren bir sayfa görmeniz gerekir. Kayan etiket animasyonuna göz atın:
Android | iOS |
|
|
5. Düğme ekle
Daha sonra, giriş sayfamıza iki düğme ekleyeceğiz: "İptal" ve "Sonraki"yi seçin. TextButton ve ElevatedButton olmak üzere iki tür düğme widget'ı kullanacağız.
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 üst üste düzenler.
Düğmeleri ekleme
Sonra OverflowBar öğesinin 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öreceksiniz:
Android | iOS |
|
|
Düzen işini OverflowBar sizin yerinize halleder. Düğmeleri yatay olarak konumlandırarak yan yana görünürler.
Bir düğmeye dokunduğunuzda başka hiçbir şey meydana gelmeden bir mürekkep dalgası animasyonu başlatılır. İptal düğmesinin metin alanlarını temizlemesi, sonraki düğmesinin ekranı kapatması için anonim onPressed: işlevlerine işlevsellik ekleyelim:
TextEditingControllers ekleme
Metin alanlarının temizlenebilmesi için değerlerini kontrol etmek için TextEditingControllers öğelerini 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 bir 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 şey yazdığınızda, iptal düğmesine bastığınızda her alan tekrar temizlenir.
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'da yönlendirme olarak adlandırılır) gezinme yığınının genişletmek (veya kaldırmak) istiyoruz.
ElevatedButton'ın onPressed: işlevinde, Gezgin'deki en son rotayı açın:
// TODO: Show the next page (101)
Navigator.pop(context);
Son olarak, Scaffold içinde home.dart uygulamasını açın ve resizeToAvoidBottomInset değerini false olarak ayarlayın:
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, 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. Devam edin ve "İleri"yi tıklayın.
Başardınız!
Android | iOS |
|
|
Bu ekran, MDC-102'de üzerinde çalışacağınız bir sonraki codelab'imiz için başlangıç noktasıdır.
6. Tebrikler!
Metin alanları ve düğmeler ekledik ve düzen kodunu düşünmek zorunda kalmadık. Flutter'ın Materyal Bileşenleri, geniş bir stile sahiptir ve ekrana neredeyse zahmetsizce yerleştirilebilir.
Sonraki adımlar
Metin alanları ve düğmeler, Materyal Sistemi'nin iki temel bileşenidir, ancak daha pek çok bileşen vardır. Diğerlerini Materyal Bileşenleri widget kataloğunda da keşfedebilirsiniz.
Alternatif olarak Flutter için MDC-102'de ele alınan bileşenler hakkında bilgi edinmek için MDC-102: Material Design Structure and Layout'a (MDC-102: Materyal Tasarım Yapısı ve Düzen) gidin.