Wrong padding when wrapping container inside stack [flutter]
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);
}
}
Ansharja
Updated on December 17, 2022Comments
-
Ansharja over 1 year
I'm trying to build a grid of images with a given width and height, wrapping them inside
Containers
and usingfit: 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); } }