flutter-tutorial

Flutter Stack

The Stack widget in the flutter SDK allows us to create a layer of widgets by stacking them on top of one another. Many times, a conventional row and column arrangement isn’t enough; we need a means to layer one widget on top of another, for example, to put text over an image. The Stack widget was created to address this need.

Properties

The following are the properties of the Stack Widget:

  • alignment: This property takes an Alignment Geometry parameter and affects how a non-positioned or partially-positioned child widget is aligned in the Stack.
  • clipBehaviour: This property determines whether or not the material is clipped.
  • fit: This attribute determined how the Stack’s non-positioned children would occupy the available space.
  • overflow: This parameter determines whether or not the overflow portion of the content is visible.
  • textDirection: This attribute allows us to change the direction of the text from right to left. or from right to left.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
          home: Scaffold(
              appBar: AppBar(
                title: Text('Learn Code Zone'),
                backgroundColor: Colors.blue,
              ), //AppBar
              body: Center(
                child: SizedBox(
                  width: 300,
                  height: 300,
                  child: Center(
                    child: Stack(
                      children: <Widget>[
                        Container(
                          width: 300,
                          height: 300,
                          color: Colors.red,
                        ), //Container
                        Container(
                          width: 250,
                          height: 250,
                          color: Colors.black,
                        ), //Container
                        Container(
                          height: 200,
                          width: 200,
                          color: Colors.purple,
                        ), //Container
                      ], //<Widget>[]
                    ), //Stack
                  ), //Center
                ), //SizedBox
              ) //Center
              ) //Scaffold
          ) //MaterialApp
      );
}


Output:

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.