CODEWITHSUNDEEP
flutter
shalvi muqta
shalvi muqta

Reputation: 193

Image BoxFit.cover is not applied correctly

I am trying to fill the whole screen with 4-equal-size images (2x2) with the following code:

import 'package:flutter/material.dart';

void main() => runApp(_MyApp());

class _MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                    ),
                  ),
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                    ),
                  ),
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

However, the result is this: enter image description here

The result I'm looking for: enter image description here

How can I fix my code to do it? So each image has same size as others, and view as 2X2

Upvotes: 1

Views: 1879

Answers (2)

Felipe Sales
Felipe Sales

Reputation: 1149

In your fit property, use: fit: BoxFit.fitHeight,.

See in documentation also: https://api.flutter.dev/flutter/painting/BoxFit-class.html

Upvotes: 0

Tal Rofe
Tal Rofe

Reputation: 1864

You can apply each image with height: double.infinity to make the image takes as many as possible height:

import 'package:flutter/material.dart';

void main() => runApp(_MyApp());

class _MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                      height: double.infinity,
                    ),
                  ),
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                      height: double.infinity,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                      height: double.infinity,
                    ),
                  ),
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                      height: double.infinity,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 4

Related Questions