Wrong padding when wrapping container inside stack [flutter]

Question

I'm trying to build a grid of images with a given width and height, wrapping them inside Containers and using fit: BoxFit.fill to be able to set an outer and inner padding for containers (i don't care to keep the image aspect ratio, i wan't to have the same padding in each direction while keeping a fixed total width and height for the outer container).

Now i need to overlay another widget on the top of each image (at the top-left corner, so i need the inner container to set more padding to the image), but when i wrap the inner container inside a Stack, the outer container padding grows without control, as shown below:

How can i fix that? This is my code:

import 'dart:io';
import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Container(
                  padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                  color: Colors.white,
                  child: Image.file(
                    File('C:/flutter/test/elephant.jpg'),
                    filterQuality: FilterQuality.high,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Stack(
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                      color: Colors.white,
                      child: Image.file(
                        File('C:/flutter/test/elephant.jpg'),
                        filterQuality: FilterQuality.high,
                        fit: BoxFit.fill,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RandomColor {
  Color color;

  RandomColor() {
    final random = Random();
    color = Color.fromRGBO(
        random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
  }
}

Answer 1

Inside of Stack widget we need to make additional hint about the available space. I separate image from background an wrapped it in Container with constraints: BoxConstraints.expand()

import 'dart:io';
import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Container(
                  padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                  color: Colors.white,
                  child: Image.file(
                    File('C:/flutter/test/elephant.jpg'),
                    filterQuality: FilterQuality.high,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Stack(
                  children: <Widget>[
                    Container(
                        padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                        color: Colors.white),
                    Padding(
                      padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                      child: Container(
                        constraints: BoxConstraints.expand(),
                        child: Image.file(
                          File('C:/flutter/test/elephant.jpg'),
                          filterQuality: FilterQuality.high,
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RandomColor {
  Color color;

  RandomColor() {
    final random = Random();
    color = Color.fromRGBO(
        random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
  }
}