Use Flutter to set a screen background image, darken the image and apply a gradient effect on top of your background image.

Source Code | https://github.com/JohannesMilke/background_image_example

TIMELINE

• 0:00 Introduction Set Background Image
• 0:23 Set Network Background Image
• 1:19 1. Problem Not Expanded Background Image
• 2:49 2. Problem Moving Background Image
• 3:43 Set Asset Background Image
• 4:40 Fix Background Image Loading Too Slow
• 5:07 Reduce Background Image Size By Compressing
• 5:38 Reduce Background Image Size By Scaling Image Down
• 6:44 Darken Background Image / Image Color Filter
• 7:34 Fix Moving Background Image When Keyboard Opens
• 9:09 Create Reusable Background Image Widget
• 11:01 Create Gradient For Background Image / Shader Mask Gradient
• 12:02 Fix Shader Mask Gradient

#flutter