[Flutter] Adding background image to your pages

By

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(



Comments

Post a Comment

Popular posts from this blog

EMGU with Xamarin Forms guide [part 1]

By
Image
I- Introduction, OpenCV and EMGU Do you know OpenCV ( Open Source Computer Vision Library:  https://opencv.org/ ) ?  This open source library let's you work and play with images and videos with a lot of powerful image processing algorithms !  If you want some details, I suggest you to first navigate to the link above or search for 'OpenCV' on Google.  Examples of OpenCV processing found on the web (filters, object detection, edges...): EMGU is a .NET OpenCV wrapper. That means that you will be able to use OpenCV functionnalities in your .NET projects using C# for instance. EMGU is cross platform, so you will also be able to use it in your Xamarin projects ! That's great because there is no advanced image processing library in Xamarin. In this article, we will talk about EMGU and list the steps to setup a Xamarin Forms project using EMGU . It may help you because, we must say that it's not a trivial task...  II-What do I need to
Read more »

[Xamarin Forms] Custom bottom bordered entry (iOS & Android)

By
Image
Custom entry with renderers For my Xamarin Forms project I needed to render an 'Entry' control with a bottom border of a specific color. There are several possibilities but I will show you mine. For that, I used renderers. iOS one is particularly not trivial. The wished result look like that: iOS Renderer [assembly: ExportRenderer(typeof(ExtDatePicker), typeof(ExtDatePickerRenderer))] namespace MyCompany.iOS.Renderers { public class ExtDatePickerRenderer : DatePickerRenderer { protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e) { base.OnElementChanged(e); // Need to connect to Sizechanged event because first render time, Entry has no size (-1). if (e.NewElement != null) e.NewElement.SizeChanged += (obj, args) => { var xamEl = obj as DatePicker; if (xamEl == null) ret
Read more »

Set your browser on Fire with P5.js

By
Image
This post is made for those (like me) who like image processing , web development and maybe, for those who want to learn new programming technics ... - I will make you discover p5.js , a javascript library specialized in graphical creation for your web browser ! - I will also talk about the the Youtube channel "The Coding Train" presented by Daniel Shiffman. A lot of its videos are based on P5.js. It was for me a great source of inspiration and made me discover javascript (because I'm a newbie with JS...) So I'm pretty sure, you will learn a lot too... - Finally I will present you my personnal example of what I did with P5.js. It's about an old retro fire effect (used in demoscene few years ago) :) So let's begin with p5.js ! I- What is P5.js ? a- Presentation As I mentionned it previously, P5.js is a graphical Javascript library. With it, you will be able to make great effects in your web pages in a few minutes.  This lib
Read more »