How do I Set Background image in Flutter?
I'm not sure I understand your question, but if you want the image to fill the entire screen you can use a DecorationImage
with a fit of BoxFit.cover
.
class BaseLayout extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bulb.jpg"),
fit: BoxFit.cover,
),
),
child: null /* add child content here */,
),
);
}
}
For your second question, here is a link to the documentation on how to embed resolution-dependent asset images into your app.
If you use a Container
as the body of the Scaffold
, its size will be accordingly the size of its child, and usually that is not what you want when you try to add a background image to your app.
Looking at this other question, @collin-jackson was also suggesting to use Stack
instead of Container
as the body of the Scaffold
and it definitely does what you want to achieve.
This is how my code looks like
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new Container(
decoration: new BoxDecoration(
image: new DecorationImage(image: new AssetImage("images/background.jpg"), fit: BoxFit.cover,),
),
),
new Center(
child: new Text("Hello background"),
)
],
)
);
}
Screenshot:
Code:
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
),
child: Center(child: FlutterLogo(size: 300)),
);
}