Configuring flutter-view

Flutter-view does not need a configuration file to run. However by providing a configuration, you can use some more advanced features.

To configure flutter-view, put a file named flutter-view.json in the directory you run it from (normally your project root directory). The options you can set are described below. Each of these options is optional. Options will merge their values with the ones you provides.

For example, to change the indentation of the generated Dart to 4 spaces:

flutter-view.json

{
    indentation: 4
}

indentation

Changes the indentation of the generated Dart files.

Default value:

indentation: 2

ignores

Starting from flutter-view 2.0.0, instead of having error ignore statements generated per line, each view will have a couple of ignore statements at the top for the whole file. You can add your own. By default these are:

ignores: [
    // const is not always detectable, so by default suppress the errors
    'prefer_const_constructors',
    'non_constant_identifier_names',
    // we sometimes do unnecessary code but it should not cause performance issues
    'unnecessary_import',
    'dead_code',
    'unused_element',
    'unnecessary_cast',
    'unnecessary_string_interpolations',
    'invalid_null_aware_operator',
    // for now we use these because classes create containers and we want them to be styleable
    // later we may be able to detect if we have styles and use Nil and SizedBox containers where possible
    'avoid_unnecessary_containers',
    'sized_box_for_whitespace'
]

imports

Lets you provide a list of imports to add in every generated Dart file. This can save you from having to add the same import statement at the top of your files.

Default value:

imports: [
	'package:flutter/material.dart',
	'package:flutter/cupertino.dart'
]

For example, to add the flutter_view_widgets to each file:

flutter-view.json

{
    imports: [
        "package:flutter_view_widgets/flutter_view_widgets.dart"
    ]
}

tagClasses

Lets you map how certain tags are mapped into Dart classes. For example, by default a DIV is mapped into a Container.

Default value:

tagClasses: {
	text: 'Text',
	div: 'Container',
	span: 'Wrap',
	button: 'RaisedButton',
	backgroundAssetImg: 'ExactAssetImage',
	backgroundUrlImg: 'NetworkImage'
}

For example, if you want to use FlatButton when you use the button tag:

flutter-view.json

{
    tagClasses: {
        button: "FlatButton"
    }
}

multiChildClasses

In Flutter, some widgets expect a child parameter, while others expect a children parameter. With multiChildClasses you can list classes that require the children parameter (otherwise child is used).

Note: in case an entry is not in the default list, you can also pass the children via the array tag. For example:

column
    array(as='children')
        row first child
        row second child

Default values:

multiChildClasses: [
	'Row',
	'Column',
	'Stack',
	'IndexedStack',
	'GridView',
	'Flow',
	'Table',
	'Wrap',
	'ListBody',
	'ListView',
	'CustomMultiChildLayout'
]

autowrapChildren and autoWrapChildrenClass

In HTML layouts, any element can have multiple children. However in Flutter, some widgets accept only a single child.

If autowrapChildren is set to false, only the first child is set.

If autowrapChildren is set to true, the children are wrapped by a widget that accepts multiple children. The widget used is set in the autowrapChildrenClass property.

The default values:

autowrapChildren: true,
autowrapChildrenClass: 'Column'

showPugLineNumbers

If set to true, flutter-view will add comments to the Dart file that link back to the original pug files. These comments are used by the VSCode extensions to provide easy navigation between the two.

The comments look like this:

Container( // project://lib/screens/queue/queue.pug#19,6

Default value:

showPugLineNumbers: true

showCommentsInDart

If true, flutter-view will add comments in Dart based on the classes and ids that you assign to tags in the Pug or HTML.

For example, the following Pug code:

#title(as='title') Tasks

Will add the #title as a comment:

//-- TITLE ----------------------------------------------------------
Container(
    child: Text( 
        'Tasks',
    ),
)

By setting showCommentsInDart to false, this feature is disabled.

Default value:

showCommentsInDart: true

reportErrorsInDart

If set to true, if there is an error processing a pug or css file, the error will not only be printed by flutter-view in the console, but also be shown as text in the Dart file.

The benefit of this is that if you make a Pug or Sass mistake, it will show as an error in your IDE, instead of just in the flutter-view output.

Default value:

reportErrorsInDart: true

propagateDelete

If true, when you delete a pug file, the asociated Dart file also gets deleted.

Default value:

propagateDelete: true