Step 3: Body

You might look at the design and think the building the body of this site will take forever and it’s super complicated. But fear not, we’re going to build it in just a few lines of code.

Remove the comment // Body from our code and replace it with a new StatelessWidget named “Body”. This widget is going to contain our background image and column of text. Breaking up large build methods into smaller more manageable widgets is a great way to maintain code readability.

Since the image is aligned to the left of the text and button, it makes sense that both should be placed in a row. Expanded widgets are used to give the image and column which contains the text a flex value. This value is used to tell the widgets how they are to divide the available space. Since both have a Flex value of 1, space will be shared evenly between both widgets.

Notice we simply use the name of the image as the path. This is because our image is located in the root of the assets folder and not in a sub-directory. Remember all assets are relative to assets/ .

To centre align the text and button in the Column , MainAxisAlignment.center, is set as the alignment. The font family for the text uses the name we gave it in FontManifest.json .

Reloading our app now you’ll see that we’re almost finished, we have a background image with some text and a button to the right of it. You can even try resizing your browser windows and to observe how the image and text shirking as it is made smaller. Even though we did not write any code to handle this, it works as expected. In a later section, we’ll customize things even further so as the window width gets to the size of a mobile device, the layout changes.

The final piece of the puzzle is the social buttons. To create this, we need a Row of FlatButton s. Their child is going to be wrapped in a Center containing an Image.asset with the path to the appropriate asset image. We are also going to set the mainAxisSize to min since we do not want to Row to extend to the end of the screen. Notice we are creating a variable to set this size then exposing it via the constructor. We will use this in the responsive section of the tutorial.

To keep our main.dart file tidy, let’s move this widget into a separate file in widget/button_row.dart then import it.

Now all we need to do is add our buttons to the Stack and wrap them in an Align with the alignment set to bottom right.