[Flutter] Adding background image to your pages

There are many ways to add a background image to your pages, but the most common way is to use a BoxDecoration Widget.

The BoxDecoration Widget is placed under a parent Container Widget (container.decoration).

Then, you can customise the Image decoration using Assets images, Network images...

Sample code (with an asset image):

@override

Widget build(BuildContext context) {

return GetBuilder<MainPageController>(

id: 'mainpage',

init: MainPageController(),

builder: (vm) => Scaffold(

body: Container(

width: double.infinity,

height: double.infinity,

decoration: const BoxDecoration(

image: DecorationImage(

image: AssetImage('assets/images/dark_background2.jpg'),

fit: BoxFit.fill,

)),

child: SafeArea(

top: true,

bottom: true,

child: Container(