How to control image size in container?

Question

Inside a Card there is one column,which contain 2 Flexible widgets (with flex property 3,1) each one contain a Container widget here is the code:

@override
  Widget build(BuildContext context) {
    return Container(
          color: Colors.blue,
          child: Card(
            child: Column(
              children: [
                Flexible(
                  flex: 3,
                  child: Container(
                    color: Colors.red,
                  )
                  ),

                Flexible(
                  flex: 1,
                    child: Container(
                      color: Colors.amber,
                      child: Center(child: Text('Request')
                      ),
                    )
                )
              ],
            ),
          ),
    );

this code give me the below screen:

Now i want to place image to cover all the red area,

 @override
  Widget build(BuildContext context) {
    return Container(
          color: Colors.blue,
          child: Card(
            child: Column(
              children: [
                Flexible(
                  flex: 3,
                   child: Container(
                    color: Colors.red,
                    child: Image.network(
                      'https://placeimg.com/640/480/any', fit: BoxFit.cover,)
                  )
                  ),

                Flexible(
                  flex: 1,
                    child: Container(
                      color: Colors.amber,
                      child: Center(child: Text('Request')
                      ),
                    )
                )
              ],
            ),
          ),
    );
  }

but when add image inside Container this is what happen

i tried to change fit: BoxFit.cover, but nothing happen

how to make image cover Container(with red area) without change the container size?

Adding Row and other column

 Widget build(BuildContext context) {
    return Container(
          color: Colors.blue,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Card(
                child: Column(
                  children: [
                    Flexible(
                      flex: 3,
                      child: Container(
                        // use the decoration property
                        decoration: BoxDecoration(
                          color: Colors.red,
                          // image here
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://placeimg.com/640/480/any',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),

                    Flexible(
                      flex: 1,
                        child: Container(
                          color: Colors.amber,
                          child: Center(
                              child: RichText(
                                text: TextSpan(
                                  text: 'Request a service',
                                  style: TextStyle(
                                    fontSize: 20,
                                    color: Colors.black
                                  )
                                ),
                          )
                          ),
                        )
                    )
                  ],
                ),
              ),
              Card(
                child: Column(
                  children: [
                    Flexible(
                      flex: 3,
                      child: Container(
                        // use the decoration property
                        decoration: BoxDecoration(
                          color: Colors.red,
                          // image here
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://placeimg.com/640/480/any',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),

                    Flexible(
                        flex: 1,
                        child: Container(
                          color: Colors.amber,
                          child: Center(
                              child: RichText(
                                text: TextSpan(
                                    text: 'Request a service',
                                    style: TextStyle(
                                        fontSize: 20,
                                        color: Colors.black
                                    )
                                ),
                              )
                          ),
                        )
                    )
                  ],
                ),
              ),
            ],
          ),
    );
  }

void · Accepted Answer · 2020-09-06T23:27:22.967

Use the decoration property of the Container to give it an Image instead:

          Flexible(
                flex: 3,
                child: Container(
                  // use the decoration property
                  decoration: BoxDecoration(
                    color: Colors.red,
                    // image here
                    image: DecorationImage(
                      image: NetworkImage(
                        'https://placeimg.com/640/480/any',
                      ),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),

RESULT:

EDIT: "Why is my Image not showing when I use it in a Row" ?:

You need to give your Card widget a Width by wrapping in a SizedBox or a Container.

Added a demo using your code as an example:

class Help extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.blue,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SizedBox(
              width: 150, // give width here
              child: Card(
                child: Column(
                  children: [
                    Expanded(
                      flex: 3,
                      child: Container(
                        // use the decoration property
                        decoration: BoxDecoration(
                          color: Colors.red,
                          // image here
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://placeimg.com/640/480/any',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),
                    Flexible(
                        flex: 1,
                        child: Container(
                          color: Colors.amber,
                          child: Center(
                              child: RichText(
                            text: TextSpan(
                                text: 'Request a service',
                                style: TextStyle(
                                    fontSize: 20, color: Colors.black)),
                          )),
                        ))
                  ],
                ),
              ),
            ),
            SizedBox(
              width: 150, // give width here
              child: Card(
                child: Column(
                  children: [
                    Expanded(
                      flex: 3,
                      child: Container(
                        // use the decoration property
                        decoration: BoxDecoration(
                          color: Colors.red,
                          // image here
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://placeimg.com/640/480/any',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),
                    Flexible(
                        flex: 1,
                        child: Container(
                          color: Colors.amber,
                          child: Center(
                              child: RichText(
                            text: TextSpan(
                                text: 'Request a service',
                                style: TextStyle(
                                    fontSize: 20, color: Colors.black)),
                          )),
                        ))
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

NOTE: It would be advisable to give the Card a width based on the Device screen.

RESULT:

Will dude ty for that , this solve the problem but when i place Card in row the image not showing any idea? ``` Row( children: [ Card( ``` — Abrahem Gh, Sep 06 '20 at 22:16
Can you update your question with how you are placing the `Card` in the `Row` ? — void, Sep 06 '20 at 22:20
If my answer helped you with the problem specified in your original post, please accept it. If not, provide more detail as to why it does not. @AbrahemGh — void, Sep 06 '20 at 22:43
I updated my answer to fix the issue where the `image` isn't showing. Check it out @AbrahemGh — void, Sep 06 '20 at 23:27

How to control image size in container?

1 Answers1