Test drive

To get to know how flutter-view works, let's create a little hello world example project. You can also find this project in the examples repository.

Create an example flutter project

Make sure flutter-view is installed correctly.

Open a terminal and go to where you want to create the test project:

cd projects-directory

Create a new Flutter project:

flutter create flutter_testdrive

Open the project in your favorite editor. VS Code is recommended.

Try running the test project in an emulator to see if it all works.

Adding a screen using flutter-view

Now that we have a working project, let's create a flutter-view that shows a simple welcome screen.

In the lib directory of your project, add a directory called "screens". In it create a directory "homepage". In the homepage directory, create a file named homepage.pug.

Now let's create our first flutter-view. Open homepage.pug and put in the following pug code:

homepage.pug

home-page(flutter-view)
	scaffold
		app-bar(as='appBar')
			#title(as='title') Welcome
		center(as='body')
			.greeting Hello world!

This code will create a material Scaffold with an AppBar and put "hello world!" in the center of it.

To convert this flutter-view into Dart code, we need to run flutter-view. Go to your project directory in your command line, and type:

flutter-view lib

Then check your lib/screens/homepage directory. Flutter-view should have generated homepage.dart there:

hompage.dart

// some imports

Scaffold HomePage() {
  return Scaffold( // project://lib/screens/homepage/homepage.pug#2,2
    appBar: AppBar( // project://lib/screens/homepage/homepage.pug#3,3
      title: 
      //-- TITLE ----------------------------------------------------------
      Container( // project://lib/screens/homepage/homepage.pug#4,4
        child: Text( 
          'Welcome',
        ),
      ),
    ),
    body: Center( // project://lib/screens/homepage/homepage.pug#5,3
      child: 
      //-- GREETING ----------------------------------------------------------
      Container( // project://lib/screens/homepage/homepage.pug#6,4
        child: Text( 
          'Hello world!',
        ),
      ),
    ),
  );
}

// _flatten method

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://cutt.ly/Gat1ivy")

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:

homepage.dart

Scaffold HomePage() {
  return Scaffold( // project://lib/screens/homepage/homepage.pug#2,2
    appBar: AppBar( // project://lib/screens/homepage/homepage.pug#3,3
      title: 
      //-- TITLE ----------------------------------------------------------
      Container( // project://lib/screens/homepage/homepage.pug#4,4
        child: Text( 
          'Welcome',
        ),
      ),
    ),
    body: Center( // project://lib/screens/homepage/homepage.pug#5,3
      child: FittedBox( // project://lib/screens/homepage/homepage.pug#6,4
        child: Column( 
          children: __flatten([

            //-- COVER ----------------------------------------------------------
            Container( // project://lib/screens/homepage/homepage.pug#7,5
              decoration: BoxDecoration( 
                image: DecorationImage( 
                  image: NetworkImage( 
                    'https://cutt.ly/Gat1ivy',
                  ),
                  fit: BoxFit.cover,
                ),
              ),
              width: 300,
              height: 300,
            ),
            DefaultTextStyle.merge( 
              child: 
              //-- GREETING ----------------------------------------------------------
              Container( // project://lib/screens/homepage/homepage.pug#8,5
                child: Text( 
                  'Hello world!',
                ),
              ),
              style: TextStyle( 
                fontSize: 30,
                color: Colors.blue,
                fontWeight: FontWeight.bold,
              ),
            )
          ]),
        ),
      ),
    ),
  );
}

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.