Ashish Karki

I am a Experienced Software Developer

Ashish Karki

Experienced Software Developer with seven years’ experience designing and building enterprise level software. Capable of collaborating with project stakeholders to identify product and technical requirements. Skilled in building user friendly and high performance full-stack applications.

Actively looking to return to full-time workforce in Mid-Senior to Senior roles. I left my last position due to family reasons. In the mean time, I have kept learning and building projects on GitHub especially around Java, Spring Boot and Microservices. Few learning samples include Machine Learning Certification (Coursera); Spring and Hibernate, RESTful Web Services with Spring Boot, Full Stack with SpringBoot and React, Kubernetes with Docker on Google Cloud, and Flutter and Dart to build iOS/Android apps (Udemy); Microservices with Kotlin, and Mastering Spring 5 (Books). Additionally, I am extending DevOps and Cloud knowledge by exploring Kubernetes, GCP, AWS, and their various features.

  • Lalitpur, Kathmandu Valley, Province 3, Nepal
  • +977-9861487950
  • ashish.karki3@gmail.com
Me

My Professional Skills

My skills range from Java, Spring/SpringBoot, JPA and SQL on the BackEnd to Angular, React, TypeScript, JavaScript and HTML/CSS on the FrontEnd and including DevOps tools like Maven, Jenkins, Docker etc.
I have thorough understand of Agile methodology and Project planning. I believe in teamwork and aspire to build products that solve real-world problems while delivering value to the business.
Following is a summarized table of my skills:


