Reputation: 6204
I am trying to add a Background image to my Flutter App, and I have gone through all similar questions on SO. The app m runs fine but the image does not appear.
here is my widget code:
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
actions: <Widget>[
new IconButton(icon: const Icon(Icons.list), onPressed: _loadWeb)
],
),
body: new Stack(
children: <Widget>[
Container(
child: new DecoratedBox(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("images/logo.png"),
fit: BoxFit.fill,
),
),
),
),
Center(
child: _authList(),
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: getFile,
tooltip: 'Select file',
child: Icon(Icons.sd_storage),
), // This trailing comma makes auto-formatting nicer for build methods.
));
}
The app runs fine and the second widget on the stack, which is a listView works normally but the image does not show up.
Any ideas?
Upvotes: 40
Views: 92691
Reputation: 267384
Use DecoratedBox
:
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("your_asset"),
fit: BoxFit.cover,
),
),
child: //...,
);
}
Upvotes: 2
Reputation: 185
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
image: AssetImage("asset/images/image.png"),
fit: BoxFit.cover)),
child: Scaffold(
backgroundColor: Colors.transparent,
),
);
}
Use this It will not gonna be having the black color means with transparent background.
Upvotes: 3
Reputation: 81
return MaterialApp(
title: "MoonLight",
home: Container(
decoration:new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("graphics/moon.jpg"),
fit: BoxFit.cover,)
),
child: Scaffold(
backgroundColor: Colors.transparent,
),
),
),
Upvotes: 8
Reputation: 6766
Scaffold
doesn't support any concept of a background image. What you can do is give the Scaffold
a transparent color and put it in a Container
and use the decoration
property to pull in the required background image. The app bar is also transparent.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/logo.png"), fit: BoxFit.cover)),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
title: Text('My App'),
centerTitle: true,
leading: IconButton(
icon: Icon(
Icons.list,
color: Colors.white,
),
onPressed: () {}),
),
),
),
);
}
Upvotes: 89
Reputation: 8289
Use BoxDecoration
as the decoration
attribute of the Container
:
Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("images/logo.png"),
fit: BoxFit.fill,
),
),
),
Upvotes: 13