You may notice the comments referring back to the Pug file. These can be turned off, but help the VSCode flutter-view plugin (and you) easily navigate between the Pug file and the Dart file.

Also, notice comments are created for #title and .greeting ids and classes in the pug file. These can also be turned off if you wish.

Using the new homepage

A view is simply a Dart function that renders some widgets. This means you can use it in your application as any other Flutter function. Let's change main.dart to show our new homepage:

At the top of main.dart, import our new dart file:

import 'screens/homepage/homepage.dart';

And to use our new homepage, we need to set it as home:

// home: MyHomePage(title: 'Flutter Demo Home Page'),

home:HomePage(),

Now refresh your app, and you should see this:

Hot Reload

One of the powerful features in Flutter is hot reload. You can do the same thing with flutter-view.

Start flutter-view in watch mode in your project directory:

flutter-view -w lib

Now any changes you make will automatically be detected, and the Dart file will be updated. Try changing the Hello world! text in homepage.pug and press the refresh button in the emulator to see your changes.

Adding Styling

Our homepage looks very bland, so let us add some styling.

In the same directory as homepage.pug, create a new file called homepage.sass. Let's style the .greeting:

homepage.sass

.greeting

color: blue

font-size: 30

font-weight: bold

Press hot refresh in your emulator and you will now see the greeting styled:

Now let's add an image. We can choose to use a NetworkImage directly, or to use a background decoration on a container. To do the latter, we need to add the cover container for the image. Since we want to have the image and text to be centered together, we can wrap them in a FittedBox widget. To do so, change homepage.pug:

homepage.pug

home-page(flutter-view)

scaffold

app-bar(as='appBar')

#title(as='title') Welcome

center(as='body')

fitted-box

.cover

.greeting Hello world!

​

Flutter-view has shortcuts that recognise CSS-like properties, and transform them into code. Setting a background-image property on a Container will add an BoxDecoration with a DecorationImage, and set it to the decoration property of that Container. Add the following to your homepage.sass and press refresh on your emulator:

.cover

width: 300

height: 300

background-size: cover

background-image:url("https://goo.gl/49zLA9")

The result should look like this:

If you look at the generated homepage.dart, you will see how flutter-view took homepage.pug and homepage.sass and merged them:

Feel free to play around with some CSS styles to see effect. Some of the things you could try:

add margin between the cover image and the greeting by adding margin-top: 10 to the .greeting class in homepage.sass.

instead of a background image, give the .cover class a background-color: blue.

Currently you need to press the hot refresh button in your emulator to see changes. In the next section we add Visual Studio Code support so this will happen immediately when you change your .pug or .sass file.