Building the Layout
When building the layout, an important step is to know what they layout should look like first. You can sketch the layout on paper, or use a tool which helps build layouts.
When looking at your sketch, you will want to identify all of the rows. There may be columns within the rows. Just because there are columns in one row doesn’t mean there will or won’t be in another. The row is the key layout element in Flutter, so all layout needs to fit within a row.
Does your layout need a grid, similar to an HTML table? Note that a grid can fit inside of a row.
Will you need tabs for your layout? Tabs are a great way to keep grouped elements together, and keep from making your user have to scroll, however, you can go tab overboard. I’ve seen screens with over a dozen tabs, which makes it harder, not easier to use.
Will you need to space out elements. Using padding and margins, similar to HTML, you can create space between elements,which may be important for readability, and/or usability. Especially on mobile devices two buttons too close together can cause issues with clicking on the wrong button.
Next, look at each row, and identify the elements with that row. This will be used to help us create that information later. Will you have icons, text, image, etc? Knowing what you have, and starting to name it is a big help in laying out your app.
Learning about Flutter Layouts was originally found on Access 2 Learn
One Comment
Comments are closed.