Flutter: Positioned inside stack cuts off my widget

Question

I am using stuck to overlapping my widget. this is my widget:

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      controller: controller,
      child: SizedBox(
        height: double.maxFinite,
        child: Column(
          children: [
            Container(
              width: double.maxFinite,
              constraints: BoxConstraints(maxHeight: 200),
              color: Colors.blue,
              child: Stack(
                // clipBehavior: Clip.none,
                children: [
                  Positioned(
                    bottom: -25,
                    left: 0,
                    right: 0,
                    child: Container(
                      width: 60,
                      height: 60,
                      padding: EdgeInsets.all(8),
                      color: Colors.blue,
                      child: CircleAvatar(
                          backgroundColor: Colors.white,
                          child: Icon(Icons.mail)),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

this is an image :

as you can see my image was cut off.I added clipBehavior: Clip.none, to stack but it just increase the height of stack :

I want the button to come down from the blue container. Like all the pictures I took, without cut off.

Answer 1

I fix this issue :

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      controller: controller,
      child: SizedBox(
        height: double.maxFinite,
        child: Column(
          children: [
            Container(
              width: double.maxFinite,
              height: 200,
              color: Colors.blue,
              child: Stack(
                clipBehavior: Clip.none,
                children: [
                  Align(
                    alignment: Alignment.center,
                    child: Container(
                      child: Column(
                        mainAxisSize: MainAxisSize.max,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text("test",
                              style:
                                  TextStyle(fontSize: 25, color: Colors.white)),
                        ],
                      ),
                    ),
                  ),
                  Positioned(
                    bottom: -25,
                    left: 0,
                    right: 0,
                    child: CircleAvatar(
                        backgroundColor: Colors.white,
                        child: Icon(Icons.campaign)),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

result: