News and views on the world of interactive media from the gskinner team
Category / open source
After several months of hard work, we’re excited to announce our latest collaboration with Google, Canonical, and the Flutter Team, it’s a cross-platform app called Flokk!
What is it?
Flokk is a Google Contacts Manager, targeting Desktop, that allows you to integrate the Twitter and GitHub activity of your friends and contacts.
Flokk was built using the latest master branch of Flutter, and targets Linux, macOS, and Windows (with Web-Support thrown in as a bonus!). We spent a lot of time trying to make it feel like a native Desktop App and are extremely happy with the results. In the end performance was great across all the desktop platforms and rendering was extremely consistent. Flutter Desktop really looks like it could be poised for great things.
We worked closely with the Flutter team throughout the project to identify issues and develop workarounds. We will be posting more in the next couple of weeks about the architecture we used, challenges we faced, and some of the specific solutions we came up with.
In the meantime you can check out the code right now! The entire project is open-sourced on GitHub at https://github.com/gskinnerTeam/flokk. We’re excited to see what the community does with this project, and encourage you to clone or fork the repository and jump into the code.
Additionally we’ve posted builds for all operating system and web:
The current build is in a “production ready” state, but there were still a number of loose ends and features we were hoping to add, including a better narrow-mode menu and animated side-menu. In the coming weeks and months, we’ll be posting additional updates, and logging issues in Git for the community to potentially look at.
There is a lot to like about Flutter, but one area I’m sure no one loves, is taming the Material Theme system! With over 65(!) properties, some of which, like TextTheme, break out into 10 more sub-properties is enough to make you go crazy pretty quick.
Last week we looked at how you can easily implement TextStyling, and this week we’re going to dive into Color Themes. We’ll take a look at a technique that we use to implement custom app-specific themes, while still providing Material ThemeData to the core Flutter components.
The original thought was to add the methods to MediaQuery, which didn’t seem that appealing because it would still be quite verbose to access. Then we realized we could just use the build context directly, which turned out really nice! So nice, that we’ve gone ahead and created a package for it here: https://pub.dev/packages/sized_context.
One of the big issues with Flutter for Web right now is it’s lack of support for dart.io. This means things like a simple Platform.isAndroid call will cause your web builds to crash on startup. In fact, just including the dart.io package _at all_ will break your app completely.
In cases like this, what is needed is some form of conditional compilation, so we can include the code on some platforms, and exclude it on others.
Some platforms like Unity, have built in platform defines, which let you easily partition sections of code for specific platforms. Unfortunately, this is not so easy to do with Flutter, but it is possible!
Flutter is a mobile UI toolkit that combines fast development, expressive and beautiful UIs, with native performance. To test-drive the platform, Grant Skinner & Mike Chambers recently built Redrix: a mobile companion app for Destiny 2.
RegExr 2.0 was released a little over 2 years ago. If you haven’t used it, it is a great way to test, preview, and share Regular Expressions. We’re committed to updating and improving RegExr, and in January we quietly pushed out some features to help inspect and explain patterns.
Initially, RegExr only had one tool, the “substitution” panel, which let users show sample text with matches substituted using an expression. It was hidden by default, unless a pattern included a substitution expression. This tool has been renamed “replace”, and is now part of a larger “tools” bar, which we hope to continue growing in the future. In the meantime, it has a few other useful tools that I’ll describe below in more detail. Continue reading →
Sharing code and visual experiments has always been a huge part of my professional life. Experimentation in Flash launched my career, and remained an important theme in my presentations for years. I exhorted audiences to make time for play, but ultimately forgot to follow my own advice.
As the company grew, and life got busier, I lost the habit of building things for fun. I’d dabble now and then, but there was no real concerted effort to create something worth sharing.
This seems to have affected much of the industry. The lab section used to be an integral part of every agency’s site, now they are rare, and when they do exist, tend to be really sparse.
Hex grid experiment.
It’s time for that to change, at least for us. We’re launching our lab section today. It has a decent smattering of experiments already, and we’ll add to it as time goes on. Continue reading →