2 sene ago 2 sene ago

Flutter 0’dan Mobil Uygulama Geliştirme 24 – Scaffold Detaylı İnceleme 1 AppBar Widget

8 min

by Murat Bilginer 2 sene ago2 sene ago

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.

Facebook Tweet Pin Print LinkedIn Email

What's Your Reaction?

hate

fail

fun

geeky

love

lol

omg

win

Posted by Murat Bilginer

21 Şubat 1992 Doğumlu. Endüstri Mühendisi olarak Lisansını 2016 yılında tamamlamıştır. Industryolog Akademi - NGenius oluşumlarının kurucusudur. Şu anda kendi şirketi Brainy Tech ile hem Yazılım Hizmetleri Sunmakta Hem de Online Eğitimler Vermektedir.