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

Share:
12,628
Hung Nguyen
Author by

Hung Nguyen

Updated on June 10, 2022

Comments

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

    Preview