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.

CodePudding user response：

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

CodePudding user response：

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,
          ),
        ],
      ),
    );
  }
}