CODEWITHSUNDEEP
flutterdart
Mirzaloglu
Mirzaloglu

Reputation: 67

Flutter Stack positioning and overflow

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.

This is what I am trying to do.

But my widgets look like this.

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")
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}

Upvotes: 6

Views: 17493

Answers (5)

Ananya Bisen
Ananya Bisen

Reputation: 1

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.

Upvotes: 0

TylerH
TylerH

Reputation: 21086

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

Upvotes: 1

Sheetal Savani
Sheetal Savani

Reputation: 1428

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),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Upvotes: 10

Aloysius Samuel
Aloysius Samuel

Reputation: 1200

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")
                ],
              )
            ],
          )
        ],
      ),
    ),
)

Upvotes: 0

Sam Chan
Sam Chan

Reputation: 1762

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")
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );

Upvotes: 1

Related Questions