Merhabalar.

Bir önceki dersimizde resimlerle çalışmayı öğrenmiştik.

Container, Column ve Row içinde resimlerle çalışırken sıklıkla yaşadığımız sorunlardan biri static olarak yükseklik ve genişlik verdiğimiz widgetların farklı cihazlarda farklı sonuçlar vereceği gerçeğidir.

Örneğin 200’e 200 değer verilmiş bir resim. Mobil cihazınızda belki iyi gözükecekken bu uygulama Tablet gibi bir cihazda açıldığında çok küçük görünecektir.

İşte bu tür şeyler önüne geçebilmek için static değerler vermek yerine cihaza göre şekillenmesini sağlayacak fonksiyonları ya da widgetları kullanmamız gerek.

Şimdi yan yan 4 tane resim ögesi yerleştirdiğimiz bir uygulama yazalım.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.white10,
      ),
      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: Container(
          margin: EdgeInsets.only(top: 20),
          alignment: Alignment.topCenter,
          height: 100,
          child: IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(3),
                    child: Image.asset("lib/08_Images/Images/flutter1.jpg",),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(3),
                    child: Image.asset("lib/08_Images/Images/flutter1.jpg"),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(3),
                    child: Image.asset("lib/08_Images/Images/flutter1.jpg"),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(3),
                    child: Image.asset("lib/08_Images/Images/flutter1.jpg"),
                  ),
                ),
              ],
            ),
          ),
        ),
        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,
        ),
      ),
    ),
  );
}
body: Container(
          margin: EdgeInsets.only(top: 20),
          alignment: Alignment.topCenter,
          height: 100,
          child: IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(3),
                    child: Image.asset("lib/08_Images/Images/flutter1.jpg",),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(3),
                    child: Image.asset("lib/08_Images/Images/flutter1.jpg"),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(3),
                    child: Image.asset("lib/08_Images/Images/flutter1.jpg"),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(3),
                    child: Image.asset("lib/08_Images/Images/flutter1.jpg"),
                  ),
                ),
              ],
            ),
          ),
        ),

Bizi ilgilendiren kısım burası.

IntrinsicHeight Yazdığımız Row’u sarmalamalıdır. Sadece bir child özelliği vardır. Bu child’a row verilir.

Böylelikle eşit yükseklikte değerler elde edilir.

Row içinde Containerları da Expanded ile sarmalarsak nesneler uygulamanın sınırları dışına çıkamaz.

Böylelikle istediğimizi yapabilmiş olduk.


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.