Question 412947 in Flutter Question posted in
The official Flutter documentation can be found here.

how to give child size half than parent widget size in flutter?

I have created a custom widget for Rounded Image widget, here i want to apply image size to 50% of its parent..

This widget can be called in gridview.builder or inside any other widget like sizedbox..

I just want image size half to main container size…

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
          color: Colors.transparent,
          border: Border.all(color: Colors.grey,width: 1),
          borderRadius: BorderRadius.circular(20)

      ),
      child: ClipRRect(
          borderRadius: BorderRadius.circular(20),
          child: Image.asset('lib/assets/xyz.jpeg',fit: BoxFit.cover,)),
    );
  }
}
Tags:

2

Answers


  1. 0

    A way to do it is by using FractionallySizedBox as follows:

    FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.5,
  child: Image.asset('lib/assets/xyz.jpeg',fit: BoxFit.cover,)
),
    Login or Signup to reply.
  2. 0

    I wanted the same when i was creating app.. here is the custom widget that might help you, and it will square and u may adjust height width by changing logic…and remove unnecessory Layout builder if you dont want…

    two layout builders has been used…First one for parent and second one for child…..

    class RoundedImage extends StatelessWidget {
  final bool showBorder;
  final Color borderColor;
  final bool showRadious;
  final double radius;
  final Color backgroundColor;
  final double boarderStroke;

  const RoundedImage({Key? key,this.showBorder=true,this.borderColor=Colors.grey,this.showRadious=true,this.radius=12,this.backgroundColor=Colors.transparent,this.boarderStroke=1}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final height=constraints.maxHeight*0.90;
        final width=constraints.maxWidth*0.90;

        final size=height>width?width:height;
        return Container(
          height: size,
          width: size,
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: backgroundColor,
            border: showBorder?Border.all(color: borderColor,width: this.boarderStroke):null,
            borderRadius: showRadious?BorderRadius.circular(radius):BorderRadius.circular(0),


          ),
          child:Center(
            child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
              final height=constraints.maxHeight*.80;
              final width=constraints.maxWidth*.80;

              final size=height>width?width:height;

              return  ClipRRect(
                  borderRadius: this.showRadious?BorderRadius.circular(radius):BorderRadius.circular(0),
                  child: Image.asset('lib/assets/aymaan.jpeg',fit: BoxFit.cover,height: size,width: size,));
            },),
          ),
        );
      },

    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search