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.
