Merhabalar.

Yeni bir widget ile devam ediyoruz.

Biz bir önceki derslerimizde column ve row yapılarını görmüştük. Bu yapılar içine eleman alabilirdi.

Ama bir column’un alabileceğinden daha fazla nesne içine yerleştirmeye çalışırsak bir taşma hatası alırdık.

Gelin isterseniz ilk bu taşma olmadan bir Column yazalım.

import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
accentColor: Colors.blueAccent,
),
home: Scaffold(
appBar: AppBar(
title: Text("Brainy Tech"),
elevation: 12,
centerTitle: false,
actions: [
Container(
margin: EdgeInsets.only(right: 5),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.add, size: 25, color: Colors.white),
),
),
Container(
margin: EdgeInsets.only(right: 5),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.airplanemode_active,
size: 25, color: Colors.white),
),
),
Container(
margin: EdgeInsets.only(right: 5),
child: IconButton(
onPressed: () {},
icon:
Icon(Icons.five_g_outlined, size: 25, color: Colors.white),
),
),
],
leading: Icon(
Icons.menu,
size: 25,
color: Colors.amber,
),
shadowColor: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30),
),
),
),
body: Padding(
padding: EdgeInsets.only(top: 3),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.all(8),
padding: EdgeInsets.all(5),
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.centerLeft,
//margin: EdgeInsets.only(left: 20),
child: Icon(
Icons.account_circle_rounded,
size: 50,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(left: 0, right: 20),
alignment: Alignment.centerLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Murat Bilginer",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.left,
),
SizedBox(
height: 10,
),
Text(
"0 000 658 72 50",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.amber),
textAlign: TextAlign.right,
)
],
),
),
Container(
alignment: Alignment.centerRight,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.add,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.edit,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.airplanemode_active,
size: 30, color: Colors.greenAccent),
),
],
),
),
],
),
),
Container(
margin: EdgeInsets.all(8),
padding: EdgeInsets.all(5),
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.centerLeft,
//margin: EdgeInsets.only(left: 20),
child: Icon(
Icons.account_circle_rounded,
size: 50,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(left: 0, right: 20),
alignment: Alignment.centerLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Murat Bilginer",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.left,
),
SizedBox(
height: 10,
),
Text(
"0 000 658 72 50",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.amber),
textAlign: TextAlign.right,
)
],
),
),
Container(
alignment: Alignment.centerRight,
//margin: EdgeInsets.only(right: 10),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.add,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.edit,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.airplanemode_active,
size: 30, color: Colors.greenAccent),
),
],
),
),
],
),
),
Container(
margin: EdgeInsets.all(8),
padding: EdgeInsets.all(5),
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.centerLeft,
//margin: EdgeInsets.only(left: 20),
child: Icon(
Icons.account_circle_rounded,
size: 50,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(left: 0, right: 20),
alignment: Alignment.centerLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Murat Bilginer",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.left,
),
SizedBox(
height: 10,
),
Text(
"0 000 658 72 50",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.amber),
textAlign: TextAlign.right,
)
],
),
),
Container(
alignment: Alignment.centerRight,
//margin: EdgeInsets.only(right: 10),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.add,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.edit,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.airplanemode_active,
size: 30, color: Colors.greenAccent),
),
],
),
),
],
),
),
Container(
margin: EdgeInsets.all(8),
padding: EdgeInsets.all(5),
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.centerLeft,
//margin: EdgeInsets.only(left: 20),
child: Icon(
Icons.account_circle_rounded,
size: 50,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(left: 0, right: 20),
alignment: Alignment.centerLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Murat Bilginer",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.left,
),
SizedBox(
height: 10,
),
Text(
"0 000 658 72 50",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.amber),
textAlign: TextAlign.right,
)
],
),
),
Container(
alignment: Alignment.centerRight,
//margin: EdgeInsets.only(right: 10),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.add,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.edit,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.airplanemode_active,
size: 30, color: Colors.greenAccent),
),
],
),
),
],
),
),
Container(
margin: EdgeInsets.all(8),
padding: EdgeInsets.all(5),
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.centerLeft,
//margin: EdgeInsets.only(left: 20),
child: Icon(
Icons.account_circle_rounded,
size: 50,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(left: 0, right: 20),
alignment: Alignment.centerLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Murat Bilginer",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.left,
),
SizedBox(
height: 10,
),
Text(
"0 000 658 72 50",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.amber),
textAlign: TextAlign.right,
)
],
),
),
Container(
alignment: Alignment.centerRight,
//margin: EdgeInsets.only(right: 10),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.add,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.edit,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.airplanemode_active,
size: 30, color: Colors.greenAccent),
),
],
),
),
],
),
),
],
),
),
bottomNavigationBar: BottomAppBar(
elevation: 20,
child: Container(
alignment: Alignment.bottomCenter,
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(top: Radius.circular(40)),
color: Colors.blueAccent,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
IconButton(
icon: Icon(
Icons.home,
color: Colors.white,
),
onPressed: null),
IconButton(
icon: Icon(
Icons.last_page,
color: Colors.white,
),
onPressed: null),
IconButton(
icon: Icon(
Icons.list,
color: Colors.white,
),
onPressed: null),
IconButton(
icon: Icon(
Icons.contact_phone,
color: Colors.white,
),
onPressed: null),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
debugPrint("Ekle Uygulandı");
},
elevation: 12,
child: Icon(
Icons.add,
size: 30,
),
backgroundColor: Colors.black,
tooltip: "Add",
mini: false,
foregroundColor: Colors.amber,
),
),
),
);
}

