How can I make the container pop out inside the container using stack in flutter

Question

I am using stack in flutter, however I am having problem with the container at the top. I want to make the top container to overflow so I can see the whole container.

Stack(
                                  clipBehavior: Clip.none,
                                  alignment: AlignmentDirectional.bottomCenter,
                                  children: [
                                    Container(
                                      height: 150,
                                      width: MediaQuery.of(context).size.width,
                                      clipBehavior: Clip.hardEdge,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(10),
                                      ),
                                      child: Image.asset(
                                        "assets/Untitled.png",
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                    Positioned(
                                      bottom: -50,
                                      child: Container(
                                        height: 100,
                                        width: 100,
                                        clipBehavior: Clip.hardEdge,
                                        decoration: BoxDecoration(
                                            color: Colors.black,
                                            borderRadius:
                                                BorderRadius.circular(50)),
                                        child: Image.network(data!['profile']),
                                      ),
                                    )
                                  ],
                                ),

I have already tried using clipBehavior: Clip.none, inside the stack, but it seems that it does not do anything and the container is till not overflowed.

Answer 1

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.none,
      padding: const EdgeInsets.all(200),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Positioned(
            top: 0,
            left: -50,
            width: 100,
            height: 100,
            child: Container(
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

The Container within the Positioned will be out of the parent Container 's bounds on the left side by 50px. Make sure there are no parent widgets that are causing the Container to fit to the bounds of its children.