stack inside colum in Flutter

Question

Can I use Stack inside Column widget?

Container(child: Column(children: 
[
Text('This is going to hit'),
Stack(children: [Image.asset('picture.png'),]),
Text(' lorem ipsum dolor si amet consecture')
])
]))

SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Column(
              children: [
                               Stack(
                  clipBehavior: Clip.none,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(20),
                                                    ]),
                      child: Column(
                        children: [
                          Text(
                              'heyyyyyy.'),
                          Container(
                            height: 300,
                            width: double.infinity,
                            child: Stack(
                              clipBehavior: Clip.none,
                              children: [
                                Positioned(
                                  top: 4,
                                  left: -25,
                                  right: -25,
                                  child: Image.asset('assets/be11.png'),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(
                            height: SizeConfig.blockSizeVertical * 5,
                          ),
                          Text(Data.loremIpsum),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),

Here is my code. Now the image is fit into the white container area. I want to pop it out of the container.

Image border is not necessary. When I increase values of Positioned widget of image, it doesn't pop out of the below container border.

Answer 1

Here is an example of how you can do it, this is for you to have an idea then you can adjust it as you needed:

Scaffold(
        body: Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(15.0),
          child: Container(
            width: 200,
            height: 280,
            child: Stack(
              children: [
                Center(
                  child: Container(
                    width: 180,
                    height: 280,
                    color: Colors.green,
                  ),
                ),
                Positioned(
                    top: 5,
                    left: 15,
                    child: SizedBox(
                      width: 180,
                      child: Text(
                          'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ', style: TextStyle(fontSize: 10),),
                    )),

                Positioned(
                  top: 45,
                  child: Container(

                    width: 200,
                    height: 100,
                    decoration: BoxDecoration(
                      color: Colors.grey
                    ),

                  ),
                ),

                Positioned(
                    top: 150,
                    left: 15,
                    child: SizedBox(
                      width: 180,
                      child: Text(
                        'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ', style: TextStyle(fontSize: 10),),
                    )),

              ],
            ),
          ),
        )
      ],
    ))

Answer 2

   ///No need to add stack widget you can make this UI like this way hope this will work for you thankyou
    
         import 'package:flutter/material.dart';
            
            class Task extends StatefulWidget {
              const Task({Key? key}) : super(key: key);
            
              @override
              _TaskState createState() => _TaskState();
            }
            
            class _TaskState extends State<Task> {
              @override
              Widget build(BuildContext context) {
                return Scaffold(
                    backgroundColor: Colors.grey,
                    body: Padding(
                      padding: const EdgeInsets.only(top: 50.0, left: 10, right: 10),
                      child: Container(
                        color: Colors.blue[100],
                        padding: const EdgeInsets.only(top: 30.0, left: 10, right: 10),
                        child: Column(
                          children: [
                            Row(
                              children: [
                                Text(
                                  'News',
                                  style: TextStyle(
                                    color: Colors.blue,
                                  ),
                                ),
                                SizedBox(
                                  width: 5,
                                ),
                                CircleAvatar(
                                    radius: 8,
                                    child: Icon(
                                      Icons.arrow_forward_outlined,
                                      color: Colors.white,
                                      size: 10,
                                    ))
                              ],
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Card(
                              elevation: 5,
                              child: Container(
                                height: 700,
                                child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.all(10.0),
                                        child: Text(
                                          'The marian uprising missionaries dedicated community is coming into existence',
                                          style: TextStyle(
                                              color: Colors.blue,
                                              fontWeight: FontWeight.w500,
                                              fontSize: 18),
                                        ),
                                      ),
                                      Card(
                                          shape: OutlineInputBorder(
                                              borderRadius: BorderRadius.circular(20),
                                              borderSide: BorderSide(color: Colors.white)),
                                          elevation: 10,
                                          child: Padding(
                                            padding: const EdgeInsets.all(8.0),
                                            child: Container(
                                              height: 200,
                                              decoration: BoxDecoration(
                                                  shape: BoxShape.rectangle,
                                                  borderRadius: BorderRadius.circular(20),
                                                  image: DecorationImage(
                                                      image: NetworkImage(
                                                        'https://media.istockphoto.com/photos/colorful-wavy-object-picture-id1198272365?s=612x612',
                                                      ),
                                                      fit: BoxFit.cover)),
                                            ),
                                          )),
                                      Padding(
                                        padding: const EdgeInsets.all(10.0),
                                        child: Text(
                                          "Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum",
                                          style: TextStyle(
                                            color: Colors.blue,
                                          ),
                                        ),
                                      )
                                    ]),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ));
              }
            }