Technical Aspect Skills
Web/Mobile Technologies Angular, Ngrx, TypeScript, React, JavaScript, CSS, Bootstrap, JSON, XML, REST Architecture, SOAP, ASP.NET Web API, Node.js, Npm; Flutter, Dart
Programming Languages Java (with JDBC, JUnit, JSF, Spring, Hibernate, Spring Boot), Kotlin
Databases SQL Server, MySQL, Oracle (PL/SQL)
Tools/Platforms Microsoft Azure Cloud, Windows/Mac/Linux OS, Visual Studio, WebStorm, IntelliJ, SVN, Git, GitHub, GitLab, Jenkins, TeamCity, Octopus, Maven, IIS, Apache Tomcat
Misc. Concepts Agile Scrum and Kanban, SDLC, OOP, MVC, Microservices, Design Patterns, Test-Driven Development, Continuous Integration/Deployment, JIRA, Confluence
Showing posts with label Flutter. Show all posts
Showing posts with label Flutter. Show all posts
  • Introduction to Flutter App Development - easy ways to get started

    Getting to know Flutter, and get going


    Flutter is a mobile UI framework from google. It allows you to build multi-platform mobile and Web apps with a single codebase.
    Flutter builds apps by a composition of widgets. Now, then what are these widgets we keep talking about. A widget is a UI component and an object which describes part of any Flutter based app’s UI. Basically, anything you see on the screen with Flutter is a widget. Conversely, a widget is used for either displaying or arranging other widgets. For example, that app-bar we see at the top of any app window is a widget. Heck, the app window which is displaying the app-bar and the body content with other widgets itself is also a widget.

    And again, remember: Everything in Flutter is Widget

    A very noteworthy thing about flutter is that everything component displayed using Flutter is widget. The entire app itself is a widget. And, we nest widgets inside one another to build more complex layouts. So, basically Flutter uses Widget composition to build and then display UI elements onto a phone or any device screen.
    Also important is the fact that widgets are composed Declartive-ly in Flutter, meaning that we declare what widget goes where in our code. The place to declare our widgets is the build method wherein we declare our UI components/widgets one after the other and sometimes nested within one another. The build method then takes this Widget Tree and builds out a visual screen for us.

    What is Dart ? And how is it related to Flutter ?

    Dart is an object oriented language with syntax structure that is similar to C, Java and even JavaScript. Dart is statically typed so that the data types of variables is known at compile time. (There is a caveat to this with the dynamic data type in dart which allows you to assign any sort of data to a variable but the Dart team highly encourages developers to use static types like int, double, String etc.). Dart is compiled to native machine code when running on mobile devices like an iPhone or an android mobile device. For browsers, Dart is transpiled to JavaScript.
    And, why we keep saying Dart and Flutter or Flutter and Dart - this is because the Flutter framework utilizes Dart as its programming language to build apps. Flutter utilizes some great Dart language features to build and run our apps.

    What is this Hot Reload I keep hearing about ?

    This is one of the Hottest Dart language features and one of those things that Flutter uses to minimize code development and testing time. Dart comes with a Just-in-time (JIT) compiler which runs during program execution compiling the code on the fly. This allows for a technology called Hot Reload which only rebuilds that part of the code that has been modified and is very fast compared to say a cold reboot where to have to restart your whole application to check a change you made to say a text label.
    Also, Dart comes with an Ahead-of-time (AOT) compiler that creates a very optimized version of your code to be deployed into production and released into the wild so to say.

    Hot reload vs Hot restart

    Hot reload simply reloads the part of the app that has been modified and doesn't reset whole the state of the app. Hot reload is based off the current state of the app and it doesn't bother checking the initial state of the app. Meaning if you have a integer variable counter which increments by clicking a button and say its current value is 5. If you do a hot reload, the counter, if it is outside the area/section/widget that got modified, (the counter) doesn't change. You can try this with the default app that flutter builds for you when you first create an app using either command line or Android Studio.
    On the other hand, Hot restart restarts the whole app and resets the whole state of the app so that all variables are set back to their initial state. Although both hot reload and restart are very optimized and run very fast, a hot restart takes a few seconds more than a reload.

    Stateless and Stateful widgets in Flutter

    A Stateless widget is created by extending the StatelessWidget class. Such as widget can have some properties that are passed into them into their build method. But, the properties of a stateless widget are immutable and hence the UI as defined by a stateless widget is always displayed in the same way.In a way, we can say that such widgets do not have a state that can be modified.
    A Stateful widget, in contrast, is created by extending the StatefulWidget class and can have properties of its own which have be modified as required.That is such widgets have state - those are a set of properties that can vary throughout the life cycle of the widget. And, when the state of the widget changes so does the UI that it represents. Note that stateful widgets can and often receive other properties via their build methods too (similar to stateless widget).

    Structure of a Flutter based project (at the beginning)

    1. pubspec.yaml file: this is a very important file as it contains all the configurations for the flutter framework to create and later build corresponding iOS and Android apps. Now, the very important thing to remember is that pubspec is a yaml file (stands for YAML Ain’t Markup Language).  
      1. YAML is considered easy to read for both human and machines. YAML syntax uses proper indentation to separate sections and nest elements within one another.  
      2. So, for example, if a label (a text followed by colon) is tabbed by two spaces relative to a previous line, this label and its value is considered a child of the previous line. 
    2. The /lib folder: is where we as developers put all our code in. The lib folder comes with a main.dart file which contains some sample code and a main method to run the project. 
    3. main.dart  file: conventionally this contains the main function and contains the logic which triggers starting up of the app 

    Some theories around Flutter App Development

      1. Remember everything in flutter is a widget. Widgets can be nested and styled. One such example of widget is the MaterialApp. Also, every widget in Flutter is a class (as in an OOP class) from Dart language. 
      2. MaterialApp widget: is sort of a container or top level widget which follows the material UI convention as shown here: https://material.io/.  Some of the most important properties that MaterialApp widget/class has are as follows: 
        1. home: points to the root (/) level window/widget/screen 
        2. routes: is a map of route-names to widgets that are displayed when a particular route name is searched for. 
      3. Now, MaterialApp in itself doesn’t show any UI components on the screen of a phone/tablet. We have to point it to routes via either the home or routes properties to display actual and concrete widgets that are displayed on the screen. 
      4. Here is a very basic example showing the main function building and running a MaterialApp with a Center widget as a home screen and some more routes for navigation:
      5. Scaffold widget: is another layout widget that allows you to display visual elements. It can contain various UI components or so-called widgets in Flutter like Container, Center, Drawer and so on. Basically, Scaffold is a screen widget since it is utilized to build whole screens of the phone or tablet. Here are few important properties of this widget: 
        1. appBar: used to display an app bar on the top of this Scaffold
        2. body: is where the primary content of this Scaffold is going to go. It is basically like the body section of an html document.



    1. How to Add App Icon to iOS and Android Apps in Flutter

      Adding an icon for your App built with Flutter

      App Icons are an important part of any app development. They give your app an identity. The more creative and eye-catchy they are, the more attention they grab from your users. Here we discuss quick and easy methods of adding such icons. 

      First, there is a set of common steps to follow in order to create icons for iOS or Android.

      Step 1: The foremost step is to either create or get a ready-to-use icon suitable for your app. Let's assume the icon name is my-app-icon-general.png. This is a general icon and we need to create various versions of it based on platforms and device sizes.

      Step 2: Next, we will use an online tool to create various icons based on device sized for our target platforms. 

      • Go to https://appicon.co/ and select the App Icon Tab.  This online tool allows you to select or drag your icon (in this case we assumed it is called my-app-icon-general.png).
      • Once my-app-icon-general.png  is uploaded, from the right hand panel select the target platforms for which you want to generate icons. Since, here we are discussing mobile app development with iOS and Android, we can just select (or toggle on) the iPhone and Android buttons. Feel free select any combination based on your needs.
      • Now, click on the Generate button to create a zip file of icons to your local machine. Feel free to rename the zip file while saving. In my case, the zip is named AppIcons.zip.

      Step 3: Now that we have our icons, unzip the AppIcons zip folder. The unzipped folder will have the following folders and files:
      AppIcons has android, Assets.xcassets folders.
      Unzipped AppIcons folder's contents
      As you can see there are folders for android and iOS (which is named Assets.xcassets) plus couple of icons for apple and play stores. We are concerned with the android and Assets.xcassets in our case.

      Here is where the paths for Android and iOS icons differ by a little bit. First lets deal with Android app icons.

      Step 4 (Android only):  Open the path android\app\src\main\res path from File explorer or Finder or any IDE of your choice. Note that the android directory/folder is in the root of your Flutter project at the same level as the lib folder. Here I will open the path in File Explorer in Windows. 
      • This folder will have various mipmap-* folders based on device size plus drawable and values folders. We are only concerned with the mipmap folders. The appicon tool generate various icons for corresponding to these mipmap folders.

      Step 5 (Android only): Open the AppIcons folder and go to android sub-folder. Here you will see a bunch of mipmap folders. Each folder has a specific sized version of your my-app-icon-general.png and looks something like this:
      The android folder of AppIcons folder from appicon.co
      Step 6 (Android only): Copy or cut all the mipmap folders from within AppIcons\android folder and paste them over the android\app\src\main\res folder's contents. We are basically replacing the default flutter app icon that Flutter framework provides us with our own iconsets.
      Step 7 (Android only): Start or re-start your app and  view your app's icon in your Android device's screen.

      All set with Android. Onto iOS app icons. Here are iOS specific steps:

      Step 9 (iOS only): Go to the AppIcons folder (the one downloaded and unzipped from appicons.co website). Within AppIcons, find the Assets.xcassets folder. If you drill inside this folder, you will find a AppIcon.appiconset folder which contains a bunch of icon files based on device sizes. 

      Step 10 (iOS only): Open the path ios\Runner from File explorer or Finder or any IDE of your choice. Note that the ios directory/folder is in the root of your Flutter project at the same level as the lib folder. Here I will open the path in File Explorer in Windows. 

      • This folder will have one Assets.xcassets folder and similar to the AppIcons structure, you will find a AppIcon.appiconset folder which contains a bunch of default icon files provided by Flutter.
      Step 11 (iOS only): Copy or cut all the Assets.xcassets folder from within AppIcons folder and paste them over the ios\Runner folder's contents. We are basically replacing the default flutter app icon that Flutter framework provides us with our own iconsets.


      Step 12 (iOS only): Start or re-start your app and  view your app's icon in your Android device's screen.

    2. Some Useful Flutter Widgets

      Commonly used Flutter Widgets to speed up your mobile app development


      1. Container widget: as the name suggests acts like a container for its child widget. It combines the features from common positioning and sizing widgets. For example one can use this  widget to add styling properties like height, width, padding and background-color to its child widgets.
        1. A container has a child as one of its properties and note that there can be only one child as a container is a single-child layout widget.
        2. Important note: a container with no children tries to be as big as possible meaning they try to take up as much as space as possible on the screen. Whereas a container with a child will size itself to the size of its child widget.
      2. Column/Row widget: both of these are very common layout widgets. They allow us to design and lay child widgets either vertically (in case of Column) or horizontally (in case of Row). Here are few important features of Column/Row widgets:
        1. These widget do not scroll. If you need scolling feature, use something like a ListView widget (which displays its child widgets in a sequence with a scrolling view).
        2. They have a children property which is a collection or list of Widgets to display. Hence, these are very common widgets to use if you have more than one child widgets.
        3. They also support properties like mainAxisAlignment (how the children are placed along main axis - this is vertical for Column and horizontal for Row), crossAxisAlignment (how the children are placed along secondary/cross axis).
        4. They do not support some styling properties like padding. For padding wrap the widget with either a Container (or Padding) widget.
      3. Center widget: is used to center one widget (say WidgetB) inside another widget (say WidgetA) like so:
      4. Widget build(BuildContext context) {
               return Container(
                           child: WidgetA(
                                     child: Center( // centers WidgetB inside WidgetA
                                                child: WidgetB(
                                                           child: ...,
                          ... all closing parentheses
        }
      5. Image widget: acts like a picture frame gives us the frame to load a picture from many different sources like url, local-folder/asset, file etc.
        1. A very interesting discussion on how to fit images inside their containers StackOverFlow: Flutter How to fit an image
    3. Few things to note when Installation, Coding and Working with Flutter

      Flutter Installation gotchas (specifically Windows/PC)

      1. After installation, when running “flutter doctor” if you run into issues saying “You have not accepted the license agreements”, refer to this StackOverflow article: StackOverFlow: How to fix Flutter You have not accepted License error
      2. Basically, you need to open a terminal and type flutter doctor --android-licenses. In the resulting prompt, accept all the licenses by pressing y or Y.

    4. ADDRESS

      Lalitpur, Kathmandu Valley, Province 3, Nepal

      EMAIL

      ashish.karki3@gmail.com

      TELEPHONE

      +977-9861487950