How do you solve the "closing brackets syndrome" in Flutter/Dart?

Question

I think, one of the most annoying problems when coding Flutter is when you become confused/out of sync of those closing brackets.

To me, it happens often that I add a new parent widget or insert a code snipped and then the closing curly/square/round brackets do not match, or semicolon/colon is missing... Of course, it is solvable: go to each bracket and the tooling will show you the counter-bracket and maybe you detect the discrepancy fast...or not. As you can see in the snipped, the tooling helps a bit by showing the corresponding class/widget. But to get it into sync, it always takes ages....

Do you have any best practises or hints/suggestions how to quickly adjust the brackets? What is your experience?

Thanks!

Answer 1

In VsCode you have some very usefull shortcuts to:

• remove a widget
• surround an existing widget with a new one
• and more

And it handles the adding/removing of brackets:

Gif took from this answer

Answer 2

There are some suggestions for you
1 - Switch to vscode its lighter, faster and you can use its intelli sense or what we call code action to add widgets and remove wherever you want in your flutter code. By doing this it will automatically take care of brackets and stuff.
2- Use flutter snippets extension there are a lot of them available on vscode at-least, not sure about android studio but the extension it will auto generate a boilerplate template for you along with the brackets
3- You can go to vscode or your android studio's flutter extension settings and customize it, there are options for auto formatting and importing as well.
4- (Optional) If you have github co-pilot then it auto suggests you about the brackets and code but not always accurate and also co-pilot is not officially available for all but its way too good to have.

Answer 3

Quick Tip!

I use IDE integrated features to avoid mistakes and it saves my time as well. Check below example. Don't try to wrap manually.

I found this article myself quite useful when it comes to avoid bracketing mistakes and fasten developments.

Answer 4

You can seperate your code to functions or even better create your own Widgets. Let's
say you have to display bunch of movies as gird of cards on a main page. Instead nesting them inside giant Scaffold you can create

1. ListOfMovies widget using GridView which consumes List<Movie>
2. CardMovie widget which consumes single Movie object Here is how I seperated them on my own project. This is not the perfect but may be helpful

Edit. Here is another minor tip: On JetBrains IDEs you can jump to other end of brackets or curly brackets using Ctrl+Shift+M command