NeoVim With Flutter is AWESOME

today we're going to take a look at how I use near we movie flutter if you haven't set up neovine before you can take a look at the prime minions video I will link it down in the description so let's take a look at a quick example of how I use newbeam so here's a new flutter project I misspelled flutter ignore that to open neovim I write neobeam dot to open the file explorer I can do command P to search files in this case let's go to main.dart in here we can see that the analyzer is running and I can see that everything is working fine I can go and check the documentation this is kind of similar to any other kind of editor you can see the documentation in this case of material app I can close that down I can go to the definition as well of material app by pressing GD and of course here I can check the documentation of anything else here if I navigate back we're still back here I can of course get the completion window up as well for example on same data we can get all of the settings here as well I can add a card color to something like red in this case I have a copilot up as well that's why you could see kind of like the outer filling but of course I can just tap that out if I want to use the copilot experience we can remove that line if I would have a error in the code let's say I misspelled blue you can see that I have an underscore if I try to save everything is fine we still have the underscore if I press space DL I will list all of the diagnostic issues in a list so diagnostic list and here we can see all of the issues I have if I press on one of them we get to that part I can also add another issue here if I open diagnostic window again we can see that we have it there as well and I can use shift d and shift U to navigate between my diagnostic issues and I can kind of solve them one by one so blue we can navigate to the next one and this is Page and then if I would save that and check the Diagnostics we don't have anything to list anymore now to get started actually looking at how it looks to actually run a flutter what I have here is just another terminal session so one thing you have to be aware of is I'm using TMax to kind of switch between sessions and have them be able to run in the background so in this case I'm switching to a new session in here I can run a specific command in this case flutter watch here I can add my command line argument like my arguments as well to the command in this case we don't have anything we just want to run the normal flutter run command but we also want to watch for changes how it does that is by using something called nodemon which is just an npm package which is listen to file changes here we can select something to run in this case I will use open Mac OS so here you can see pretty much just the application running we have the blue one which is use the file Watcher you can ignore that if you want to I just typically have it to very minimal space here you can see the typical flutter run command in the terminal we can go to the debugger if we want to and we also have all of the flutter coins so if you press C for Clear H we actually have a bunch of commands in the terminal we can dump the rendering tree we can toggle widget expector so for example if I press I everything we have now is kind of like the widget inspector we can check the widgets and everything like that I can cancel out by pressing I again but that's kind of just how you would use the terminal approach compared to the ID in this case if we navigate back now to the actual code we actually have everything we want to so for example for hot reload to work in this case we have the primary Swatch to be colors blue let's change that to red and as soon as I save it we can see that the color as well in application is changing everything is working as expected we can remove the title and if we remove the title the title is gone so kind of like everything we expect is kind of there we don't lose anything else the main difference here is that we're using the terminal to run in the application there is actually a plugin called flutter tools where you can get all of the things you want to as well inside the newbeam editor I personally prefer the terminal that's just what I've gotten used to in general so let's take a look at some of the other things we kind of expect in an editor for example we have in this case The Floating Action button I can do space CA to kind of get up the code actions hence ca for code actions here we have all of the things we in general typically do and in general this list is kind of large so what I've done is that I'm using telescope to actually prompt it into this kind of window here which is a lot easier to then be able to search for whatever I want to do in this case as you can see we don't have to write the exact same thing we can use typically like fussy search whatever we want to do let's add a example of something we might want to do so let's take a look at just in example kind of coding session let's say we want to have the number in the middle of the screen we don't want to have any text in this case we have the typical code action we can remove the center if we want to if we save that we don't have the constraints of the center widget so we will have it to be left side we can remove the alignment we don't want to have the text in this case for pushing the button and in this case we have the column we can remove the widget of the column and now we have used the text in the top right corner in this case we'll remove the center so let's let's add this back so we can do wrap with a center I can save it I have it in the middle let's also just make the number larger let's take headline one and now it's larger and everything is working as kind of like what you kind of expect that's kind of a quick overview of how I use flutter let's take a look at the actual configuration of getting this set up so I will navigate to my DOT files we will open that directory so this is actually all my DOT files here completely free to use check out whatever you want to I have that Linked In the description as well let's start with the flutter watch command um this kind of straightforward what we're doing is we're using TMax to kind of open a new session or a split in this case with the flutter run command as well as theme node one nodemon watching and that's all there is you can if you want to you can pretty much just copy paste this and add it to um your preferred shell configuration you can just run that as a flutter watch command in this case if I have any specific configuration I usually run I use reverse search the terminal for that specific command but you can also of course add keybinds to those if you want to something else that I didn't show you is we have all of the things we kind of expect we have the file tree we also have things like git management so for example because this is a completely new project we haven't committed anything everything is a stage but I use fugitive as a plugin to kind of manage git conflict another thing I usually do is that I use something called Harpoon so in this case I've harpooned two files already we have the main file and we also have the readme which is let me in general switch between those files quite quickly and that's kind of usually how I work if I want to add something to that file let's say the analysis option file use space a and I have that as a third keybind now let's head over to the configuration for getting dart set up with new Vim so in the dot files we can head over to nivim config and the most imported file in here is the LSP file again if you want to see the full setup you can check out primigence video you can also use clone this repo probably and use sim link the file if you want to I highly recommend you setting up your own keybinds to get it to kind of your own feeling so what I'm using here is a plugin called lsp0 This is used to get the language server set up for all the different languages I can run a command called Mason for all of my kind of languages that I've set up so I have things like bash the Lua language prettier Prisma the rust analyzer typescript and so on one thing to notice here is that I don't have a dart configured here that's because Dart is actually not part of the languages that we can select when you actually clone flutter you get Dart as well so we just have to manually set up Dart which is kind of straightforward so cannot be aware you have to have the like Dart in general in in your path I'm pretty sure you're required to have that anyway so I just assume everyone has that to get it set up you have to set up the LSP config it's just very simple local create variable and then require LSP config then we can do and select the dart language server we can do setup on attach which is referencing our unattouch here which has all of our keybinds that we use for the language server in this case we have our go to definition the hover documentation diagnostic like errors um their diagnostic list that I showed you as well and things like the code action or references or the name all of the things you kind of expect from a language server another very important part here is that you should add settings for files or folders you want to exclude from the language server so very typical in flutter is that you might want to navigate to The Source Code of flutter in that case I have flutter in general cloned to my home directory tools and then flutter which makes it just that I want to exclude that from the actual analysis I also want to exclude things like packages that I've done with pop get because I don't want them to be analyzed in this case that doesn't mean that we can't shake the code out and see the actual documentation and things of that we just don't want to see errors that comes up because you haven't run propagate in those in the main SDK fidget just lets me have kind of like a progress indicator if the language here is loading in the bottom right corner now if you want to check out the repository it's just dot files I will link it down in the description here I have all of my configuration as well I have TMax I have if you're using Mac yeah buy and skhd I have neobeam it's kind of like you can check whatever you want to shake but that's all the configuration I use for newing for running it with flutter I'm using this for very large projects in general so I haven't seen any issues with it so far it's in general quite hard to get into learning the flow of using something like neovim but hey if you liked the video make sure to subscribe and probably check the video that's coming up somewhere here

Channel: Robert Brunhage

Views: 14,919

Keywords: Flutter

Id: E29ij9baGPw

Length: 10min 55sec (655 seconds)

Published: Sat Apr 15 2023