\n
If you have any questions please let me know in the comments;)
\n","author":{"@type":"Person","name":"Juan Martin Zabala"},"upvoteCount":2,"answerCount":3,"acceptedAnswer":{"@type":"Answer","text":"I fixed this problem by adding constraints to the container in the Image.dart file, all I did was adding this line. After lots and lots of investigation I realized that adding MediaQuery to the height tells the app to cover the screen's height, this can be also done with width.
\nWidget build(BuildContext context) {\n return Container(\n decoration: BoxDecoration(color: Colors.red,),\n constraints: BoxConstraints.expand(height: MediaQuery.of(context).size.height), // add this line\n\n child: Expanded(\n child: Image.asset(\n _assetPath,\n fit: BoxFit.fill,\n ),\n ),\n );\n }\n
\n","author":{"@type":"Person","name":"Juan Martin Zabala"},"upvoteCount":3}}}Reputation: 801
I am trying to add an image covering the device width and height, also this image needs have text over it. At first when adding the image I used fit: BoxFit.fill
on the Image.dart file so that the image covers the whole screen and it worked. Then for having the text over the image I added Stack widget wrapping the image and the text, as soon as I did this, the the text was over the image but now the image was not covering the full screen height. Why is this problem happening?
// main.dart
void main() {
runApp(MaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: ImageContainer(),
);
}
}
// ImageContainer.dart
class ImageContainer extends StatelessWidget {
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
children: [
MainImage("assets/images/startwars.jpg"),
Positioned(
bottom: 0,
left: 0,
child: Container(
child: Text(
"someText",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
)
),
)
],
)
],
),
);
}
}
// Image.dart
class MainImage extends StatelessWidget {
final String _assetPath;
MainImage(this._assetPath);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Colors.red,),
child: Expanded(
child: Image.asset(
_assetPath,
fit: BoxFit.fill,
),
),
);
}
}
If you have any questions please let me know in the comments;)
Upvotes: 2
Views: 2285
Reputation: 801
I fixed this problem by adding constraints to the container in the Image.dart file, all I did was adding this line. After lots and lots of investigation I realized that adding MediaQuery to the height tells the app to cover the screen's height, this can be also done with width.
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Colors.red,),
constraints: BoxConstraints.expand(height: MediaQuery.of(context).size.height), // add this line
child: Expanded(
child: Image.asset(
_assetPath,
fit: BoxFit.fill,
),
),
);
}
Upvotes: 3
Reputation: 650
You can set Stack fit .. Stack( fit: StackFit.expand, ... ) An also you can add Container ( child:Image( ... ), width: double.infinity, heigh:...)
Upvotes: 0
Reputation: 670
Set your Stack
fit to expand:
Stack(
fit: StackFit.expand,
children: [],
);
Upvotes: 1