Merhabalar.

AppBar widget’ının geri kalan özelliklerine bakacağız bu yazımda.

Bir önceki yazımızda yazdığımız kodların üzerine devam edeceğiz.

excludeHeaderSemantics Özelliği
Başlığın üstbilgi Semantiğiyle sarılıp sarılmayacağını belirler. Bool değer alır. Varsayılan değeri false'dur.

iconTheme Özelliği

Bu özellik AppBar'a yerleştirdiğimiz iconların özelliklerini ayarlamamızı sağlar.

iconTheme: IconThemeData(
            color: Colors.amber,
            size: 25,
            opacity: 0.5,
          ) ,

shadowColor Özelliği

AppBar gölgesinin rengini belirler.
shadowColor: Colors.blue,

shape Özelliği

AppBar’ın şeklini değiştirmek konusunda bize yardımcı olacaktır. Çok farklı yöntemlerle bu işlem yapılabilir. ShapeBorder tipinde widget dönen her widget değer olarak verilebilir.

 shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(30),
            ),
          ),

textTheme Özelliği

Bu özellik appbar üzerine yazılan text’in tüm özelliklerini değiştirmeye yarar. ThemeData tipinde bir widget geriye döndürür.

Burada text’in boyutuna karar verdik öncelikle headline1 seçtik. Sonra bu değerin özelliklerine gireceğiz. Bu tip geriye TextStyle tipinde widget döner.

textTheme: TextTheme(headline6: TextStyle(color: Colors.blue)),

titleSpacing Özelliği

Bu özellik title’ın harfleri arasındaki uzaklığı belirler. Double değer alır.

titleSpacing: 2.3,

toolbarHeight Özelliği

Appbar’ın yüksekliğini ayarlamak için kullanılır. Double değer alır.

toolbarHeight: 250.0,

toolbarOpacity Özelliği

Bu özellik AppBar’ın saydamlık değerini belirler. Double değer alır. 0 ile 1 arasında değer alır.

toolbarOpacity: 0.6,

AppBar özelliklerimiz bu kadardı.

Kodların Son Hali

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),*/

          automaticallyImplyLeading: true,
          backgroundColor: Colors.black,
          bottomOpacity: 0.5,
          brightness: Brightness.dark,
          // brightness: Brightness.light,
          // centerTitle: true,
          //centerTitle: false,
          excludeHeaderSemantics: true,
          iconTheme: IconThemeData(
            color: Colors.amber,
            size: 25,
            opacity: 0.5,
          ),
          shadowColor: Colors.blue,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(30),
            ),
          ),
          textTheme: TextTheme(headline6: TextStyle(color: Colors.blue)),
          titleSpacing: 10.0,
          toolbarHeight: 150,
          toolbarOpacity: 0.5,

          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,
          ),
        ),
      ),
    ),
  );
}

Widget değer alabilen her özelliği ile AppBar çok farklı şekillere özelleştirilebilir. Bu unutulmamalıdır.

Bir sonraki yazımda görüşmek üzere.


What's Your Reaction?

hate hate
0
hate
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
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.