First Step Towards Flutter Responsive Layouts

The first step in towards responsive layouts is thinking in a declarative way instead of the imperative OOP way. We can do this by bending Widgets to our wants and desires, since they are in fact somewhat functions to return outputs. Let me show you how.

Background

So what got me started down this path is the source to Material IO team’s adaptive navigation:

Now, see how they have to do a typedef and resolver:

typedef NavigationTypeResolver = NavigationType Function(BuildContext context);

// The navigation mechanism to configure the [Scaffold] with.

enum NavigationType {

// Used to configure a [Scaffold] with a [BottomNavigationBar].

bottom,

// Used to configure a [Scaffold] with a [NavigationRail].

rail,

// Used to configure a [Scaffold] with a modal [Drawer].

drawer,