.png)
Designing for Desktop
If you have been in product design long, you know that it is best practice to start with the smallest screen size first. It is always harder to fit everything on a mobile screen rather than a tablet or desktop. But when implementing a responsive design in Flutterflow you will find it structurally better to develop the desktop design first and then adjust to mobile after, and in order to do that we will follow the steps below.
But how do we do that? We start with rows instead of columns.
This is mostly in regards to desktop designs that require a side navigation or multiple horizontal content views that won’t all be visible on mobile. Check the below graphic to see how we would set up the structure for these two types of web applications.
It is very easy to make responsive applications if we set stuff up correctly. When creating web apps with side navigation our goto base structure is:
Row > Container (Web/Tablet Nav) | Column > Column + Container
We always make our main navigation a “Component” and setup parameters – think of these as overrides in Sketch (there isn’t really a comparison in Figma). You can then manage your main nav in 1 location and just change the page specific variables throughout your app. It is quite manual at this process but hey better than having to learn to code 😎.
When building for Mobile – Flutterflow allows for some amazing out of the box configuration for your app navigation with App Bars & Nav Bars but when dealing with web apps there are so many different types and structures and everything is basically free form.
Building your web navigation
Now that you have your structure set up - you can dive into the look & feel of the navbar for web & we will get to the mobile nav at the end. While building we like to set up our links in containers and apply padding there, then adding a row, icon & text element.
We can then make this navigation a component as we mentioned above. And hide it on mobile views using responsive visibility.
After building out the web navigation, we can begin building our mobile navigation. There are a few ways that you can build this out;
- You can put the side menu in a drawer and then show a “menu icon button” trigger on mobile to open the drawer.
- Or you can simply create a bottom navigation bar that is a more common structure in mobile app development.
Both of these have different implementations.
* Coming soon* responsive visibility for Navbar & Appbar in Flutterflow.
After we have the main structure down & the web navigation built the question is how do we do multiple columns like you would in Bubble or on the web, or is this even possible? The answer is yes, but so far it is a little bit of a hack to get this done. By that I mean you have to think of it more like adaptive design than actual responsive design. We have the ability in Flutterflow to create separate widgets for each view (i.e. a 3 column layout to a single column layout) using responsive visibility.
Building your Mobile Navigation
As we mentioned before there are multiple ways of setting up your mobile navigation depending on the platform you are targeting and what type of app, how many pages your app has.
We can then make this navigation a component as we mentioned above. And hide it on mobile views using responsive visibility and we can begin building our mobile navigation. There is a few ways that you can build this out; you can put the side menu in a drawer and then show a “menu icon button” trigger on mobile to open the drawer. Or you can simply create a bottom navigation bar that is a more common structure in mobile app development.
