4 productivity Hacks to Boost Flutter Development
To all Flutter Developers here are a few important hacks to boost flutter development
- Error lens
- pubspec.yaml adder
- alternative for android/ios simulator
- color brackets
1. Error Lens (VS Code Extention)
You can Use inline error plugin in android studio
Error lens is an extension which can be useful for all types of development through VS CODE
Every Time you got an error in vs code you need to hover over that to see an error but through Error Lens it will show your error just after your code line
2. Pubspec Assist/auto dependencies
handling pubspec.yaml file is real challenge as even a small whitespace in yaml file may cause error and we don’t even find this error in error system
Just press ctr/cmd + shift + p and open add/update dependencies type whatever dependencies you want to add extension will add its best version available
3. Android/ios Emulator Alternative web run
Using a web app to test your Flutter app instead Android or IOS
The big problem with this method is that the aspect ratio whenever you try to decrease size for your browser screen you will can’t after some limit so you have two solutions for this
Method 1:
step 1: select web browser as testing device
Run Your APP in debug mode
“Waiting for connection from debug service on Chrome…” this message can be there for a while after that your app will be open in the browser
step2: after your app run in browser
right click >> inspect
than select devices and you can get full view of your app in mobiles espect ratio
Caution: Some features may be differ here like the Appbar title in ios is by default center here even if you choose iPhone as testing device ,title will be in the center but don’t worry after you build this app all settings will be as per ios
Select the options like shown in the image below and you have you app running as mobile aspect ratio
this is how you got an alternative for android/ios emulator
Method 2 : Alternative for ios/android simulator with device frame
now same like method 1 open your flutter project as web app in any browser (till step 1 )
step 2: use google chrome extension named mobile simulator
(make sure you have google login if you are using guest mode in chrome you may not find option for extentions)
than download new extension by pressing hamburger >> open google chrome web store
search simulator and download simulator shown below
now run this simulator
IF your flutter by default open project in guest mode than copy url in browser and than paste on browser where this extension is working
4. Color brackets
There are multiple vs Code Extensions for colored bracket you can download any here is few
