Never miss a beat

Join my newsletter.

Tag: dart

Flutter's LayoutBuilder Widget

Published: 6/7/2021

Flutter's LayoutBuilder Widget is a widget that allows you to adapt children widgets based off the constraints that the LayoutBuilder is contained in. This allows you to layout widgets differently in different sized containers (like a phone screen vs a tablet screen), but LayoutBuilder also allows you to change how widgets render based off the container that they're rendered within. A good example of the later is rendering a list of items as a list when the container is taller than 500 dp, but…

Dart Mixins Guide

Published: 4/24/2021

There are a lot of alternatives to inheritance. Abstract classes, interfaces, some languages have "traits", and in Dart, we have Mixins (and abstract classes and implicit interfaces, too). Mixins are a way to reuse class code in multiple class hierarchies. How do you declare a Mixin in Dart? Mixins require using 2 different keywords to fully make use of them in Dart. First, we use the mixin keyword to declare a new mixin. Our mixin can then be applied to other classes using the with…

Reusable SimpleDialog Bodies in Flutter

Published: 1/17/2021

SimpleDialogs are an insanely simple way to display immediately actionable items while conforming to the Material Design specification. They're recommended for use when you need a flexible dialog that doesn't leverage text buttons. Take a moment to familiarize yourself with the Material Spec for SimpleDialogs and once you're back on this tab, we'll dive into their implementation specifically for Flutter. SimpleDialogs in Flutter Alright! Welcome back! SimpleDialogs in Flutter are actually…

How to query flutter dimensions with MediaQuery

Published: 12/24/2020

One of the key selling points for building Flutter applications is the framework's options for building responsive mobile applications. However, it's easy to find yourself overwhelmed by the many options that are available. Often times, you'll want to leverage BoxConstraints, LayoutBuilder, AspectRatio, FittedBox or maybe even the rare FractionallySizedBox. You might even be able to keep things simple by sticking to Flex widgets. However, you'll likely find yourself in a predicament where, for…

Building a CI/CD Pipeline for Dart Packages with Github Actions

Published: 10/5/2020

If you look back at any of my blog posts, you’ll likely find an introduction like “Recently I was exploring…” This time is no different. I’ve been exploring Dart (and have dreams of a frontend framework written in Dart) as well as Github Actions . At work, we recently migrated TeamSnap UI (our open source component library) from our internal CI pipeline to use Github actions and it’s worked out really well. I’ve been writing Essence (a Dart virtual DOM implementation) and decided that…

Working with JSON in Dart

Published: 9/27/2020

JSON is, as of 2020, the communication standard for most web applications (comon gRPC ! You can do it!). Naturally, if you’re building a Dart application, you’ll likely want to work with JSON. Dart’s built-in dart:convert package is just the tool that you need! Creating a Model One of the first things that you’ll probably want to do is to create a model for your JSON data. In this example, we’ll use a simplified version of the Github API’s repository request . If you’d like to inspect the…

Dart's Futures and Streams

Published: 9/26/2020

Asynchronous programming in Dart is an absolute blast. Dart offers a couple of different options when writing asynchronous code: namely Futures and Streams . You can use both Futures and Streams to solve a lot of the same problems, but each serve their own purpose as well. Futures are a type that models a computation who’s value may or may not be available. If you’re unfamiliar with Futures, you can think of getting a receipt at your favorite fast food restaurant as a Future. At some point…

The Many Constructors of Dart

Published: 9/9/2020

Last night, as I was writing code in a Flutter app, I came across an interesting dilemma. I wanted to throw a custom exception if I was unable to sign in with Apple on the login screen — nothing too crazy. Naturally, this lead me to creating a custom exception. I tried something along the lines of: However, I found out quickly that this wasn’t valid. In fact, you get an error that looks like this: The generative constructor 'Exception Exception([dynamic message])' expected, but factory found…

Flutter routing inside of the Scaffold

Published: 8/11/2020

If you’re coming from React Native to Flutter, one of the first things you’ll likely ask is “How do I do routing?” First, I’d ask you to consider if you actually need routing. Instead, could you just have a global state that determines which screen to show? In most cases, probably. But if you want things to feel right when building Flutter for Web (or want decent deep linking support), you’ll probably want to build your flutter app with routing. Routing can easily be accomplished via the…