Flutter Snippets
Supercharge Your Flutter Dev: The Must-Have VS Code Flutter Snippet Extension.
Demo
Top 10 features of Flutter Snippets
Shortcuts for importing packages: This feature saves you time by automatically importing commonly used packages.
Class creation shortcuts: This feature helps you quickly create new Flutter classes with the boilerplate code already filled in.
Builder shortcuts: This feature provides shortcuts for creating different types of builders, such as StateBuilders and StreamBuilders.
Scroll view shortcuts: This feature allows you to easily create different types of scroll views, such as ListViews and SingleChildScrollViews.
Widget shortcuts: This feature provides shortcuts for creating a variety of widgets, such as Text, RaisedButton, and FloatingActionButton.
Function and method shortcuts: This feature includes shortcuts for commonly used functions and methods, such as setState and initState.
Common height and width snippets: This feature provides pre-defined snippets for setting common heights and widths in your Flutter code.
Code formatting: This feature automatically formats your code according to the Flutter style guide.
Live templates: This feature allows you to create your own custom snippets for frequently used code patterns.
Integration with other extensions: This feature allows you to use Flutter Snippets with other popular VS Code extensions, such as Dart and Flutter.
Shortcuts
Import Package
| Key press |
Meaning |
importM |
Material Package |
importC |
Cupertino Package |
Class
| Key press |
Meaning |
resClass |
Responsive Class Code |
Builders
| Key press |
Meaning |
listViewB |
ListView. Builder |
ListViewS |
ListView. Separated |
gridViewB |
GridView. Builder |
gridViewC |
GridView. Count |
gridViewE |
GridView. Extent |
streamB |
Stream Builder |
layoutB |
Layout Builder |
oriB |
Orientation Builder |
futureB |
Future Builder |
futureBLV |
Future Builder ListView |
futureBLVModel |
Future Builder with ListView Model |
| Key press |
Meaning |
customSV |
Custom ScrollView |
singleChildSV |
Single Child ScrollView |
| Key press |
Meaning |
stlW |
Stateless Widget |
stfW |
Stateful Widget |
Functions
| Key press |
Meaning |
debugP |
Debug Print |
Methods
| Key press |
Meaning |
buildM |
Build Method |
initS |
Init State Method |
dis |
Dispose Method |
alertDialog |
Alert Dialog Method |
Common Height
| Key press |
Meaning |
smallHeight |
const SizedBox(height: 8.0) |
mediumHeight |
const SizedBox(height: 16.0) |
largeHeight |
const SizedBox(height: 24.0) |
largerHeight |
const SizedBox(height: 32.0) |
largestHeight |
const SizedBox(height: 40.0) |
Common Width
| Key press |
Meaning |
smallWidth |
const SizedBox(width: 8.0) |
mediumWidth |
const SizedBox(width: 16.0) |
largeWidth |
const SizedBox(width: 24.0) |
largerWidth |
const SizedBox(width: 32.0) |
largestWidth |
const SizedBox(width: 40.0) |
Height
1xHeight
: 10 logical pixel Height.
| Key press |
Meaning |
1xHeight |
const SizedBox(height: 10.0) |
2xHeight |
const SizedBox(height: 20.0) |
3xHeight |
const SizedBox(height: 30.0) |
4xHeight |
const SizedBox(height: 40.0) |
5xHeight |
const SizedBox(height: 50.0) |
6xHeight |
const SizedBox(height: 60.0) |
7xHeight |
const SizedBox(height: 70.0) |
8xHeight |
const SizedBox(height: 80.0) |
9xHeight |
const SizedBox(height: 90.0) |
10xHeight |
const SizedBox(height: 100.0) |
11xHeight |
const SizedBox(height: 110.0) |
12xHeight |
const SizedBox(height: 120.0) |
13xHeight |
const SizedBox(height: 130.0) |
14xHeight |
const SizedBox(height: 140.0) |
15xHeight |
const SizedBox(height: 150.0) |
16xHeight |
const SizedBox(height: 160.0) |
17xHeight |
const SizedBox(height: 170.0) |
18xHeight |
const SizedBox(height: 180.0) |
19xHeight |
const SizedBox(height: 190.0) |
20xHeight |
const SizedBox(height: 200.0) |
Width
1xWidth
: 10 logical pixel Width.
| Key press |
Meaning |
1xWidth |
const SizedBox(width: 10.0) |
2xWidth |
const SizedBox(width: 20.0) |
3xWidth |
const SizedBox(width: 30.0) |
4xWidth |
const SizedBox(width: 40.0) |
5xWidth |
const SizedBox(width: 50.0) |
6xWidth |
const SizedBox(width: 60.0) |
7xWidth |
const SizedBox(width: 70.0) |
8xWidth |
const SizedBox(width: 80.0) |
9xWidth |
const SizedBox(width: 90.0) |
10xWidth |
const SizedBox(width: 100.0) |
11xWidth |
const SizedBox(width: 110.0) |
12xWidth |
const SizedBox(width: 120.0) |
13xWidth |
const SizedBox(width: 130.0) |
14xWidth |
const SizedBox(width: 140.0) |
15xWidth |
const SizedBox(width: 150.0) |
16xWidth |
const SizedBox(width: 160.0) |
17xWidth |
const SizedBox(width: 170.0) |
18xWidth |
const SizedBox(width: 180.0) |
19xWidth |
const SizedBox(width: 190.0) |
20xWidth |
const SizedBox(width: 200.0) |
Provider Package Utils
| Key press |
Meaning |
importProvider |
Import Provider Package |
changeNotiPro |
Change changeNotifier Provider |
consumerProBuild |
Provider Consumer Builder |
proContext |
Provider.of(context) |
multiProMaApp |
Multi Provider Material App |
proControllerClass |
Provider Controller Class |
License
MIT License
Release Notes
0.0.14
0.0.13
- Added
Provider Package Utils 🚀
- Update documentation ✅
0.0.12
futureBLV for Future Builder ListView 🚀futureBLVModel for Future Builder with ListView Model 🚀
0.0.10
0.0.9
dispM to dis, orientationB to oriB ✅- Layout Builder, Orientation Builder, Future Builder and GridView Builder Code updated.✅
- Physics and shrinkWrap added on all Scrollable View.✅
0.0.8
showDialog to alertDialog ✅- Responsive Class Code Added. 🚀
0.0.7
- demo video added in Readme.md 🚀
0.0.6
- changed shortcut keys of Height and Width ✅
0.0.5
- Common Height & Width 🚀
- X logical Pixel Height & Width 🚀
- Readme Docs improved ✅
0.0.4
0.0.3
- Readme Docs Improved. 🐛
- keywords added in
package.json 🚀
0.0.2
0.0.1
- Initial release of Flutter Snippets.
| |
