Flutter wall layout design
In a previous article, I spoke about developing your own custom layout, taking example on some design i found in dribbble.com website. It ended into the development of a new flutter package named flutter_wall_layout.
Previous article
https://david-gonzalez-1987.medium.com/flutter-custom-layout-512795afbba6
Library
Today, I will give you some example about how this layout can be used.
I’m not a UI/UX designer, so my concern is only to avoid big mistakes.
What WallLayout is best for ?
If you want to display few elements in a specific way without scroll, you may not need WallLayout, and you should look at Stack, Row, Column, Expanded widgets. They may be easier to handle.
If you want to display a big set of widgets on several columns, then you may prefer using Grid widget. In that case every child will have the same size. If you want to handle columns with different sizes, you can still do it by defining a ListView, where each child is a Row having their children width handled by Flexible widget.
WallLayout advantages are best shown on a big set of rectangle widgets having different sizes. It may appears to you interesting for few uses, but you may keep your code as simple as possible, isn’t it ?
On another side, defining layout with a specific number of columns (or rows) may also be used to improve your application layout on different sizes of screens. That’s the famous “responsive design”. Yeah but… It may not be as flexible as web responsive design, as you won’t be able to control positions of the WallLayout’s children.
So you have to be aware (and so your customer) that items order may vary. And consequently items order should not be a big concern. I mean, it’s not like shuffle all elements, but little squared widgets may move, as the display algorithm runs line by line, finding the first available place to position each widget.
It’s hard to get a good result when you want to guaranty a good layout on 2, 3 and 4 columns (depending on the screen resolution).
So the main question is: how can I do a good display ?
Animate elements of the Wall Layout
My first usecase is a basic set of pictures. The idea was to highlight beautiful pictures by their size. The more interesting pictures could appears bigger.
Also, it allows me to display at the same time landscape and portrait pictures.
You shall have a good mix between big and small pictures, in order to avoid holes in your wall
Concerning animation, you can see that there is a little “disorder”. Images are revealed approximately from top to bottom, but there is some artifacts. In fact, I set a delay using the position of the child in the list, but it does not guaranty that this order will be kept during the render step.
The only thing you can be sure is : the first element will be rendered first.
I used that limitation to focus my design on the first element. You will be able to see that the first element has a specific animation (Curves.elasticOut), and the other widgets are hidden until the first animation is finished.
In that example, the first picture is the Occitan cross, symbol of my region (Toulouse, south of France)
I always want (need?) to do mode complex and styled animations, but at the end it sounds unnecessary.
Define types of child you will have in your layout
It’s easy to make display good when you only have pictures to display. But if you want to add text, buttons or other elements in your layout ? It’s time to talk about the second usecase i made.
In that example, I mixed images and texts children to get a display that could show and describe a product.
There is a lot of things to tell, so we won’t speak about the colors choice and cropped images to avoid having images duplicated.
Also, I worked on the order of elements, to have a correct display on 2, 3 and 4 columns.
I tried a lot of designs, ending with failures. It allows me to understand that content is also specific:
- You cannot control where the last element is displayed, especially if it’s a small one.
- You shall keep succinct sentences. A big paragraph make the design heavy. Instead, you may split it in several elements (and with different sizes).
- It appears that it’s more easy to design a wall of 3 columns first, then 4 and finally 2. With the restriction that every elements width are compliant in every situations.
- Perception is great when every element are tiles (colored background). Having no background or transparent one is not a good idea.
Some usages perception
To conclude, I will hare with you my impressions (meaning subjective point of view) of the widget I created.
In one hand, it’s very easy to use it, because its pretty much the same design as the ListView widget.
But as explained, there is only few situations where it can be used. More especially, it works very well if a wall full of pictures.
Also, I had different perception about these two usecases :
- In the second usecase, I used only one color (emerald gradient) on all text elements. It’s a direct reference to the jewel color. I haven’t tested different colors for that kind of element, but I’m not sure it worked for that example.
- It seems strange to me when there is too much text elements in the layout (compared to images). That’s why i duplicated images, cropping them to avoid having the feeling or repetition.
- As you can’t have a full control of the children’s position, then some design may be not satisfying. So a unique page using the WallLayout may be risky if you want to perfectly control the design.
- The padding between elements may be used to make funny or more professional applications. For me, a small padding and small border radius seems more professional.
I found these only two usecases, and I’m interested on new ones. Any idea ?
If you want to have a try, you will be able to find the source code for this article here:
Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm
