Flutter: How to create Code Snippets?

While creating a Flutter App you must have come across some repetitive code. You might have tried checking out an extension for Flutter Snippets but it also doesn’t contain the snippet you want. For me personally, one of them was the code for box-shadow, writing it again and again, was burdensome. To resolve this we will learn how to create custom code snippets for Flutter in Visual Studio Code.

Procedure:

1. Press CTRL + SHIFT + P and type Configure User Snippets and press Enter on the first option.

2. Select dart.json from the list.

3. For me the snippet file for dart.json was completely empty.

4. I created the snippet that I always wanted. Now in any .dart file as soon as I type “pShadow” and press Enter the code is generated automatically.

{
"Box Shadow": {
    "prefix": "pShadow",
    "description": "Box Shadow",
    "body": [
      "BoxShadow(",
      "color:Colors.black.withOpacity(0.05),",
      "spreadRadius:1.0,",
      "blurRadius:5.0,",
      "offset: Offset.zero,",
      ")"
    ]
  },
}

Here, “Box Shadow” is the object key and should be unique across all the snippets. The prefix is the name of the snippet and as soon as we write the name of the snippet, it is auto-suggested. The description is the descriptive text that explains what the snippet is about. The body is the real content of the snippet. If the line is single you can provide a string if it’s multi-line you can create a list of strings(as shown above).

Tab Stops in Snippets

If you want the cursor to be placed at a position you can use the ‘$order‘ parameter as follows:

{
  "Text Widget": {
    "prefix": "ptext",
    "body": " const Text('$1');",
    "description": "Constant Text Expression"
  },
}

We can also use multiple tab stops or multiple cursors:

{
"Styled Text Widget": {
    "prefix": "pStyleText",
    "body": " const Text('${1:helloworld}',style:TextStyle(${2}),);",
    "description": "Constant Text Expression"
  },
}

In this example, there are two tab stops ‘$1‘ with demo text “Hello World” and ‘$2‘. The cursor will start at ‘$1‘. To go to the next tab stop ‘$2‘ press the TAB key. In addition, if you want to learn more you can visit the official VS Code website.

BONUS

If you want a better experience in creating snippets try using this extension in VS Code.

You might also be interested in:

• Complete Guide to ValueNotifier
• Reduce number of imports
• Use HexColor in Flutter

It appears as a tab at the left and you can easily view and create snippets using the tab provided.

Alternatively, you can also use this extension to generate snippets from the code block. Ever curious as to how to check if the Image URL is valid in Flutter?

I hope I helped you learn a new thing today and now you can easily create code snippets in Flutter. Struggling with multiple imports in Flutter check out this post. If you have any queries comment below, I will be happy to answer.