Sign in

Constantin Stan

FLUTTERING UP

A timeline of Flutter by a Flutter developer.

If Flutter is something new to you, then you should know that Flutter is a Google-backed cross-platform software development framework. A Flutter app can be developed, built for, and deployed on multiple platforms from a single codebase.

Currently, the supported platforms are Android, iOS, web, macOS, Linux, and Windows.

Almost a year ago I was taking a look at what Flutter was capable of in terms of cross-platform and why cross-platform might be a good choice. The points I made there are still valid.

Here, we'll go through a short timeline of Flutter, its current state, run a test app…


BUILDING BLOCKS

Photo by Toa Heftiba on Unsplash

Now that we've got Flutter installed and our set up ready for development we could jump in headfirst and start coding, or we could do the smarter thing and define what we're going to build.

If you still feel uncomfortable with Flutter and Dart (the programming language that powers Flutter) and want to follow along with the Building Blocks series then I recommend you spend some time with some free resources like the Programming Flutter book by Carmine Zaccagnino from The Pragmatic Programmers or the series I did on Dart in the context of Flutter. …


BUILDING BLOCKS

Photo by Mona Eendra on Unsplash

When you're set to build a Flutter mobile, web, and/or desktop application, you'll almost every time start the same way.

If you start from nothing at all, you might consider first installing and setting up Flutter itself. If you already have Flutter installed you can simply create a new project.

I'll do a summary of the installation process and creating a new project as presented in the Programming Fluter (a book by Carmine Zaccagnino from The Pragmatic Programmers).

Installing Flutter

The installation process differs from operating system to operating system. The easiest way to make sure you get it right from the…


BUILDING BLOCKS

Photo by Ashley West Edwards on Unsplash

Building a visual identity for a software product is a process that usually starts in my head. I start thinking of how I can relate to what the product is or should be about. I link it to my past experiences and the knowledge I have of the domain it belongs to. I think of how I can make sure the users perceive the product as intended and its image is representing the function of the product.

After that, the "discussion" moves on paper. …


BUILDING BLOCKS

Photo by Glen Carrie on Unsplash

I was one-third into my 100 days of Python journey and I just scribbled something into the 34th box that was part of a table that I received and printed.

Tracking progress is important. It keeps us motivated and gives us a sense of completion. Box by box, day by day, the grid of boxes filled in and did its job. Kept me motivated. That and discovering some interesting details about Python. The entire effort was just to fill my curiosity about this particular programming language, not out of necessity.

In the past, I've interacted multiple times with Python, even…


https://flutter.dev

What we'll build?

A simple web app called The Background App. It'll be just a canvas colored with a default color. We'll be able to manipulate the color by passing it as a parameter in the URL of the browser.

Why is this useful? Sometimes I want to grab screenshots of certain on-screen elements and have a specific color fill as background. So the use case will be that we'll go to that web app, set the desired color, and bring the elements we want to capture on top. …


Googleplex, Google's global headquarter, located on a map using a Plus Code. Map data ©2020 Google

The Open Location Code (OLC) is a geocoding system developed by Google that was released in October 2014. Location codes created by the OLC system are referred to as Plus Codes. These codes are supported by Google Maps search since August 2015.

Plus Codes are designed to be used like street addresses and can be useful in places where there is no formal system to identify buildings, such as street names, house numbers, and postcodes.

In the following examples, we'll use Google's global headquarters location.

The latitude and longitude for their headquarters are 37.422062, -122.08406.

The mail address is 1600…


MagSafe Chargers.

MagSafe is one of the new things that Apple unveiled with its iPhone 12 line-up in late 2020.

This technology created a special category of accessories from Apple or third-party manufacturers. This is how we got the iPhone MagSafe Charger, wallets, the colorful cases, car mounts, and many others.

The MagSafe Charger is one of the new accessories from Apple that uses this "innovative" technology.

“The MagSafe Charger makes wireless charging a cinch.”

I have the charger for more than a week. Using it wasn't disappointing but it could be better.

The charger just snaps firmly in place and it…


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…


Photo by Euwen on Unsplash

This example is provided as a FlutterPen and I won’t detail how to create a Flutter app. Instead, I will explain the code that manages the state as a decimal value using bitwise operators like AND, OR, or NOT.

Control movement

We’ll alter a state using the WASD keys (or the equivalent arrow keys ⇧⇦⇩⇨) and use that state to move an object on the screen.

That object will be a logo and its default position will be centered on the screen. …

Constantin Stan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store