Flutter Column va Row widgetlarini ishlatish

Column

Flutter da bu widgetning vazifasi boshqa widgetlarni ustun shaklida joylashtirishdir. Lekin buning bitta yomon tarafi bor u scroll bo`lmaydi ya`ni aylanmaydi , agar sizga aylanishi kerak bo`lsa siz ListView widgetini ishlatsangiz yaxshi.

Kelinglar , Column kodda qanday ishlatilishini ko`ramiz.

Column(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 200,
      height: 200,
      color: Colors.green,
    )
  ],
),

Ko`rib turganizday 3 ta containerni vertikal qilib joylashtirib chiqdik.

Row

Row widgetlarni qator shaklida joylashtirib beradi. Bunda xam scroll ishlamaydi yani aylantirish agar sizga scroll kerak bo`lsa bunda xam ListView da foydalanganingiz yaxshiroq.

Row ni kodda ishlatib ko`ramiz.

Row(
  children: [
    Container(
      width: 100,
      height: 200,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.green,
    )
  ],
),

Bunda ko`rib turibsizki 3 ta Containerlarni gorizontal korinishda taxlab bergan.

Endi esa ularni xussusiyatlari bilan tanishib chiqaylik, ikkalasini bir vaqtni o`zida ko`rib ketamiz solishtirish va tushinish oson bo`lishi uchun.

MainAxisAlignment

Bu Column da vertikal widgetlarni qanday joylashtirishni belgilab beradi , Row da esa gorizontal ya`ni mainAxisAlignment Column va Row da widgetlar qaysi yo`nalishda joylashtirilgan bo`sa o`sha yo`nalish bo`ylab qanday joylashishni xal qiladi xozir uni kod va rasmda ko`ramiz.

Row(
  mainAxisAlignment: MainAxisAlignment.
spaceBetween,
  children: [
    Container(
      width: 100,
      height: 200,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.green,
    )
  ],
),

Column(
  mainAxisAlignment: MainAxisAlignment.
spaceBetween,
  children: [
    Container(
      width: 100,
      height: 200,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.green,
    )
  ],
),

Mana ko`rib turganingizday xozir biz Column va Row ichidagi widgetlarni bo`sh joylarga teng taqsimlab chiqdik buning uchun biz MainAxisAlignment ning spaceBetween paramentirini foydalanishimiz kifoya edi.

Endi esa qolgan prametrlarini ko`rib chiqalylik :

MainAxisAlignment.center

Bunda widgetlarni iloji borija o`rtaga joylashtirishga xarakat qiladi.

MainAxisAlignment.start

Bu holatda widgetlarni boshiga joylashtirayapdi.

MainAxisAlignment.end

Bu holatda widgetlarni oxiriga joylashtirayapdi.

MainAxisAlignment.spaceAround

Bunda esa widgetlarni bo`sh joylarga taqsimlab chiqayapdi shuningdek, boshidan va oxiridan wigetlar orasidagi bo`sh joyni yarimcha joy tashayapdi.

MainAxisAlignment.spaceEvenly

Bu holatda har bir widget o`rasini bir xil bo`sh joy shuningdek, boshi va oxiridan xam hudi shunday bo`sh joy tashalgan.

CrossAxisAlignment

CrossAxisAlignment ning vazifasi va ishlatilinishi MainAxisAlignment bilan bir xil faqatgina joylashtirish yo`nalishlari teskari bo`ldi. Kelinglar bitta ikkita misol ko`ramiz.

Kelinglar men sizlarga men juda ko`p duch keladigan va ishlatadigan usulimni ko`rsataman.

Bu yerda ikkita Container boshida qolishi kerak lekin uchinchi Container eng oxirida bo`lishi kerak. Men bu yerda juda oson yo`lni tanlaganman ya`ni bo`shidagi ikkita Containerni bitta widget dek foydalanish uchun unlarni xam Row ga o`raganman. Qarabsizki katta Row da endi ikkita widget bor endi esa shunchaki uning MainAxisAlignment parametriga spaceBetween berib qo`ysak boldi.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Row(
      children: [
        Container(
          width: 100,
          height: 200,
          color: Colors.blue,
        ),
        Container(
          width: 100,
          height: 200,
          color: Colors.red,
        ),
      ],
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.green,
    )
  ],
),

Umid qilamanki, sizga maqola yoqadi! Quyida izoh qoldiring yoki savollar / takliflar bo’lsa manga linkedin dan yozing!