ফ্লাটার লেআউট উইজেট

ফ্লাটারে অনেক গুলো লেআউট উইজেট রয়েছে। যেগুলো ব্যবহার করে সুন্দর এবং রেসপনসিভ ইউআই ডিজাইন করা যায়। নিচে গুরুত্বপূর্ণ লেআউট উইজেটগুলোর লিস্ট দেওয়া হলো:

সিঙ্গেল চাইল্ড লেআউট উইজেট (Single Child Layout)

এই উইজেটগুলো শুধুমাত্র একটি চাইল্ড রাখতে পারে। যদিও আবার এই উইজেট গুলোর ভেতর আমরা চাইলে মাল্টি চাইল্ড লেআউট যোগ করতে পারব।

• Container → প্যাডিং, মার্জিন, বর্ডার, ব্যাকগ্রাউন্ড কালার ইত্যাদি যোগ করার জন্য কন্টেইনার উইজেট ব্যবহার করা হয়।
• SizedBox → নির্দিষ্ট সাইজের বক্স তৈরি করার জন্য সাইজড বক্স উইজেট ব্যবহার করা হয়।
• Align → চাইল্ডকে প্যারেন্টের নির্দিষ্ট পজিশনে রাখার জন্য Align উইজেট ব্যবহার করা হয়। যেমন bottomLeft, topRight ইত্যাদি।
• Center → চাইল্ডকে প্যারেন্টের মাঝখানে রাখে।
• Padding → চাইল্ডের চারপাশে স্পেস যোগ করে।
• FractionallySizedBox → প্যারেন্টের সাইজের অনুপাতে চাইল্ডের সাইজ সেট করার জন্য ব্যবহৃত হয়। যেমন প্যারেন্টের 90% ইত্যাদি।

উপরের সব গুলো লেআউট নিয়ে জানা যাবে ফ্লাটারের সিঙ্গেল চাইল্ড লেআউট উইজেট লেখা থেকে।

একাধিক চাইল্ড লেআউট উইজেট (Multiple Child Layout)

এই উইজেটগুলোর ভেতর একাধিক চাইল্ডকে নির্দিষ্ট নিয়মে রাখা যায়।

ডিরেকশনাল লেআউট (Directional Layouts)

• Row → চাইল্ডগুলিকে অনুভূমিক (Horizontally) সাজায়।
• Column → চাইল্ডগুলিকে উল্লম্বভাবে (Vertically) সাজায়।
• Flex → Row বা Column এর মতো, তবে আরও বেশি কাস্টমাইজ করা যায়।
• Wrap → যখন জায়গা কম পড়ে তখন চাইল্ডগুলোকে নতুন লাইন বা কলামে সরিয়ে নেয়।
• Flow → কাস্টম লেআউট তৈরি করতে সাহায্য করে।

এগুলো নিয়ে বিস্তারিত জানা যাবে ফ্লাটারে রো, কলাম, ফ্লেক্স ইত্যাদি লেখাতে।

ওভারল্যাপ লেআউট (Overlapping Layouts)

• Stack → চাইল্ডগুলিকে একটির উপর একটি রেখে ওভারল্যাপ করে।
• IndexedStack → Stack এর মতো, কিন্তু একবারে শুধু একটি চাইল্ড দেখায়।

বিস্তারিত জানা যাবে ফ্লাটারে স্ট্যাক উইজেট লেখা থেকে।

টেবিল লেআউট (Table Layout)

• Table → টেবিলের মতো লেআউট তৈরি করতে সাহায্য করে।
• GridView → গ্রিড আকারে কন্টেন্ট দেখানোর জন্য গ্রিডভিউ উইজেট ব্যবহার করা হয়।

বিস্তারিত জানা যাবে ফ্লাটার টেবিল ও গ্রিডভিউ উইজেট লেখা থেকে।

স্ক্রলিং লেআউট (Scrolling Layouts)

স্ক্রিন সাইজ থেকে কন্টেন্ট বেশি হলে স্ক্রলেবল লেয়াউটের দরকার পড়ে।

• SingleChildScrollView → একটি চাইল্ডে স্ক্রল যোগ করে।
• ListView → লিস্টভিউতে ডিফল্ট ভাবে স্ক্রল যোগ করা থাকে।
• GridView → গ্রিড ভিউতেও স্ক্রল যোগ করা থাকে।
• PageView → হরিজন্টালি অথবা ভার্টিকালি পেইজ পরিবর্তন করা যায়।
• CustomScrollView → একাধিক স্ক্রল ভিউ একসাথে ব্যবহারের সুবিধা দেয়।

কনস্ট্রেইন্ট লেআউট (Constraints Layouts)

উইজেটের সাইজ সেট করতে কনস্ট্রেইন্ট লেআউট ব্যবহৃত হয়।

• ConstrainedBox → সর্বনিম্ন বা সর্বোচ্চ উচ্চতা ও প্রস্থ সেট করে।
• LimitedBox → প্যারেন্ট যদি আনকনস্ট্রেইন্ড হয়, তখন এটি সেট করে।
• AspectRatio → চাইল্ডকে নির্দিষ্ট অনুপাতে দেখাতে সাহায্য করে। বিশেষ করে ইমেজ।
• FractionallySizedBox → প্যারেন্টের সাইজ অনুযায়ী চাইল্ডের আকার নির্ধারণ করতে সাহায্য করে।
• Expanded → Row বা Column এর মধ্যে চাইল্ডকে সর্বোচ্চ জায়গা নিতে সাহায্য করে।
• Flexible → Expanded এর মতো, তবে আরও বাড়তি কিছু সুবিধা দেয়।

কাস্টম লেআউট (Custom Layouts)

কাস্টম লেআউট ডিজাইন করার জন্য ব্যবহৃত হয়।

• CustomPaint → বিভিন্ন আকারের আর্ট আঁকার জন্য ব্যবহৃত হয়।
• CustomMultiChildLayout → একাধিক চাইল্ড নির্দিষ্ট নিয়মে সাজানোর জন্য ব্যবহৃত হয়।
• LayoutBuilder → প্যারেন্টের কনস্ট্রেইন্ট অনুযায়ী চাইল্ড ডিজাইন করে।
• SliverList → পারফরম্যান্স অপ্টিমাইজ স্ক্রলএবল লিস্ট।
• SliverGrid → পারফরম্যান্স অপ্টিমাইজ স্ক্রলএবল গ্রিড।

রেসপনসিভ লেআউট (Adaptive Layouts)

ডিভাইসের স্ক্রিন সাইজ অনুযায়ী লেআউট পরিবর্তন করতে সাহায্য করে।

• MediaQuery → স্ক্রিন সাইজ এবং ওরিয়েন্টেশন বের করতে সাহায্য করে।
• LayoutBuilder → স্ক্রিনের আকার অনুযায়ী লেআউট ডিজাইন করে।
• AspectRatio → চাইল্ডের নির্দিষ্ট অনুপাত বজায় রাখে।
• FittedBox → চাইল্ডকে তার প্যারেন্টের ভেতরে ফিট করায়।
• ResponsiveBuilder (থার্ড-পার্টি প্যাকেজ) → স্ক্রিন ব্রেকপয়েন্ট অনুযায়ী লেআউট সাজায়।