Merhabalar.
Bir önceki yazımızda MaterialApp’in home özelliğinin bir widget aldığını ve bu widgetlardan birinin Scaffold olabileceğini söylemiştik. Şimdi detaylıca Scaffoldu inceleyeceğiz.
Scaffold Nedir ?
Scaffold Flutter’ın içinde bulunan bir sınıftır. Bu sınıf Appbar, Bottomnavigationbar, Drawer gibi bir çok özelliği içinde barındırır.
AppBar
- Appbar içinde bulundurduğu actions, leading ve bottom parametleriyle kişiselleştirilebilir, esnek bir yapıya sahiptir.
Actions Özelliği
Bu özellik Appbar’ın sağ tarafını temsil ediyor. Buraya icon, text, buton vb. bileşenler tanımlanabilir. Aşağıdaki örnekte 4 tane ikon tanımlanmıştır.
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
actions: <Widget>[
Icon(Icons.ac_unit, size: 16,),
Icon(Icons.home, size: 16,),
Icon(Icons.mail, size: 16,),
Icon(Icons.edit, size: 16,),
],
),
)
));
}
Şimdi AppBar’ın actions diye bir özelliği var bu sağ tarafa eklenebilecek nesneleri belirliyor. Bir özellik birden fazla çocuk değer alabileceği için değerleri [ ] parantezler içine yazılır.
Icon widget’ını kullanarak hazır iconları ekleyebiliriz. BUnun için yapmamız gereken işlem yukarıdaki gibidir. Icon sınıfının kendine ait özellikleri vardır.
size: iconların boyutunu belirler.
Şu anki haliyle çalıştıralım.
Iconlarımız biraz küçük gibi duruyor. Size’ı artırılabilir.
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
actions: <Widget>[
Icon(Icons.ac_unit, size: 24, color: Colors.amber,),
Icon(Icons.home, size: 24, color: Colors.amber,),
Icon(Icons.mail, size: 24, color: Colors.amber,),
Icon(Icons.edit, size: 24, color: Colors.amber,),
],
),
)
));
}
Yeni bir özellik color sayesinde iconlara renk verdik.
Burada rengi verirken Colors sınıfından renk seçebiliriz. Color sınıfından renk seçme olayı biraz daha farklıdır. İleride bunu da göreceğiz.
Şimdi görüyoruz ki iconlar arası boşluklar pek istediğimiz gibi değil bunu daha güzel bir hale getirebilir miyiz diye bir soru geliyor aklımıza.
Padding diye bir widgetımız var ve bu içine koyulan nesnelerin içeriden kenarlara olan uzaklıklarını ayarlamaya yarar.
Kendisine ait özellikleri vardır.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),
],
),
)));
}
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Padding widget’ı bir tane child özelliği ile bir widget alabilir. Yani böylelikle her iconu bir padding widgetı içine dahil edip kenarlara olan uzaklığını ayarlayabiliriz.
padding diye bir özelliği vardır ve bu özellik değer alırken birkaç yöntem kullanılır. Detaylarına farklı bir yazımızda ele alacağız. Burada sadece yukarıdaki değeri gösterdik. Sağ taraftan 10 pixellik bir boşluk bıraksın istedik.
Geri kalan değerler aynen yazıldı.
Sonra bunu 4 icon için yaptık.
İstediğimize böylelikle ulaşabildik.
Bunu yapabilmek için bir yöntemimiz daha var o da iconları bir container içine yerleştirip, Container’ın margin özelliğini kullanarak dışarıdan nesnelerin birbirleri arasındaki uzaklığı ayarlayacağız. Böylelikle aynı durumu elde etmiş olacağız.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.home,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.edit,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.mail,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.search,
size: 30.0,
color: Colors.white,),
),
/*
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),*/
],
),
)));
}
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.home,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.edit,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.mail,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.search,
size: 30.0,
color: Colors.white,),
),
Burada bu iconlara tıklanma özelliği vs gibi durumlar verilebilir. Ama bu ileri bir konu.
leading Özelliği
Bu özellik sol bölümü yönetmemizi sağlar. Ve bir widget alır.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
leading: Icon(Icons.menu, size: 30),
leadingWidth: 10,
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.home,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.edit,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.mail,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.search,
size: 30.0,
color: Colors.white,),
),
/*
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),*/
],
),
)));
}
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
leading: Icon(Icons.menu, size: 30),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.home,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.edit,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.mail,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.search,
size: 30.0,
color: Colors.white,),
),
/*
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),*/
],
),
)));
}
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
leading: Icon(Icons.menu, size: 30),
leadingWidth: 10,
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.home,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.edit,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.mail,
size: 30.0,
color: Colors.white,),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(Icons.search,
size: 30.0,
color: Colors.white,),
),
/*
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),*/
],
),
)));
}
leading: Icon(Icons.menu, size: 30),
Yine padding margin container gibi widgetlar kullanılarak uzaklık ayarlamaları yapılabilir.
Bu bölüme tanımlanacak bir Column ya da Row ile bir çok nesne alt alta ya da yan yana yerleştirilebilecektir. Tabi bunu sağlıklı bir şekilde yapabilmek için leadingwidth değeri doğru verilmelidir. Örneğimizi aşağıdaki konuyla bütünleştirip yapalım.
leadingWidth Özelliği
Bu Özellik leading kısmının ne kadar genişliğe sahip olacağını belirtir. Böylelikle sol kısımda da pek çok nesne yerleştirilebilir duruma gelir. Koyduğunuz nesneleri verdiğiniz uzunluğa göre ortalayacaktır.
Double değer alır.
leadingWidth: 40,
Burada yine küçükten başlayarak değerler verebilir farkı kendiniz test edebilirsiniz.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
/* leading: Icon(Icons.menu, size: 30),*/
leadingWidth: 80,
leading: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Icon(Icons.menu, size: 30),),
Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Icon(Icons.add, size: 30),),
],
),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),
/*
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),*/
],
),
)));
}
leadingWidth: 80,
leading: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Icon(Icons.menu, size: 30),),
Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Icon(Icons.add, size: 30),),
],
),
Bottom Özelliği
Bu özellik bir PreferredSized sınıfından implemente edilmiş bir widget alır. Burası Header’ın hemen alt kısmıdır. Buraya ne koymak istiyorsanız ona göre şekillendirebilirsiniz.
Örneğin Header ile uygulama içeriği arasında biraz boşluk olsun isteyebilirsiniz oraya bir Container koyup yükseklik verip isterseniz bir renk verip bir alan oluşturabilirsiniz. O container’ın içine istediğinizi koyabilirsiniz.
Ya da şöyle uygulamalar görmüşsünüzdür. Örneğin Whatsapp’in üst menüsü vardır ve sayfalar arasında kolayca geçiş yapmayı sağlar. Bunu burada bir tabbar widget’ı kullanarak yapabilirsiniz.
Hadi yapalım.
Bottom özelliğini kullanabilmek için aşağıdaki kütüphane import edilmelidir.
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
leading: Icon(Icons.menu, size: 30),
bottom: PreferredSize(
child: Container(
color: Colors.orange,
height: 4.0,
),
preferredSize: Size.fromHeight(4.0)),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),
/*
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),*/
],
),
)));
}
bottom: PreferredSize(
child: Container(
color: Colors.orange,
height: 4.0,
),
preferredSize: Size.fromHeight(4.0)),
Bottom ile yapılabilecekleri ayrıca işleyeceğiz.
Elevation Özelliği
Bu özellik Appbar’ın alt gölgelendirmesini yapar. Double değer alır. Ne kadar yüksek değer verirseniz gölge o kadar belirgin ve koyu olacaktır.
elevation: 6.0,
Değeri düşürüp çıkararak değişimi kendiniz test edebilirsiniz.
actionsIconTheme Özelliği
Bu özellik IconThemeData sınıfından bir widget alır. Eğer Appbar içindeki iconlarımızın renklerini standart tema renklerinden farklı yapmak istediğimizde kullanılması tavsiye edilir. IconThemeData 3 tane propertye sahiptir.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
/* leading: Icon(Icons.menu, size: 30),*/
actionsIconTheme: IconThemeData(
color: Colors.amber,
opacity: 10.0,
size: 25,
),
leadingWidth: 80,
leading: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Icon(Icons.menu, size: 30),),
Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Icon(Icons.add, size: 30),),
],
),
bottom: PreferredSize(
child: Container(
color: Colors.orange,
height: 4.0,
),
preferredSize: Size.fromHeight(4.0)),
elevation: 6,
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),
/*
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),*/
],
),
)));
}
actionsIconTheme: IconThemeData(
color: Colors.amber,
opacity: 10.0,
size: 25,
),
backgroundColor Özelliği
Appbar’ın arka plan rengini değiştirir.
backgroundColor: Colors.black,
bottomOpacity Özelliği
Double değer alır. 1 ile 0 arasında bir değer verilmelidir. Bottom’a yerleştirdiğiniz widgetların opaklığını yani saydamlığını belirler.
bottomOpacity: 0.5,
brightness Özelliği
Bu özellik appbarın parlaklık ayarını belirler. dark ve light değerlerini alacaktır.
brightness: Brightness.dark,
brightness: Brightness.light,
centerTitle Özelliği
Eğer Başlığı ortalamak istiyorsanız bu özelliğe true değerini vermeniz gerekir. Default değeri false’dur.
centerTitle: true,
centerTitle: false;
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Hello Appbar"),
/* leading: Icon(Icons.menu, size: 30),*/
leadingWidth: 80,
leading: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Icon(Icons.menu, size: 30),),
Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Icon(Icons.add, size: 30),),
],
),
bottom: PreferredSize(
child: Container(
color: Colors.orange,
height: 4.0,
),
preferredSize: Size.fromHeight(4.0)),
elevation: 6,
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),
/*
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.home,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.edit,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.mail,
size: 30.0,
color: Colors.white,
),
),
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Icon(
Icons.search,
size: 30.0,
color: Colors.white,
),
),*/
],
actionsIconTheme: IconThemeData(
color: Colors.black,
opacity: 10.0,
size: 25,
),
automaticallyImplyLeading: true,
backgroundColor: Colors.black,
bottomOpacity: 0.5,
brightness: Brightness.dark,
// brightness: Brightness.light,
centerTitle: true,
//centerTitle: false,
),
),
),
);
}
Appbar’ın en temel ve sık kullanılan özelliklerini gördük.
Bir sonraki yazımızda geri kalan özelliklerini göreeceğiz.
Görüşmek üzere.