Skip to main content

First App (Hello World) on Flutter and Dart

In my previous post I talked about how to Install Flutter & Dart on windows with Visual Studio Code


Now, as our environment is up and running so it's time to create our first app.  

Create Project in VS Code

  • Run your VS Code.
  • Run the doctor command to make sure everything is up and running(press Ctrl+shift+p and write doctor, click on suggested Flutter : Run Doctor command). Check the output and make sure you run without any issue. If you face any issue then go back to my Post and make sure your environment is up and running.
  • Press ctrl+shift+p and type 'New' and you will see 'Flutter: New Project' command suggested in search, like below:
  • It will ask you the name for your project, Name it "hello_world"
  • Let New Project command execute and then see if you get the project structure just like below:

  • Once project is created, then Create one emulator(Good to have it on API level 28-Pie) if you don't have or you can connect to your android device as well.
  • When Emulator is up then press F5 on VS Code. It will start executing your application and you should be able to see below hello_world app on Emulator:
  • Press '+' button to see the _counter increases it's value. 
Congratulation!!!!

You have successfully created your first hello_world App.

Debug your Code

Follow below steps to debug application. for example lets debug code which gets executed when we press '+' button:

  • Open File 'Main.Dart' File in your hello_world Application.
  • probably on line 49 we have one method _incrementCounter(), Put debug on that line.
  • Press F5 to run the application.
  • Press '+' button which will hit the debug point just like below:


  • Use F10 to step over and F11 to Step into.
  • Use Shift+F11 to step out of the code.




Comments

Post a Comment

Popular posts from this blog

Flutter & Dart VSCode: Creating Custom Material Drawer using InkWell for Android

In this exapmle, we will learn how to add customize material drawer with some cool UI look as well as some ripple effect just like below :   Couple of things we should have on our machine prior to implement this functionality: Enviornment setup on VS Code:  Follow my previous post Create New Project:  Follow my previous post Now, Follow the below steps: Once you have your project created, then you will notice in the project structure we have 'Main.Dart' file.Go to 'Main.Dart' file and add below class and name it  CustomListTile class  CustomListTile extends StatelessWidget{        final IconData icon;     final  String text;     final Function onTap;        CustomListTile( this .icon,  this .text,  this .onTap);     @ override     ...
Post a Comment
Read more

Install Flutter & Dart on windows

Things we should have in order to work with Flutter and dart: Visual Studio Code Android Studio So first install these two guys from the link. Something About the Cross Platform Mobile Development: Cross Platform Mobile development refers to one common development platform which can be used for multiple mobile operating system like Android, iOS and Windows. There are number of technologies which support cross platform mobile development and to name a few are like Xamarin, CodeName One, Flutter & Dart, Apache Cordova  etc. I did one review about Xamarin technology because it's been while that I am using Xamarin for Android and iOS. You can read more about it,  Here... Flutter & Dart Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase. Dart is the language which we use for cross platform mobile development with Flutter.  In this example we ...
Post a Comment
Read more