Weather App: Building Layouts in Flutter

Building layouts in Flutter is as easy as it gets. We can utilise various Widgets ranging from Material to Cupertino styled plus any Custom Widget we can build.

MeWeather UI Design

Although its easy to build layouts, making them responsive is a task of its own, this doesn’t mean you cant build responsive layouts with flutter, it just means that in this article I will just be showing how to build simple layouts with common flutter widgets like Column(), Rows(), Containers(), and my very favourite way of adding fixed spacing, SizedBox().

There are many ways of building layouts in flutter and as many ways of arranging widgets.

I just recently discovered another awesome just learn another way to do this I guess i’ll be trying it out in future projects.

The Coding

Here is what my final UI Looks like

Our layout here should be made up of Seven Rows with spaces between them and this is the way you should visualise your layout and implement it as follows:

These are just the major parent widgets that would house our other widgets

But in this article the method of layout building we will use is simple. You build a tree of widgets setting out the parent containers, rows and widgets (text can be included here also), then for more complex widgets like Buttons, InputFields I create a final object and then return that widget as the value of the final object.

In doing this we can then in any part of the layout call the final object and it is created in that instance. First we build the widgets we want to call from final values:

Next, in this project we need to use a custom background and place our other widgets on top of it so we wont be using a Scaffold() as we don’t need it. Instead we will be using a Stack() widget with two Containers stacked above each other with the one at the bottom being our background like this:

In the first container i’d like to have transparency, so as to show the second on top of it. Notice how i’ve used my BoxDecoration() inside a container and styled it with a BoxFit, set the image to an AssetImage(). Know what widget to use for a particular effect

Building our Seven Rows

Now we need to style and implement our Seven rows containing our icons, text etc.

As you’d notice i love using empty SizedBox() for spacing bot vertical and horizontal, this makes it easy while coding you might want to spend extra time later working on responsiveness so for fast development i encourage using SizedBox() for spacing

The 7th Row

The seventh row is a bit complex because the rows have more widgets than the other part, but this is the part where we get to use those first widgets we created and set them as final remember?

You might want to look at the full project on Github: https://github.com/Zfinix/MeWeather. Feel free to ask question and review thee code on github. Im still fixing some bugs and would write an article on the Weather API Part.