vscode-flutter.xml-layout
xml layout for flutter. brings angular’s style to flutter!
imagine that you can do this :
<container width="50 | widthpercent"
height="50 | heightpercent"
color="blue"
:text="'hello world!'"
:opacity=".9"
:center
:if="ctrl.textvisible | behavior" />
instead of this:
final size = mediaquery.of(context).size;
final __widget = streambuilder(
initialdata: ctrl.textvisible.value,
stream: ctrl.textvisible,
builder: (buildcontext context, snapshot) {
if (snapshot.data) {
return opacity(
opacity: .9,
child: center(
child: container(
color: colors.blue,
height: (size.height * 50) / 100.0,
width: (size.width * 50) / 100.0,
child: text(
'hello world!'
)
)
)
);
}
else {
return container(width: 0, height: 0);
}
}
);
return __widget;
which is about 20 lines of code, and if you just updated the :text property to use a stream variable :text="ctrl.mytextstream | stream" that will add another 4 lines of code for the streambuilder.
extension features:
- separates ui code (widget and widget’s state) from the business logic.
- brings some angular’s features like pipes, conditionals…
- provides built-in properties & pipes to make the coding much easier.
- generates localization code depending on json files.
- forms & animation made easy.
- customizable! so developers can add their own properties and modify some features.
- supports code completion, hover information, go to definition, diagnostics and code actions.
example
get started
- install the extension from vscode marketplace
- create a new flutter project
- install prerequisites packages:
- flutter_xmllayout_helpers
- provider
- flutter_localizations
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
provider: ^3.0.0+1
flutter_xmllayout_helpers: ^0.0.9
- apply one of the following steps:
- clear all
main.dartcontent then usefxml_appsnippet to create the app. - modify
main.dartto usemultiproviderfromproviderpackage:- register
pipeprovider(fromflutter_xmllayout_helperspackage) as a provider. - register
routeobserver<route>as a provider (only if you want to use routeaware events in your widgets’ controllers).
- register
- clear all
localization:
- create
i18nfolder insidelibfolder and add json files named with locale codes e.g.en.json. - import
i18n/gen/delegate.dartin the main file. - register
applocalizationsdelegate()inlocalizationsdelegatesparameter of thematerialapp. - to use localized text in the ui see pipes docs.
xml layout:
- create a new folder and name it as your page/widget name e.g.
home. - then create home.xml file inside
homefolder. - use
fxml_widgetsnippet to create the starter layout, modify it as you want then save it. the extension will generate a file namedhome.xml.dartwhich contains ui code, andhome.ctrl.dartfile (if not exists) that contains the controller class which is the place you should put your code in (will be generated only if you addedcontrollerproperty).
example:
<homepage controller="homecontroller" routeaware
xmlns:cupertino="package:flutter/cupertino.dart">
<scaffold>
<appbar>
<appbar>
<title>
<text text="'home'" />
</title>
</appbar>
</appbar>
<body>
<column mainaxisalignment="center" crossaxisalignment="center">
<image :use="asset" source="'assets/my_logo.png'" />
<text text="'hello world!'" />
<icon icon="cupertinoicons.home" />
</column>
</body>
</scaffold>
</homepage>
homepage (root element) the name of your widget.
controller an optional property, the controller name you want to generate.
routeaware an optional property, which generates navigation events (didpush(), didpop(), didpushnext() and didpopnext()).
xmlns:* an optional property(s) used to import packges and files to be used in homepage class. (in this example we imported cupertino.dart to use cupertinoicons).
controller:
if you added a controller property to your widget then will be generated (if not exists), the file looks like this:
import 'package:flutter/widgets.dart';
import 'home.xml.dart';
class homecontroller extends homecontrollerbase {
//
// here you can add you own logic and call the variables and methods
// within the xml file. e.g. <text text="ctrl.mytext" />
//
@override
void didload(buildcontext context) {
}
@override
void onbuild(buildcontext context) {
}
@override
void afterfirstbuild(buildcontext context) {
}
@override
void dispose() {
super.dispose();
}
}
