Stack Widget In Flutter

Are you looking for a way to display text over an image or incorporate some popular design from dribble Flutter Stack Widget is the answer. This widget holds other widgets on top of each other. Stack Widget is your answer for all these problems.

Hi guys, my name is Abhishek Singh and in this blog, I will tell you about the Stack widget in a flutter. It is one of the prominently used widgets in a flutter. As the name suggests it is used to stack other flutter widgets on top of each other.

Introduction

A Stack widget is one of the most important widgets in the flutter library which allows the placement of two or more widgets on top of each other which.

There are 2 types of stacks

• Stack
• IndexdStack

Let’s first discover about the stack

Syntax

...
Stack(
   children:[
   Firstchild(),
   Secondchild(),
   Thirdchild(),
  ],
),
...

In the above syntax, we can see a stack has been defined with 3 children. In this, the first child will be the last member in a stack and the third member will be at the top of the stack.

The below image will help you to understand the stack implementation.

In the above image, you can see how flutter implements a stack widget. If you want to achieve a certain style which requires layering of widgets on top of each other then this would be the best way to do so.

Practice

Let’s create the above design using the Stack widget

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

import '../../widgets/custom_text.dart';
import 'clippers/avatar.dart';
import 'clippers/center_ellipsee.dart';
import 'clippers/left_elipsee.dart';
import 'clippers/right_elipse.dart';

class OnBoarding extends StatelessWidget {
  const OnBoarding({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Stack(
        children: [
          Positioned(
            right: 0,
            child: CustomPaint(
              size: const Size(
                260.37,
                332.68,
              ),
              painter: RPSCustomPainter(),
            ),
          ),
          Positioned(
            left: 0,
            child: CustomPaint(
              size: const Size(200.22, 307.88),
              painter: LeftEllipse(),
            ),
          ),
          Positioned(
            top: 100,
            left: 40,
            child: CustomPaint(
              size: Size(321.22, (321.22 * 1.0931034482758621).toDouble()),
              painter: CenterPaint(),
            ),
          ),
          Positioned(
            top: 100,
            left: 60,
            child: CustomPaint(
              size: const Size(300, 300),
              painter: AvtarPaint(),
            ),
          ),
          Positioned(
            bottom: MediaQuery.of(context).size.height / 7,
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Center(
                    child: CustomTxt(
                      text: "Time to mediate",
                      fontSize: 26,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  const CustomTxt(
                    text: "Take a breath, and ease your mind",
                    fontSize: 20,
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(
                    height: 60,
                  ),
                  OutlinedButton(
                    onPressed: () {
                      Navigator.of(context).pushNamed("/signup");
                    },
                    style: OutlinedButton.styleFrom(
                        backgroundColor: const Color(0xff27343E),
                        enableFeedback: true,
                        minimumSize: const Size(250, 60)),
                    child: const CustomTxt(
                      text: "Get Started",
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                  const SizedBox(
                    height: 18,
                  ),
                  Text.rich(
                    TextSpan(
                      style: const TextStyle(fontSize: 13),
                      children: [
                        const TextSpan(text: "Already have an account ?  "),
                        TextSpan(
                          text: "Sign In",
                          style: const TextStyle(color: Color(0xff6FAAA4)),
                          recognizer: TapGestureRecognizer()
                            ..onTap = () {
                              Navigator.pushNamed(context, '/login');
                            },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Try it yourself and post the results in the comment, For any doubts, you can reach out to me

Check out my git repo for more such tutorials