Stack and Positioned Widget in Flutter 2022

Flutter, Flutter Crash Course, Flutter UI / UX, Flutter Widgets, UI UX

In this flutter tutorial, we are going to create layout widget in flutter. Stack and positioned widget will be used in this tutorial, whereas stack is used to layout widgets on top of one another and positioned widget is used to position the widgets (childerns of stack) to top, bottom, right and left.

Watch Youtube tutorial

Subscribe us on Youtube

Stack and Positioned Widget Code

return Scaffold(
      appBar: AppBar(
        title: Text("Stack & Positioned Widget"),
        centerTitle: true,
        backgroundColor: Colors.black38,
      ),
      backgroundColor: Colors.grey.shade800,
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(16),
          constraints: const BoxConstraints.expand(
            width: 330,
            height: 450,
          ),
          decoration: const BoxDecoration(
            boxShadow: [
              BoxShadow(
                  color: Colors.white24,
                  offset: Offset(0, 2),
                  spreadRadius: 5,
                  blurRadius: 10),
            ],
            image: DecorationImage(
              image: AssetImage('images/card1.jpg'),
              fit: BoxFit.cover,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(10.0),
            ),
          ),

          //CHILD STACK WIDGET
          child: Stack(
            children: [
              Text("Editor's Choice",
                  style: TextStyle(color: Colors.white70, fontSize: 18)),
              Positioned(
                top: 20.0,
                child: Text("The Art of Making a Coffee",
                    style: TextStyle(color: Colors.white, fontSize: 22)),
              ),
              Positioned(
                right: 0,
                bottom: 20,
                child: Text("Learn to make the perfect Coffee",
                    style: TextStyle(color: Colors.white, fontSize: 16)),
              ),
              Positioned(
                bottom: 0,
                right: 0,
                child: Text("Coding with Tea",
                    style: TextStyle(color: Colors.white, fontSize: 16)),
              ),
            ],
          ),
        ),
      ),
    );