07 Sep

Innovation and Technology go together like peanut butter and jelly. When I learn about the innovation process I like to use technology to reinforce those concepts. The technology I’m intrigued by lately is Flutter and the business concept is the Business Model Canvas. So how do I combine the two? I decided to build a Business Model Canvas using Flutter. Why Flutter? Because Flutter is a UI toolkit which allows you to build experiences on mobile, desktop and the Web. It will be a fresh new way to help people understand and have access to the Business Model Canvas. I’ll write more about the Business Model Canvas in another blog post because I want this series of blog posts to focus on the technology.

The Tech Stack

As an experiment, I want to determine what it takes to bring a cross platform Flutter application to production. I wanted the experiment to be realistic but not overly complicated. I’m a big fan of Google Cloud Platform and Microsoft Azure so I knew I wanted my backend to run on one of these platforms. I chose Azure for a few reasons:

I knew I wanted to use Cloud Functions for computation based on certain events, but I didn’t want to write them in JavaScript/Node, Go, Python or Java. I wanted to use C# and only Azure allowed me to do so.
The newer features of C# 7, 8, and 9 are exciting and the performance of .NET Core is compelling.
At my day job we use Azure DevOps and I wanted to experiment with building a CI/CD pipeline using GitHub. Azure has excellent integration with GitHub.
I use Jetbrains Rider as my preferred C# IDE on the Mac and I think the Azure integration is much better than the Google Cloud Code integration.
Rider is a great IDE! I feel like I learn how to write better code using Rider. It’s like having a more experienced engineer watching over my shoulders and showing me how I can improve my code.
Using Rider reduces my context switching with IDEs since I use Android Studio for building Flutter apps, and both are made by JetBrains so I’m able to be more productive.

The Design

There are so many well designed apps built with Flutter. However, I started with a simple sketch using pencil and paper.

The plan is to design a beautiful, cross-platform accessible application leveraging Flutter’s strengths in design, animation and native performance. As I learn more about Flutter’s expressiveness, I’ll bring those learnings to the app. When reviewing Flutters apps on the web, people usually push the limits by building high performing and visually stunning apps. That’s also my goal but also to explore use cases and experiences that are not commonly demonstrated.

Experiences

Here are some examples of how I would like to demonstrate the power of Flutter:

Incorporating Adaptive Cards using Neohelden’s Flutter library. Read about their story here.
Targeting smart display platforms such as Google Home Hub.
Incorporating services like the Microsoft Graph.
Incorporating payments using Stripe’s Flutter plugin.
Incorporating advertising networks tastefully.
Introducing machine learning use cases.
BONUS: I would also like to try creating screens using Supernova and custom animations with Rive

During this series, I’ll document my experiences and post code snippets. I’ll share my work on GitHub, Twitter and LinkedIn. When I think I have an MVP I’ll release it to the various App stores and the Web. All constructive feedback is welcomed. You can leave a comment below or send me a message via GitHub, Twitter or LinkedIn (see links above) or contact me via my website.