I was watching a video about a flutter project in vs code, and I saw that the developer used an extension to group sections of widgets and its childs with a dashed-vertical-line on the left side. Does anyone know what extension is used here?
That is not an extension. This is from VS code settings. Go to settings and search for FLUTTER UI you will get two options as shown in image. Select both option and restart your vs code. You will get broken line tree as you want.
Related
Is there a quick solution to Navigate through all the Stateful/Stateless widgets in your Flutter project through some sort of menu listing all of them?
It can get quite tedious to make or find a button in your code and write/remove/comment navigation code to quickly debug scenarios.
Is there such a quick navigation feature? I'm using VS Code.
Yes, you should be using Flutter Outline for this kind of stuff it is already available for projects in Android Studio. For VS Code there's a similar plugin which I am linking here. It is called Outline Map.
You can basically see all your widgets in a heirarchial tree formation and even navigate and extract by clicking on them.
I am trying to build Code Editor in Flutter app using TextField, I tried using flutter_syntax_view but the problem is, it only accept code as a predefined string text and it does not have any option to write a code.
This is what I have tried:
Used TextField with maxLines 10
If we can show number of lines on left like code editor
Open for suggestions, appreciate the help
See my work on github:
http://github.com/icedman/flutter_editor
It uses flutter_highlight, multicursor edits, minimap, line number gutter. Under development - you may want to contribute to that project.
I also wrote an article on creating an editor under 1000 lines of code in Flutter - wherein i explained why i ditched the textfield and made my own widget:
https://levelup.gitconnected.com/build-a-text-editor-with-flutter-ui-under-1000-lines-of-code-5a9dd2a053da
I recently started working on Flutter/Dart, I like the flutter autoformatting on-save, but one thing might or might not be related is the code wrapping for long code even if code is still fitting my 4k editor window.
Is there a way to prevent new line but keep the comma auto format?
Thanks
Follow the instructions below:
Open Settings.
Expand Extensions and click Dart & Flutter on the left.
Find Dart: Line Length.
Change it to the value you want.
I would like to build a plugin where I put a Chart or a Tree component for people to drag and drop and use/build their own flows. Is this possible to build in VS Code? Are there any examples or documents on how to do that?
Yes, that's possible. You can use a WebView instance to show graphical output (written in HTML). In my vscode extension (https://github.com/mike-lischke/vscode-antlr4) I display a visual parse tree using D3.js:
In the graphic you can collapse nodes, zoom in/out, move the viewport with the mouse and more.
I'am using Visual Studio Code for Flutter Developing and i really like to have a feature that exist in Intelij IDE Which it is showing the Color of Color's Name and showing the Icon of the Icon's Name beside the code like in the picture ..
Picture
I've found many extensions but it not supporting dart ..
(Updated Answer)
These are now available in the Flutter VS Code extension and enabled by default:
(Original Answer)
This is not currently supported in the Dart/Flutter plugins for VS Code. However as a workaround the tooltips for the colours/icons should show previews in their descriptions.
To implement it in VS Code requires some supporting changes in the Dart/Flutter SDKs. If you want to be notified when there's progress on this, click the Subscribe button on https://github.com/Dart-Code/Dart-Code/issues/807 (also add a Thumbs Up if you'd really like to see it to help use prioritise open issues).