Flutter Layouts এর ধারণা

Flutter-এ লেআউট (Layouts) হলো উইজেটগুলোর মধ্যে সম্পর্ক তৈরি করে অ্যাপ্লিকেশনের ভিজ্যুয়াল স্ট্রাকচার গঠন করার একটি পদ্ধতি। Flutter-এ লেআউট তৈরি করতে উইজেট ব্যবহৃত হয়, এবং প্রতিটি লেআউট উইজেট একটি কন্টেইনার হিসেবে কাজ করে যেখানে অন্যান্য উইজেট বা চাইল্ড উইজেটগুলো রাখা হয়। Flutter-এ লেআউট তৈরির মূল ধারণা হলো, প্রতিটি UI উপাদান একটি উইজেট, এবং উইজেটগুলো গঠনের মাধ্যমে ভিউ তৈরি করা হয়।

Flutter Layouts এর মৌলিক ধারণা

1. Widgets: Flutter-এ সবকিছুই উইজেট, এবং লেআউট তৈরির জন্যও উইজেট ব্যবহার করা হয়।
2. Nested Widgets: Flutter-এ উইজেটগুলো অন্য উইজেটের ভেতর নেস্ট করা যায়। এর মাধ্যমে আপনি একটি জটিল UI সহজেই তৈরি করতে পারেন।
3. Parent-Child Relationship: Flutter-এ লেআউট তৈরিতে প্রতিটি উইজেটের প্যারেন্ট-চাইল্ড সম্পর্ক থাকে। প্যারেন্ট উইজেটগুলো চাইল্ড উইজেটকে কন্টেইন করে এবং লেআউট নিয়ন্ত্রণ করে।
4. Single Child এবং Multiple Child Layouts: Flutter-এ কিছু লেআউট উইজেট একটিমাত্র চাইল্ড উইজেট গ্রহণ করে (যেমন Container, Center), আবার কিছু উইজেট একাধিক চাইল্ড উইজেট গ্রহণ করতে পারে (যেমন Row, Column)।

Flutter Layouts এর প্রধান উইজেটসমূহ

Flutter-এ লেআউট তৈরি করতে ব্যবহৃত কিছু গুরুত্বপূর্ণ উইজেট নিচে দেওয়া হলো:

১. Container

Container উইজেট হলো একটি বহুমুখী লেআউট উইজেট যা প্যাডিং, মার্জিন, সাইজ, এবং বর্ডার সেট করতে ব্যবহৃত হয়। এটি একটি চাইল্ড উইজেটকে ধারণ করতে পারে।

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Center(
    child: Text('Hello'),
  ),
)

২. Row এবং Column

Row এবং Column উইজেটগুলো হলো Flutter-এ লেআউট তৈরির জন্য সবচেয়ে সাধারণ উইজেট। এগুলো একাধিক চাইল্ড উইজেট ধারণ করতে পারে এবং চাইল্ড উইজেটগুলোকে অনুভূমিকভাবে (Row) বা উল্লম্বভাবে (Column) সাজাতে সাহায্য করে।

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('First'),
    Text('Second'),
    Text('Third'),
  ],
)

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)

৩. Stack

Stack উইজেট ব্যবহৃত হয় যখন আপনি উইজেটগুলোকে একটির ওপর আরেকটি রাখতে চান, অর্থাৎ Z-axis এ লেআউট করতে চান। Stack এর মাধ্যমে আপনি বিভিন্ন স্তরে (layer) চাইল্ড উইজেট রাখতে পারেন।

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
)

৪. ListView

ListView একটি স্ক্রলযোগ্য উইজেট যা অনেক আইটেম একসঙ্গে প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত লম্বা তালিকা তৈরি করতে ব্যবহৃত হয়, যেমন চ্যাট অ্যাপ্লিকেশন বা প্রোডাক্ট তালিকা।

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo),
      title: Text('Album'),
    ),
  ],
)

৫. GridView

GridView ব্যবহার করে আপনি চাইল্ড উইজেটগুলোকে গ্রিড ফর্ম্যাটে সাজাতে পারেন। এটি এমন লেআউট তৈরিতে সহায়ক যেখানে উইজেটগুলো গ্রিড আকারে (rows এবং columns) সাজানো হয়।

GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    Container(color: Colors.blue),
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.yellow),
  ],
)

৬. Expanded এবং Flexible

Expanded এবং Flexible উইজেটগুলো Row বা Column-এর চাইল্ড হিসাবে ব্যবহৃত হয় এবং সেগুলোর স্পেস নিয়ন্ত্রণ করে। এটি ব্যবহার করে আপনি উইজেটের আকারের কন্ট্রোলিং করতে পারেন।

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.blue,
        height: 50,
      ),
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 50,
    ),
  ],
)

৭. Padding এবং Align

• Padding: একটি চাইল্ড উইজেটের চারপাশে স্পেস যোগ করতে ব্যবহৃত হয়।
• Align: চাইল্ড উইজেটকে একটি নির্দিষ্ট জায়গায় পজিশন করতে ব্যবহৃত হয়।

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('This is padded'),
)

Align(
  alignment: Alignment.topRight,
  child: Text('Top Right'),
)

Layouts এর কাস্টমাইজেশন

Flutter-এ লেআউট উইজেটগুলো অত্যন্ত কাস্টমাইজেবল। আপনি বিভিন্ন প্যারামিটার এবং প্রপার্টি ব্যবহার করে উইজেটগুলোকে কাস্টমাইজ করতে পারেন, যেমন:

• mainAxisAlignment এবং crossAxisAlignment: Row এবং Column এর চাইল্ডগুলোর অবস্থান নির্ধারণ করে।
• padding, margin, এবং alignment: Container, Padding, এবং Align এর মাধ্যমে বিভিন্ন ধরনের কাস্টমাইজেশন করা যায়।

Flutter Layouts এর মূল ধারণা

• ডিজাইন এবং ফ্লেক্সিবিলিটি: Flutter লেআউট উইজেট ব্যবহার করে খুব দ্রুত এবং সহজে জটিল ডিজাইন তৈরি করা যায়।
• মাল্টিপ্ল প্ল্যাটফর্ম সাপোর্ট: একই লেআউট উইজেট ব্যবহার করে Android, iOS, ওয়েব এবং ডেস্কটপের জন্য এক্সপ্রেসিভ UI ডিজাইন তৈরি করা যায়।
• Responsive UI: Flutter এর লেআউট উইজেট এবং কাস্টমাইজেশন প্রপার্টি ব্যবহার করে আপনি সহজেই responsive UI তৈরি করতে পারেন, যা বিভিন্ন স্ক্রিন সাইজে মানানসই হয়।

এইভাবে, Flutter এর লেআউট উইজেট এবং কনসেপ্টগুলো ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে সুন্দর এবং কার্যকরীভাবে গঠন করতে পারেন।