ফ্লাটারে স্ট্যাক উইজেট

স্ট্যাক উইজেটের সাহায্যে এর চাইল্ড গুলোকে একটার উপর আরেকটা ওভারল্যাপ করে সাজানো যায়। যেমনঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: StackExample()));
}

class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Stack Example")),
      body: Center(
        child: Stack(
          alignment: Alignment.center, // Centers all children
          children: [
            Container(width: 200, height: 200, color: Colors.red),  // Bottom layer
            Container(width: 150, height: 150, color: Colors.green), // Middle layer
            Container(width: 100, height: 100, color: Colors.blue),  // Top layer
          ],
        ),
      ),
    );
  }
}

যেখানে চাইল্ড গুলো একটার উপর আরেকটা ওভারল্যাপ করে রাখবে।

এখানে একটা রিয়েল ওয়ার্ল্ড উদাহরণ দেখিঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: ProfileStackExample()));
}

class ProfileStackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Profile with Badge")),
      body: Center(
        child: Stack(
          children: [
            CircleAvatar(
              radius: 50,
              backgroundImage: NetworkImage('https://via.placeholder.com/150'), // Profile Image
            ),
            Positioned(
              bottom: 0, right: 0,
              child: CircleAvatar(
                radius: 15,
                backgroundColor: Colors.green, // Online Status Badge
                child: Icon(Icons.check, color: Colors.white, size: 15),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

এখানে প্রোপাইল ইমেজে একটা ব্যাজ যোগ করেছি আমরা।

IndexedStack

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

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: IndexedStackExample()));
}

class IndexedStackExample extends StatefulWidget {
  @override
  _IndexedStackExampleState createState() => _IndexedStackExampleState();
}

class _IndexedStackExampleState extends State<IndexedStackExample> {
  int selectedIndex = 0; // Controls which widget is visible

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("IndexedStack Example")),
      body: Center(
        child: IndexedStack(
          index: selectedIndex, // Show only the selected index
          children: [
            Container(width: 200, height: 200, color: Colors.red, child: Center(child: Text("Page 1"))),
            Container(width: 200, height: 200, color: Colors.green, child: Center(child: Text("Page 2"))),
            Container(width: 200, height: 200, color: Colors.blue, child: Center(child: Text("Page 3"))),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            selectedIndex = (selectedIndex + 1) % 3; // Switch between 0, 1, and 2
          });
        },
        child: Icon(Icons.swap_horiz),
      ),
    );
  }
}

উপরের উদাহরণে আমরা একটা বাটন যোগ করেছি ইনডেক্স পরিবর্তনের জন্য। আউটপুট পাবো এমনঃ

Leave a Comment