Cropping network image from up and bottom-CodePudding

How can I cut any image during display from upper and bottom with fix amount.

Container(
                height: 200,
                width: double.infinity,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    alignment: FractionalOffset.topCenter,
                    image: NetworkImage(articles[index].imageUrl!),
                  ),
                  borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(6),
                      topRight: Radius.circular(6)),
                ),
              ),

CodePudding user response：

Based on the

so try using BoxFit.fitWidth:

Make sure the full width of the source is shown, regardless of whether this means the source overflows the target box vertically.

Then you can provide your custom aspect ratio to crop it based on your desirable size, by the help of AspectRatio widget:

AspectRatio(
          aspectRatio: 400 / 300,
          child:Container(
                height: 200,
                width: double.infinity,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    alignment: FractionalOffset.topCenter,
                    image: NetworkImage(articles[index].imageUrl!),
                  ),
                  borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(6),
                      topRight: Radius.circular(6)),
                ),
              ),)