Flutter Stack positioning and overflow

Question

I am currently working on flutter. I am using stack for stack 2 widgets. But i have some problems.

This is what I am trying to do.

But my widgets look like this.

That's my code:

class UpcomingSessionItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      alignment: AlignmentDirectional.bottomCenter,
      children: [
        ClipRRect(
            borderRadius: BorderRadius.circular(25),
            child: Image.asset('assets/images/yoga-1.jpg')),
        Container(
          height: 100,
          padding: EdgeInsets.all(20),
          color: Colors.white,
          child: Column(
            children: [
              Row(
                children: [
                  Column(
                    children: [
                      Text(
                        "9 am - 10:30 am",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text("Yoga for Beginners with Emily Cassel")
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}

Irrationality

Answers belong as answers, not as edits to the question. – Jemmie

Answer 1

Wrap your Container(Widget) which is inside the stack with the Positioned Widget and set the bottom, left, and right attributes. and you will get the output

You can try this code by copy-paste in your editor.

Example Code here

import 'package:flutter/material.dart';

class StackExample extends StatefulWidget {
  @override
  _StackExampleState createState() => _StackExampleState();
}

class _StackExampleState extends State<StackExample> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return
      Container(
      alignment: Alignment.center,
      padding: EdgeInsets.all(20),
      child: Stack(
        clipBehavior: Clip.none,
        alignment: AlignmentDirectional.bottomCenter,
        children: [
          ClipRRect(borderRadius: BorderRadius.circular(25), child: Image.asset('assets/image.png')),
          Positioned(
            bottom: -50,
            right: 20,
            left: 20,
            child: Container(
              height: 150,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                color: Colors.white,
              ),
              padding: EdgeInsets.all(20),
              alignment: Alignment.center,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    "TITLE",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18, decoration: TextDecoration.none, color: Colors.black),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                    "Hey, There?",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, decoration: TextDecoration.none, color: Colors.black),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                    "This is the example",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 15, decoration: TextDecoration.none, color: Colors.black),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Irizarry

Answer 2

Solution moved from the question to an answer:

I changed this:

alignment: AlignmentDirectional.bottomCenter

to this:

alignment: AlignmentDirectional.center

and I wrapped my container with Positioned widget and I changed bottom:0 property

Jemmie

Answer 3

You can use Column

 return Stack(
      clipBehavior: Clip.none,
      alignment: AlignmentDirectional.bottomCenter,
      children: [
        Column(
          children: [
            ClipRRect(
                borderRadius: BorderRadius.circular(25),
                child: Image.asset('assets/images/yoga-1.jpg')),
            Container(
              height: 50, //Any space you want
            ),
          ],
        ),
        Container(
          height: 100,
          padding: EdgeInsets.all(20),
          color: Colors.white,
          child: Column(
            children: [
              Row(
                children: [
                  Column(
                    children: [
                      Text(
                        "9 am - 10:30 am",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text("Yoga for Beginners with Emily Cassel")
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );

Cruse

Answer 4

Wrap the Container (or any Widget) within your Stack using the Positioned widget, and define the bottom, left, and right attributes as needed. It will help you.

Vinous

Answer 5

You can use Padding for the container which is on top. Like this:

Padding(
   padding: EdgeInsets.only(top: 40),
   child: Container(
      height: 100,
      padding: EdgeInsets.all(20),
      color: Colors.white,
      child: Column(
        children: [
          Row(
            children: [
              Column(
                children: [
                  Text(
                    "9 am - 10:30 am",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text("Yoga for Beginners with Emily Cassel")
                ],
              )
            ],
          )
        ],
      ),
    ),
)

Resendez