Flutter – Ders 2

Ders2: Uygulama 1-0


Bu uygulamamızda Scaffold bileşenine zemin rengi verildiğinde, herhangi bir renk tanımlaması yapılmayan Container bileşeninin etkisinin görülmediğini görüyoruz.



import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
  home:Scaffold(
    backgroundColor: Colors.red,
    body:Container(),
  )

  ),);
}

Ders2: Uygulama 1-1

Kendi Widgetımızı nasıl oluştururuz? Öncelikle yapıyı öğrenelim.



class WidgetAdi extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return Container();
    }
}



Ders2: Uygulama 1-2

Oluşturduğumuz widget’ı kullanalım. Burada oluşturduğumuz widget adımız BunuCalistir isimli widgetdır. Ayrıca dikkat edilmesi gereken başka şeylerde şunlardır.

Container bileşenine zemin rengi color özelliği ile verilmektedir. Tüm bileşenlere genişlik ve yükseklik değerleri width ve height değerleri ile verilmektedir.

Container bileşenine kenarlarından boşluklar verilmiştir. İç boşluklar padding ile dış boşluklar margin ile verilmiştir.

Ders 2 : Uygulama 2-1 - Container
import 'package:flutter/material.dart';

void main() {
  runApp(
    BunuCalistir(),
  );
}

class BunuCalistir extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        body: Container(
          color: Colors.blueAccent,
          width: 300.0,
          height: 200.0,
          child: Text("Ufuk Hoca"),
          margin: EdgeInsets.all(30.0),
          padding: EdgeInsets.all(10.0),
        ),
      ),
    );
  }
}


Ders 2: Uygulama 1-3: Column ve SafeArea Widget Kullanımı

Column bileşeni ile birden fazla widget sayfada görülebilir olmaktadır. Ayrıca üst üste widgetları göstermek için elverişli bir widgettır.

SafeArea bileşeni ise ekranın kullanılmayan, görülmesi mümkün olmayan alanlarına göre bileşenleri ayarlayan kullanışlı bir widgettır.


import 'package:flutter/material.dart';

void main() {
  runApp(
    BunuCalistir(),
  );
}

class BunuCalistir extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        body: SafeArea(
          child: Column(
            children: [
              Container(
                color: Colors.blueAccent,
                width: 100.0,
                height: 100.0,
                child: Text("Ufuk Hoca"),
                margin: EdgeInsets.all(30.0),
                padding: EdgeInsets.all(10.0),
              ),
              Container(
                color: Colors.brown,
                width: 100.0,
                height: 100.0,
                child: Text("Ufuk Hoca"),
                margin: EdgeInsets.all(30.0),
                padding: EdgeInsets.all(10.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Ders 2- Uygulama-1-4 VerticalDirection özelliği Kullanımı

Bu özellik Column bileşeninde yer almaktadır. Dikeyde yerleşimi belirler. VerticalDirection.up dediğinizde column içerisinde yer alan bileşenler yukarıdan başlayarak yerleştirilir.

import 'package:flutter/material.dart';

void main() {
  runApp(
    BunuCalistir(),
  );
}

class BunuCalistir extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        body: SafeArea(
          child: Column(
            verticalDirection: VerticalDirection.up,
            children: [
              Container(
                color: Colors.blueAccent,
                width: 100.0,
                height: 100.0,
                child: Text("Ufuk Hoca"),
                margin: EdgeInsets.all(30.0),
                padding: EdgeInsets.all(10.0),
              ),
              Container(
                color: Colors.brown,
                width: 100.0,
                height: 100.0,
                child: Text("Ufuk Hoca"),
                margin: EdgeInsets.all(30.0),
                padding: EdgeInsets.all(10.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Ders2 – Uygulama 1-5: mainAxisAlignment – crossAxisAlignment



import 'package:flutter/material.dart';

void main() {
  runApp(
    BunuCalistir(),
  );
}

class BunuCalistir extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        body: SafeArea(
          child: Column(
            verticalDirection: VerticalDirection.up,
            //mainAxisAlignment: MainAxisAlignment.center,
            //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Container(
                color: Colors.blueAccent,
                width: 400.0,
                height: 100.0,
                child: Text("Ufuk Hoca"),
                margin: EdgeInsets.all(3.0),
                padding: EdgeInsets.all(3.0),
              ),
              Container(
                color: Colors.brown,
                width: 100.0,
                height: 100.0,
                child: Text("Ufuk Hoca"),
                margin: EdgeInsets.all(30.0),
                padding: EdgeInsets.all(10.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}


İlk yorum yapan olun

Bir yanıt bırakın

E-posta hesabınız yayımlanmayacak.


*