Android studio make it really easy for us to create a new activity or fragments with the pre defined file templates. Sadly, This is not the case for flutter, you need to create the file then again inside the file you will write everything yourself or use the live code templets.
So i decided to make my own file templates for flutter Stateless, Stateful, mixin, and extension. Also you can create your own file templates! like templet for ViewModel or Services etc…
Let’s start!
To create a new file template Right click on any folder > New > Edit file templates.
Then click Add, enter the name of the template and the file extension which is .dart.
Now add one of the following templates in the code area.
Stateless
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import 'package:flutter/material.dart';
#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
#set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
class ${class} extends StatelessWidget {
${class}({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(color: Colors.blue);
}
}
StatefulWidget
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import 'package:flutter/material.dart';
#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
#set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
class ${class} extends StatefulWidget {
${class}({Key key}) : super(key: key);
@override
_${class}State createState() => _${class}State();
}
class _${class}State extends State<${class}> {
@override
Widget build(BuildContext context) {
return Container(color: Colors.blue);
}
}
Mixin
1
2
3
4
5
6
7
8
#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
#set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
mixin ${class} {
}
Extension
1
2
3
4
5
6
7
8
#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
#set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
extension ${class} on ${on} {
}
The language used to create the template is Velocity Template Language.
I’ll explain some syntax i used in my templates and to know more about the syntax you can visit the above link.
#set( $MyName = "Abedalkareem") it create a new variable.
#foreach($item in $items) #end it’s like any other foreach used in other languages it iterate over the items.
$NAME it’s a predefined variable contain the file name. To get the list of the predefined variables you can visit this link.
Usage
Click on any folder then > New > Select the templet you want to use.
It will ask you to enter the name of the file. the name of the file should be in snake case file_name_something.
Bonus
If noticed above there is a duplication in all the templates, which is this part:
1
2
3
4
5
6
#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
#set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
Now to solve this issue you can create one include template that has this code then include it to another template using parse.
1
#parse("include_template_name.extension")
So if we change the Stateful widget templet to include the name part it will be like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';
#parse("FileNameMaker.dart")
class ${class} extends StatefulWidget {
${class}({Key key}) : super(key: key);
@override
_${class}State createState() => _${class}State();
}
class _${class}State extends State<${class}> {
@override
Widget build(BuildContext context) {
return Container(color: Colors.blue);
}
}
-❤️~.
If you have any questions you can send me a message on Twitter or facebook. Also you can check my Github page or my Apps.