Reputation: 3009
I am trying to create the attached screen in Flutter. How do I add a background image and add the text at the specific location (ignore the white text box).
Thanks for your help
Upvotes: 6
Views: 16153
Reputation: 1898
Also make sure to create an assets directory and add your image asset(s) to it, then update your pubspec.yaml file under "flutter:" as below with:
flutter:
assets:
- assets/splash.png
Where splash.png is your image asset. Or just use:
flutter:
assets:
- assets/
if you want the whole directory. If not, you'll just render a blank container.
Upvotes: 2
Reputation: 1553
To add background image you have to use DecorationImage class and inside BoxDecoration.
class Home extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage("assets/image1.jpg"), fit: BoxFit.cover),
),
child: Center(child: Text('Welcome To',style: TextStyle(
color: Colors.white,
fontSize: 40.0
),)),
)
);
}
}
Upvotes: 15
Reputation: 316
Try this;
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/splash.png"),
fit: BoxFit.cover
)
),
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: 150.0),
child: JumpingDotsProgressIndicator(
fontSize: 50.0,
numberOfDots: 4,
dotSpacing: 2.0,
color: Colors.white,
milliseconds: 400,
),
),
],
),
);
}
You can customize child section.
Upvotes: 0