Flutter : Remove All Comment in Starter Counter App Instantly

Hamamul Fauzi
4 min readJun 27, 2020

Hello, have you read my post about creating Grab UI Clone Using Flutter? It is not complete yet, but I want to share a little thing that may help you when developing mobile app with Flutter before create another articles on it.

Just like the title, remove all comment instantly in starter counter app in flutter. Before this article published, I’ve wrote this article in Bahasa Indonesia. But someone gave recommendation to create a translate version of the article. That’s why I rewrite and translate the article. Okay, as we know, flutter give a template as starter project and there are some way to create a new flutter app. Usually I choose to create with one of this.

Using terminal

flutter create --androidx --org com.fauzi project_name

as options, I always use androidx because almost flutter plugin already use androidx and org option to create my package name if creating new project via terminal.

Using Vs. Code

I use Visual Studio Code as my editor. Create new project can be achieved with this shortcut

mac : command + shift + p

windows/linux : ctrl + shift +p

on the list shown, select Flutter: New Project. Here your new project — full of comments.

Starter code Flutter

For beginner, it’s really helpful to understand the code through this comments. But we are not beginner forever. It’s becomes annoying when we have to delete the comments manually every creating a new flutter app.

That’s why this article comes in. There are two files that contains comments, main.dart dan pubspec.yaml. Flutter starter project have two type of comments,

// (double slash) --> main.dart

# (hash sign) --> pubscpec.yaml

Well, maybe after create more project in Flutter, we will manually delete all of this comments. Its quite time consuming when we have to go line after line or block after block. You can just delete all of line in main.dart and write from scratch instead of deleting it manually.

manual deleting the comment

Our mainstream way to remove all the comments is with manual deleting. block it, press delete. block another lines, press delete. Repeat until you get what you want. But, did you know we can delete all of this comment only with two action? This time, I’ll tell how to delete all of this comments using Find and Replace and Regex.

Find and Replace.

Find and Replace melalui toolbar

Find and Replace can be accessed through toolbar menu, Edit > Replace. But I prefer to use shortcut since we not have to move our fingers from keyboard. you can press key combination below

mac : command + options + F

windows/linux : ctrl + H (or other key, not sure in linux)

RegEx

There is an icon on find and replace dialog. The one we will use is icon [ .* ] afterFind” textfield. Click it to activate Regex, it will change the colour when get activated

interface find and replace

Okay, we already set the tools. Now let’s remove the comments.

main.dart

for main.dart which use double slash ( // ), use following regex :

\/\/.* (backslash-slash-backslash-slash-dot-star)

And magically, all of the lines containing double slash will be selected by editor. Then after replace textfield, there is two icon, it represent “replace selected” and “replace all”. Keep replace textfield empty then click Replace All icon.

All the comments is removed, but there some blank space. Don’t Panic. Flutter comes with it prettier to reformat the code. Just hit right click and select Reformat Code. Don’t know how to use prettier? Come to my other article about flutter plugin

pubspec.yaml

and use this regex for pubspec.yaml :

#.*

Before remove all the comments in pubspec.yaml, I’d recommend you to uncomment assets and fonts section. It will help you when you forget how to write them in pubspec.yaml. After removed the comment, you can reformat the file using your prettier.

Hope it usefull for you.

--

--

Hamamul Fauzi

Flutter Developer who have interest in API Development