getting render flow error and forced take singlechildscrollview-CodePudding

I am creating simple product detail screen where I have taken column inside body, setting height based on media query

a simple SizedBox is taken with the height of mediaquiry's height size

but I am getting error A RenderFlex overflowed by 80 pixels on the bottom

and if I take singlechildscrollview it solves....but here I can't understand what's my mistake....

is it because of appbar's height? and if it is so..how to count appear height...so that I can deduct from size of body

here is my simple code, I can solve with SingleChildScrollView but main thing is I am not getting what issue is..

class DetailScreen extends StatelessWidget {
  final Product product;

  DetailScreen({required this.product});

  @override
  Widget build(BuildContext context) {
    Size size=MediaQuery.of(context).size;
    print(size.toString());
    return Scaffold(
      backgroundColor: product.color,
      appBar: buildAppbar(context),
      body: Column(children: [
        SizedBox(
          height: size.height,
          child: Stack(
          children: [
            Container(
              height: 10,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(24),
                  topRight: Radius.circular(24),

                ),
              ),

            )

          ],
        ),

        ),
      ],),
    );
  }

  AppBar buildAppbar(BuildContext context)
  {
    return AppBar(
      backgroundColor: product.color,
      elevation: 0,
      leading: IconButton(icon: SvgPicture.asset('assets/icons/back.svg',color: Colors.white,),onPressed: (){
        Navigator.pop(context);
      },),
      actions: [
        IconButton(onPressed: (){}, icon: SvgPicture.asset('assets/icons/search.svg',color: Colors.white,)),
        SizedBox(width: 5,),
        IconButton(onPressed: (){}, icon: SvgPicture.asset('assets/icons/cart.svg',color: Colors.white,)),
        SizedBox(width: 20,),
      ],

    );
  }
}

CodePudding user response：

I suspect the extra pixel is getting because of appBar height. you can minimize that pixel from height, or better use LayoutBuilder on body. Also, I can't see any use case for Column widget, you can remove it

return Scaffold(
  appBar: buildAppbar(context),
  body: LayoutBuilder(
    builder: (context, constraints) => SizedBox(
      height: constraints.maxHeight,
      child: Stack(

CodePudding user response：

Try to use Expanded in your Column instead of SizedBox

 return Scaffold(
      backgroundColor: product.color,
      appBar: buildAppbar(context),
      body: Column(children: [
        Expanded(
          height: size.height,
          child: Stack(
          children: [
            Container(
              height: 10,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(24),
                  topRight: Radius.circular(24),
                ),
              ),
            )
          ],
          ),
        ),
        ....