Flutter: Image overflow the container
12,628
the Card
widget has it's own clipping behavior so you can just to set the clipBehavior
property to Clip.antiAlias
so the content outside the card will be clipped
Author by
Hung Nguyen
Updated on June 10, 2022Comments
-
Hung Nguyen almost 2 years
I'm making a list of event information in Flutter by using Card for each event. The leading of each card is a related to the event.
I want to make my Card to be rounded corner rectangle, but when I put the image inside the children of Row inside child of Card, the corner of the image is not rounded.
My Card class:
import 'package:flutter/material.dart'; class SmallEventCard extends StatefulWidget { final imageURL; final title; final time; final place; SmallEventCard({this.imageURL, this.title, this.time, this.place}); @override _SmallEventCardState createState() => _SmallEventCardState(); } class _SmallEventCardState extends State<SmallEventCard> { bool isFavorite; @override void initState() { // TODO: implement initState super.initState(); isFavorite = false; } @override Widget build(BuildContext context) { final screen = MediaQuery.of(context).size; return Material( child: SizedBox( height: screen.height / 7, child: Card( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)), child: Row( children: <Widget>[ AspectRatio( aspectRatio: 4 / 3, child: Image.network(widget.imageURL, fit: BoxFit.fitHeight, ), ), SizedBox( width: 10.0, ), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text(widget.title, style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),maxLines: 2, overflow: TextOverflow.clip, ), SizedBox(height: 5.0,), Text(widget.time.toString(), overflow: TextOverflow.clip, ), SizedBox(height: 5.0,), Text(widget.place, overflow: TextOverflow.clip, ), ], ), ), SizedBox( width: 50.0, child: Align( alignment: Alignment.centerRight, child: Padding( padding: const EdgeInsets.all(10.0), child: IconButton( onPressed: () {}, icon: Icon(Icons.favorite_border)), )), ), ], ), ), ), ); } }