Ink.image fitWidth property not working with flexible parents #104513
Labels
a: images
Loading, displaying, rendering images
f: material design
flutter/packages/flutter/material repository.
found in release: 3.0
Found to occur in 3.0
found in release: 3.1
Found to occur in 3.1
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
team-design
Owned by Design Languages team
triaged-design
Triaged by Design Languages team
Comments
|
I can reproduce this issue on latest stable and master versions. When omitting the
Below is the code sample I used to test this: Code sampleimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Ink image demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Ink.image'),
Ink.image(
fit: BoxFit.fitWidth,
width: double.infinity,
// height: 50,
image: const NetworkImage(
'https://github.com/flutter/website/raw/archived-master/src/_assets/image/flutter-lockup-bg.jpg?raw=true',
),
),
const Divider(thickness: 5),
const Text('Image'),
const Image(
fit: BoxFit.fitWidth,
width: double.infinity,
// height: 50,
image: NetworkImage(
'https://github.com/flutter/website/raw/archived-master/src/_assets/image/flutter-lockup-bg.jpg?raw=true',
),
),
],
),
);
}
}ScreenshotsWithout setting the
|
exaby73
added
found in release: 3.0
flutter-triage-bot
bot
added
multiteam-retriage-candidate
team-design
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Steps to Reproduce
Ink.imageinside aColumndouble.infinityBoxFit.fitWidthExpected results:
I would like to see the
fitWidthproperty working exactly as in any image widget.Actual results:
I see the height not fitting to the width, different from what happens in any image widget.
Code samples and investigation
Error sample (with column)
First image: no height set
Second image: height set as 40 (as mentioned in the code) [works]
Working sample (without column)
Image with all same properties inside column sample (works as expected)
Please notice that the
Ink.imageis used with theInkWell, but I'm ommiting it here to be more clear.Thoughts
Seems that
Ink.imageis having problems to deal with dynamic size parents.Logs
All logs are from
Ink.imageandColumnexample.The analyze errors are not being actually called, since I'm putting the example directly on
main.dartThe text was updated successfully, but these errors were encountered: