Flutter 0’dan Mobil Uygulama Geliştirme 31 – Expanded Widget ve Flex Özelliği


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.

Exit mobile version