To keep it simple, i’ve set the label/title as a Text widget but you can go wild. We won’t have to drag around fancy anonymous functions.Īs you can see, both the BottomNavigationBar and the NavigationRailDestination expect an icon and a label. So we are going to be creating a unique Class called Destination with a few convenience methods to avoid duplication later on.Īdding getters to “transform” our Destination will let us easily map over a List of Destination later on. These two widgets expect different types as their destination item. On smaller screens, our Navigation Bar will be a BottomNavigationBar while on larger screens, we are going to be using a NavigationRail. Our app is going to very simple, containing only a Navigation Bar and the currently selected screen to be shown. According to the latest stats, even the COVID induced stay-at-home hasn’t done much to reverse the trend, which makes me believe mobile browsing is here to stay. It is also important to realize that Mobile internet usage has overtaken Desktop internet usage for a few years now. One positive side effect of such a design is that components made for a mobile screen actually transpose well to a larger screen where they can easily be composed together as needed. More famous people have called this “Mobile First Design” and there a few good reason to go about it this way:Ī phone screen is obviously way smaller than a computer’s screen meaning that you have to focus on the essentials, resulting in components that are self contained and easily legible. Starting from MobileĪs a rule of thumb I usually start designing with mobile in mind. This post requires you to use Flutter 1.17 at the very least with a preference for Flutter 1.18 upwards.

This post is meant as a way to show a few tricks I’ve picked up and how you can use them for your projects. I enjoy using Flutter, it’s easy to start a new project, easy to test, easy to profile and Dart (the language that powers it) does away with all my gripes with JS.īut as my first usage of Flutter was to make mobile apps, I’ve had trouble adapting to the newer web and desktop targets, especially when dealing with designing for larger screens.

Flutter responsive layout