Şimdi bir Container daha ekleyip taşmayı görelim.

Container(
margin: EdgeInsets.all(8),
padding: EdgeInsets.all(5),
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.centerLeft,
//margin: EdgeInsets.only(left: 20),
child: Icon(
Icons.account_circle_rounded,
size: 50,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(left: 0, right: 20),
alignment: Alignment.centerLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Murat Bilginer",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.left,
),
SizedBox(
height: 10,
),
Text(
"0 000 658 72 50",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.amber),
textAlign: TextAlign.right,
)
],
),
),
Container(
alignment: Alignment.centerRight,
//margin: EdgeInsets.only(right: 10),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.add,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.edit,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.airplanemode_active,
size: 30, color: Colors.greenAccent),
),
],
),
),
],
),
),

Taşma gerçekleşti. İşte bu türden taşmaları önlemek için biz Expanded widgetını kullanırız.

Column içindeki Ana Containerları Expandend widgetı ile sarıp child özelliğine Container’ı verelim.

Expanded(
child: Container(
margin: EdgeInsets.all(8),
padding: EdgeInsets.all(5),
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.centerLeft,
//margin: EdgeInsets.only(left: 20),
child: Icon(
Icons.account_circle_rounded,
size: 50,
color: Colors.white,
),
),
Container(
margin: EdgeInsets.only(left: 0, right: 20),
alignment: Alignment.centerLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Murat Bilginer",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.left,
),
SizedBox(
height: 10,
),
Text(
"0 000 658 72 50",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.amber),
textAlign: TextAlign.right,
)
],
),
),
Container(
alignment: Alignment.centerRight,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.add,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.edit,
size: 30, color: Colors.greenAccent),
),
Container(
margin: EdgeInsets.all(5),
child: Icon(Icons.airplanemode_active,
size: 30, color: Colors.greenAccent),
),
],
),
),
],
),
),
),

İşte şimdi Expanded sayesinde widgetları taşma olmadan ayarladı.

Containerlarımızın boyunu küçülttüğünü görüyoruz. Nesne sayısını artırırsanız üst üstede bindirse nesneleri taşma olmadan bu alana sığdırmaya çalışacaktır.

Expanded’ın flex özelliği nesnelere ayrılacak alanları belirlemenize yardımcı olur.

Örneğin bütün Expanded widgetlarının flex değerine sırayla 3 6 12 gibi değer vermiş olalım.

Burada toplam alanı totaldw 21 parçaya bölmüş, bunun 3 parçasını 1. ye 6 parçasını 2.’ye 12 parçasına da 3.’yü yerleştirecektir.

Şimdi bunu yapalım.

Bu çok mantıklı bir ayırma olmadı ama böyle yapılabildiğini öğrenmiş olduk.

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.