How do I add a background image to flutter app?
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: () {}),
),
),
),
);
}
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,
),
),
),
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,
),
),
),