স্ট্যাক উইজেটের সাহায্যে এর চাইল্ড গুলোকে একটার উপর আরেকটা ওভারল্যাপ করে সাজানো যায়। যেমনঃ
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),
),
);
}
}
উপরের উদাহরণে আমরা একটা বাটন যোগ করেছি ইনডেক্স পরিবর্তনের জন্য। আউটপুট পাবো এমনঃ