FLUTTER RESPONSIVE LAYOUT HOW TO

If the scroll is from top to bottom, and vice versa (vertical scroll) the cross axis is the horizonal one.

crossAxisCount: the number of columns in the cross axis.This is a way I found to make the UI responsive based on the characteristics of the flutter_staggered_grid_view library and the way many web libraries think for defining the number of columns based on the screen size, the widget I used is untBuilder which allows you to define two properties to structure the layout and the number of columns it has, in particular, the two properties have more or less this meaning: but what does the columnRatio variable mean? In this way, if the width of the screen is <= kMobileBreakpoint we'll show the CustomGridView widget with a columnRatio of 6 and so on. Then we can set up our LayoutBuilder like this LayoutBuilder( Let's first define the widths const kMobileBreakpoint = 576 flutter_staggered_grid_view: ^0.4.0Īfter that to implement a responsive layout we have to use a LayoutBuilder that builds a widget tree that depends on the parent widget's size, so we can define a set of widths, and based on them we can change the UI. The final result in different screen sizes will be:įirst of all, we have to import the flutter_staggered_grid_view package so we have to include it in the pubspec.yaml dependencies. make a simple card UI layout like Pinterest.use a very well know package in the Flutter world.display different layouts based on the screen size.We build a simple flutter app to implement a responsive GridView using an awesome package by Romain Rastel called flutter_staggered_grid_view, a staggered grid view which supports multiple columns with rows of varying sizes.

FLUTTER RESPONSIVE LAYOUT HOW TO

This article is in the series Simple Flutter Apps where I want to show how to code some simple apps in Flutter to help you get started. This is useful because now Flutter supports web apps and make a responsive UI a must-have in the web world. In this post, I want to guide you in a Simple Flutter App by making a responsive GridView.

Flutter responsive layout