Kullanıcı Girişi: Flutter Kullanarak Oluşturulmuş Gelişmiş Bir Login Ekranı

Merhaba. Bugünkü yazımda sizlere bir Login Page tasarladım. Bu tasarımla birlikte Flutter’da bulunan bazı Widget’lara da değinmiş olacağız.

Projede lib klasörü içerisine 3 tane klasör oluşturuyorum. Pages, Utilities ve Widgets. Bu şekilde yapmak mecburi değildir ancak kodun okunabilirliği açısından bölmelere ayırmak her zaman daha iyi olacaktır.

Ekranımda arkada bir görsel bulunuyor. Ön tarafta ise beyaz bir kutu içerisinde Text, TextField, Button Widget’larım bulunmakta.

Stack Widget’ı içerisine iki adet Widget yerleştirdim. İlk başta yazmış olduğum Widget ekranın arka tarafında kalmaktadır. Oraya bir görsel koyuyorum. LoginContainerWidget() diye tanımlandırdığım Widget ise ortada bulunan beyaz kutunun kendisi.

Burada telefon boyutunu alıp phoneSize değişkenine atıyorum. Center Widget’ı ile merkeze ortalanacak olan Widget’a Padding ile birlikte sağ ve sol kenarlardan boşluk bırakıyorum. Daha sonra Container Widget’ımı çiziyorum. Genişliğinin ekranın genişliği kadar olmasını istiyorum. Kafa karıştırmaması gereken nokta, telefonun genişliği kadar bir genişlik veriyorum bu Container’a ancak sağ ve soldan atmış olduğumuz Padding’i unutmamak lazım. Container’ımı oluşturduktan sonra içerisine yerleştireceğim Widget’ları InsideContainerItemWidget adlı bir Widget oluşturuyorum ve orada tasarlıyorum.

Yukarıdan aşağı bir şekilde Widget’larımı yerleştireceğim için Column Widget kullanıyorum. Yan yana olmasını isteseydik Row kullanmamız gerekirdi.

Column Widget’ının içerisinde ilk başta Login yazısının yazmasını istediğimiz için LoginTextWidget adında tanımladığım Widget’ı burada kullandım.

Üst kısma yapışık olmasını istemediğim için üst kısmı için bir Padding veriyorum.

Daha sonra TextField Widget’larımı çizmem gerekiyor. İki adet TextField kullandığım için bir tane TextFieldWidget adında Widget oluşturuyorum ve bunu parametrelerle farklı şekilde çizmesini sağlıyorum.

Yazmış olduğum bu Widget 4 adet parametre almak zorunda. TextField Widget’ını kontrol etmek için controller ve focusNode da koydum ancak bu örnekte herhangi bir işlem yaptırmayacağız.

ForgotPasswordWidget’ımız bir buton olacak.

Burada yine köşeleri uyum içerisinde olsun diye kenarlardan Padding verdim. Sağ tarafa konumlanmasını istediğim için de Align Widget’ı ile centerRight yaparak sağ tarafa merkezlemiş oldum.

GestureDetector Widget’ı sarmaladığı Widget’lara buton özelliği verir. Aynı zamanda InkWell Widget’ı da aynı işlevi yapmaktadır. Benim buradaki tercihim GestureDetector Widget’ını kullanmak oldu.

Burada da Login butonumuzu tasarladım. Padding’lerimi verdim ve GestureDetector Widget’ı ile oluşturduğum Container’ı sarmaladım buton özelliğini verdim. Container Widget’ının decoration kısmı ile butonu köşelerden yuvarladım ve gradient bir renk verdim.

LoginButtonWidget’ının alt satırında bulunan Spacer Widget’ı boşluk atar ve arasına girdiği Widget’ların arasında boşluk açar.

SignUp butonumu ise alt sınırdan biraz boşluklu olmasını istediğim için Padding atıyorum ve ekranımı tamamlıyorum.

Genel olarak bu yazımda basit bir Login ekranı tasarlayarak Widget’lara değinmek istedim. Kaynak kodlarına buradan ulaşabilirsiniz. İyi çalışmalar dilerim.