CODEWITHSUNDEEP
flutterflutter-layout
mohamed adel
mohamed adel

Reputation: 715

Flutter make network image take full width

I have this card i want to make any image take the full width of the card i tried settings width to double.infinity and 3000 but it doesn't work. Also i want to write text on the top of the image how can i do that? and is it going to impact the app performance if i did it? 

 return Card(
            clipBehavior: Clip.antiAlias,
            elevation: 5,
            margin: EdgeInsets.fromLTRB(10, 20, 10, 24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Expanded(
                  flex: 8,
                  child: new Container(
                    width: double.infinity,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(4.0),
                      child: CachedNetworkImage(
                        fadeInDuration: Duration(milliseconds: 2000),
                        width: 3000,
                        imageUrl:
                            'https://images.alphacoders.com/560/thumb-350-560228.jpg',
                        placeholder: (context, url) =>
                            new CircularProgressIndicator(),
                      ),
                    ),
                  ),
                ),
                new Expanded(
                    flex: 2,
                    child: new Container(
                      child: MaterialButton(
                        minWidth: double.infinity,
                        color: Color(orange),
                        onPressed: () {},
                        child: Text(
                          'Read More',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      color: Colors.green,
                    ))
              ],
            ),
          );

Upvotes: 4

Views: 2246

Answers (2)

Qonvex620
Qonvex620

Reputation: 3972

if you want to fit it with width

use Boxfit.fitWidth instead

Upvotes: 1

Sagar Acharya
Sagar Acharya

Reputation: 3777

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),```
 Check out this in which fit parameter will solve your question

Upvotes: 7

Related Questions