1-) FLUTTER - Widgetler ve özellikleri

Expanded(
  child:

yukarıdaki kod ile taşmaları engelleyebilirsin. sığmayan birşey olursa expanded içine al o halleder xD

alignment: Alignment.center, // çocuğu ortalar

textAlign: TextAlign.center, // yazıyı ortalar

constraints: BoxConstraints(// max min genişlik yükseklik verebiliriz
      maxHeight: 200,
      maxWidth: 200,
      minHeight: 200,
      minWidth: 200),
),

constraints: BoxConstraints.expand(),  // parantini kaplar

margin: EdgeInsets.all(10), // dıştan her taraftan 10 px bırakır . padding kullanımı aynıdır ama içten

margin: EdgeInsets.only(left: 5,top: 22,right: 21,bottom: 10), // bır farklı kullanımı

 mainAxisAlignment --> x ekseni için geçerli

 crossAxisAlignment --> y ekseni için geçerli

mainAxisAlignment: MainAxisAlignment.center // Bulunduğum düzlemdeki itemleri ortalar

mainAxisSize: MainAxisSize.min, // wrapcontent

mainAxisSize: MainAxisSize.max, // matchparent

Aşaüğıdakiler children lar içindir vs...

mainAxisAlignment: MainAxisAlignment.spaceEvenly, // eşit parçaya böler

mainAxisAlignment: MainAxisAlignment.spaceBetween, // sola ve sağa yaslamalı eşit parçalara böler

mainAxisAlignment: MainAxisAlignment.spaceAround, // soldan ve sağdan 5 ise itemler arası 10 px olur

crossAxisAlignment: CrossAxisAlignment.stretch, // ters düzlemi kaplar

Weight ile ayarlamak istersen flex kullanmalısın onun içinde expanded

Expanded(
  child: Container(
    child: Icon(
      Icons.ac_unit,
      size: 64,
    ),
  ),
  flex: 2,
),

Expanded(
  child: Container(
    child: Icon(
      Icons.ac_unit,
      size: 64,
    ),
  ),
  flex: 4,
),

ortalamak(center) container için

body: Center(
    child: Container(
  ..)),

Container'ın içini yuvarlamak için BoxDecoration KULLAN

body: Center(child: Container(

 padding: EdgeInsets.all(20),

  child: FlutterLogo(
    size: 128,
    textColor: Colors.blue,
    style: FlutterLogoStyle.stacked,

  ),
  decoration: BoxDecoration(shape: BoxShape.circle,color: Colors.black),
)),

BORDER KULLANMAK İÇİN ÖRNEK

body: Center(child: Container(
  padding: EdgeInsets.all(20),
  child: FlutterLogo(
    size: 128,
    textColor: Colors.blue,
    style: FlutterLogoStyle.stacked,

  ),
  decoration: BoxDecoration(shape: BoxShape.rectangle,color: Colors.black,
  border: Border.all(width: 4,color: Colors.white),
    borderRadius: BorderRadius.circular(30)
  ),
)),

RESİM EKLEME pubspec.yaml -> - assets/images/rmos.png

child: Container(
  width: 400,
  height: 500,
  decoration: BoxDecoration(
    color: Colors.orange,
    shape: BoxShape.rectangle,
    image: new DecorationImage(
      image: AssetImage('assets/images/rmos.png'),
      fit: BoxFit.cover, // stretch

    ),
  ),
)),

gölgelendirme için BoxShadow kullanabilirsin

ilk widgetin scaffold olsun bunun içinde appBar felan var .

child: Scaffold(
  appBar: AppBar(title: Text("Rambo")),
),

Themanın rengini değiştirme

return MaterialApp(
  debugShowCheckedModeBanner: false,
  title: "Başlık",
  theme: ThemeData(primarySwatch: Colors.purple),
  home: MyHomePage(),
);

control + S sadece build context içini çalıştırır. yani hot reload yapar.

StatelessWidget  nedir = değerleri değişmeyecek sabir bir widgettir

StatefulWidget ise değerleri değişebilen widgettir o yüzden bunu kullan

setState nedir  = ilgili widgetin build metodunu tekrar tetikle demek . bu sayede ne olmuş oluyor. sayacı dışarıda arttırdık global o yüzden build metodu tetiklendi ve sayac dışarıda tanımlandıgı için sıfırlanmadı kaldıgı yerden devam ettti ve texte yazdı

 void sayacArttir(){
  setState(() {
    _sayac++;
  });
}

TÜM RESİMLERİ TANITMAMAK İÇİN BASE KLASÖRÜN İSMİNİ pubspec.yaml dan aşağıdaki gibi ayarlarsın bu sayede tek tek resimleri tanıtmana gerek yok

assets:
  - assets/images/

kullanımı -> child: Image.asset("assets/images/rmos.png",fit: BoxFit.cover)

internetten almak için -> child: Image.network(_imageUrl,  fit: BoxFit.cover,)

fit: BoxFit.cover demek stretch demek yani tamamına kapla resmi yay demek

child: CircleAvatar(
  backgroundImage: AssetImage("assets/images/rmos.png"),radius: 50,
),

açıklama : backgroundImage bizden imageprovider beklediği için AssetImage i kullandım çünkü Image.asset bize widget döndürür. internetten almak için ise NetworkImage(_imageUrl) i kullanırız

radius: 50 demek yarı çapı bu kadar olsun yani genişletir. arttırabiliriz.

IntrinsicHeight nedir = en yüksek row daki widgete göre diğerlerini büyütür demek ama crossAxisAlignment: CrossAxisAlignment.stretch, kullanmamız lazım

child: FadeInImage.assetNetwork(placeholder: "assets/images/load.gif", image: _imageUrl)

FadeInImage nedir : internetten resim yüklenirken gösterilecek resim demektir.

SliverAppBar -> aşağıdan yukarıya çektiğinde yukarıdaki resim küçülür