How to make container responsive in flutter based on the content

Question

I just want a space between text and the above outlinedbutton. When I set space it shows different in different mobile devices. now the button is not shown full. how to show everything completely and make space between button and text. and that should be same in all devices.

button should be over the container not the text. button should be like this at the bottom. it is above the container. [![enter image description here][3]][3]

Answer 1

you can give height and width using mediaquery. and add size box between button and container . you can replace this line to constraints.maxHeight,

height Mediaquery.of(context).size.height*0.1

Answer 2

I will encourage using padding instead of margin.

There are some others changes have been made, described in code-comment

class RetreatWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // SizeConfig().init(context);
    return Scaffold(
      appBar: AppBar(),
      body: LayoutBuilder(
        builder: (context, constraints) => Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // if you need padding, wrap this Container with Padding widget
            Container(
              height: 110 + 48, // custom height 100 comes from ListItem height
              width: constraints.maxWidth,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5), //color of shadow
                      spreadRadius: 5, //spread radius
                      blurRadius: 7, // blur radius
                      offset: Offset(0, 2), // changes position of shadow
                    ),
                  ]),
              child: Stack(
                children: [
                  SizedBox(
                    height: 110, // from [RetreatItem()]
                    child: ListView(
                      scrollDirection: Axis.horizontal,
                      physics: AlwaysScrollableScrollPhysics(),
                      shrinkWrap: true,
                      children: [
                        RetreatItem(),
                        RetreatItem(),
                        RetreatItem(),
                      ],
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: OutlinedButton(
                      style: OutlinedButton.styleFrom(
                          backgroundColor: Colors.white,
                          padding: EdgeInsets.zero,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(20),
                          ),
                          side: BorderSide(
                            width: 1.0,
                            color: Colors.blue,
                          )),
                      onPressed: () {},
                      child: Text(
                        'Read More +',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.blue,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RetreatItem extends StatelessWidget {
  const RetreatItem({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      width: 200,
      height: 100,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Image.network(
              'https://cdn.pixabay.com/photo/2022/03/03/13/00/heart-7045303_960_720.jpg',
              // width: 200, // from parent
              fit: BoxFit.fitWidth, // for better view
            ),
          ),
          Text(
            "garden - APRIL-2022",
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}