Challenge: A Flutter Website

I recreated my old website in Flutter and learned some things on the way

Photo by Florian Klauer on Unsplash

My website is almost as simple as it gets, having just 2 "pages": home and contact.

I quoted pages because there the website is actually a SPA with 2 views. I built it a couple of years ago and used PicoCMS and its out-of-the-box Astral theme for that.

It is more like a business card where people can see the services provided by the Constanting sole proprietorship and they can get in contact if they require my services.

The website is responsive having a layout for mobile devices and one for the rest.

I'll provide the project code at the end as a Git repository, though I won't go into detail on all nuts and bolts that make up the website. I'll detail only what I considered challenging in the process.

Constanting’s website

So let's get started.

1st challenge was to recreate the same background with its overlaying repeating pattern.

In the old website, the background is composed of a 1400x900 px gradient JPG image and a transparent pixelated 128x128 px PNG image.

The pixelated background.

The background.jpg gradient image stretches to cover the width and height of the entire browser window and the overlay.png transparent pixelated images overlay it using horizontal and vertical repetition.

To obtain this effect in Flutter one solution is:

home: Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage("images/background.jpg"), 
            fit: BoxFit.fill
        ),
    ),
    child: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/overlay.png"), 
                repeat: ImageRepeat.repeat,
            ),
        ),
        child: HomePage(title: 'CONSTANTING'),
    ),
),