Test drive
Last updated
Last updated
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.
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.
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:
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:
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.
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:
Now refresh your app, and you should see this:
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.
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:
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:
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:
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.
