Background image is used in many mobile applications to make the View beautiful. As we have already seen social apps is giving us the option to configure us background using your own images. In flutter the Scaffold widget directly dose not support background image customization but using Container widget as Root Parent widget we can easily put background image in activity screen. We have to use Box Decoration property with Decoration Image to put background image on whole layout screen. So in this tutorial we would Flutter Add Set Full Screen Background Image to Scaffold Container Widget Android iOS Example tutorial.
Contents in this project Flutter Add Set Full Screen Background Image to Scaffold Container Widget Android iOS Example:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() inbuilt method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area in MyApp class. Now we would make Scaffold widget and put a Center Widget in it.
|
1 2 3 4 5 6 7 8 9 10 11 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Set Full Screen Background Image')), body: Center( ) ) ); } |
5. Creating a Container Widget in Center widget as Child. We would use this Container widget as Root Parent Widget and put all the widgets in its child.
- constraints: BoxConstraints.expand() : is used to create container full screen with filled content.
-
BoxDecoration : Used to decorate the Container widget. We would use the image property of box decoration to set background image from URL resource.
|
1 2 3 4 5 6 7 8 9 10 11 |
Container( constraints: BoxConstraints.expand(), decoration: BoxDecoration( image: DecorationImage( image: NetworkImage("https://flutter-examples.com/wp-content/uploads/2020/02/dice.jpg"), fit: BoxFit.cover) ), child: Center(child: Text('Set Full Screen Background Image in Flutter', textAlign: TextAlign.center, style: TextStyle(color: Colors.brown, fontSize: 25, fontWeight: FontWeight.bold),),) ) |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Set Full Screen Background Image')), body: Center( child: Container( constraints: BoxConstraints.expand(), decoration: BoxDecoration( image: DecorationImage( image: NetworkImage("https://flutter-examples.com/wp-content/uploads/2020/02/dice.jpg"), fit: BoxFit.cover) ), child: Center(child: Text('Set Full Screen Background Image in Flutter', textAlign: TextAlign.center, style: TextStyle(color: Colors.brown, fontSize: 25, fontWeight: FontWeight.bold),),) ) ) ) ); } } |
Screenshot:
Thanks for the solution to implement this!