Flutter Stack | Flutter Stack with Examples

Flutter Stack

In Flutter, stack widgets are used to overlap or hide some part of a widget, for example hiding icons etc. on the right side of the container or hiding multiple widgets on top of each other.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Stack Example'),
        ),
        body: Stack(
          alignment: Alignment.center, // Aligns children at the center of the stack
          children: [
            // Background Container is blue
            Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.blue,
            ),
// In this case there are two Positioned one is Top 50 and 20 and other is bottom 50 and 20 

            // Positioned Widget 1
            Positioned(
              top: 50,
              left: 20,
              child: Text(
                'Positioned Widget 1',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
            // Positioned Widget 2
            Positioned(
              bottom: 50,
              right: 20,
              child: Text(
                'Positioned Widget 2',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
            // Centered Text
            Text(
              'Centered Text',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

Stack widget is highly flexible and allows for creative UI designs by layering widgets on top of each other.