Flutter – jack of all trades master of some https://jackofalltradesmasterofsome.com/blog Consultant - Real Estate - Author - Business Intelligence Mon, 28 Jan 2019 20:12:53 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.5 Setting up Visual Studio Code and creating your first Flutter app https://jackofalltradesmasterofsome.com/blog/2019/01/10/setting-up-visual-studio-code-and-creating-your-first-flutter-app/ Thu, 10 Jan 2019 03:30:22 +0000 http://jackofalltradesmasterofsome.com/blog/?p=252 In the previous post, we discussed how to set up Flutter on a Mac. So lets now quickly go over how to now we will look at setting up Visual Studio Code and creating your first Flutter app

  1. We will first need to set up the necessary extensions. Click on the icon below located on the right-hand side and install the following extensions.
    a. Flutter
    b. Dart
  2. Create a new empty folder and then open it in Visual Studio Code
  3. Create a new flutter project by opening Terminal and Navigate to the folder you created. Here is the starter location for my No0Days app.

  1. Run the command “flutter create yourappname” and replace yourappname with the correct name to get it created. The terminal will autorun flutter doctor after as a health check. Inside Visual Studio Code, you will now see your new project. You will need to be connected to the internet for this step.

  1. Go ahead and start your device emulator if you have not already by typing “open -a simulator” in your terminal window.

  1. Navigate to inside the root folder by going one layer down from where you are in terminal. “cd no0days”, and then run “flutter run” to run your first app. After a few seconds of installing the app, you should now have your first up and running application! The cool thing about Flutter is that it allows you to hot reload the application while developing so you can see your changes instantly. Just hit “r” in the terminal to reload and voila, your app changes appear!

]]>
Setting up Flutter on a Mac https://jackofalltradesmasterofsome.com/blog/2019/01/05/setting-up-flutter-on-a-mac/ Sat, 05 Jan 2019 23:12:07 +0000 http://jackofalltradesmasterofsome.com/blog/?p=237 The biggest draw to using something like Flutter for application development is that you only require once code base and the ability to deploy to both Android and IOS. I originally got set up on my PC but then realized I was not utilizing the full capability of the tool. I ended up purchasing an old MacBook Pro (2012 edition) since it was the oldest version that could run Mojave and Xcode and kept my initial investment cost low. Setting up Flutter on a Mac and its dependencies seems a bit more complications so I went through a few online tutorials and stitched a successful installation together. Below are the steps needed for anyone else in the same boat as I am. Don’t worry, it is not too bad once you have the right steps.

  1. Download and install all the necessary tools and applications to your computer.
    a. Android Studio for Mac
    b. Xcode from the App store
    c. Flutter from Google (https://flutter.io). Remember where you have unzipped the Flutter files. I placed them under my “documents/src/flutter” and will use that path for the rest of the tutorial.
    d. Homebrew (brew.sh)
  2. Launch Terminal and navigate to the folder of where you unzipped the files in step 1c.
  3. Type “pwd” to get the present working directory. For me it appeared as “/Users/vimalvachhani/documents/src/flutter”
  1. Type in the command “export PATH=”/Users/vimalvachhani/documents/src/flutter/bin:$PATH”. But this only creates a tempory entry. Let’s go create a permanent entry instead so you can skip this step other time.
  2. Navigate to “.bash_profile” by going to your root directory. Type “cd” over and over until your at the root folder. They type “ls -la” to show the files. We are looking for a file called “.bash_profile” but in my case, it did not exist. If it is not, use a text editor to create the file to get started using “vim” or other tools.
  1. In the file now copy and paste the command “export PATH=”/Users/vimalvachhani/documents/src/flutter/bin:$PATH” and save the file.
  2. Back in the terminal, type the words “flut” and hit the tab key. If it auto-populates to “flutter” we are in good shape. If not check the above steps to make sure you got everything correct. If you ever move your flutter directory, you will need to update this path.
  3. Verify Xcode and Android studio are set up from step one and in a terminal run the command “Flutter Doctor”. The issues you get here will vary a bit but the tool does a great job of listing all the commands you will need to run to fix them pretty easily.

That should be it! You will need to set up a simulator but in the next tutorial, we will walk through setting up VS Code to build your apps!

]]>