The offer came via on-campus hiring at Thapar Institute, Patiala. Navi came to our campus in September 2021 to hire Fresh Graduates for SDE-1 roles.

Company 💪🏻

At Navi, our mission is to build financial services that are simple, accessible, and affordable.

Navi is founded by Sachin Bansal (Co-Founder, Flipkart) & Ankit Agarwal to build consumer-centric and technology-driven businesses in the BFSI (Banking, Financial Services & Insurance) space.

Company Profiles: Website | LinkedIn | Crunchbase | Instagram

Opening ⛳️

• Profile Offered: Software Development Engineer - 1

• Role Type: Full-Time Employment

• Eligible Batch: 2022 Graduating

• Eligible Degree: Bachelor of Engineering

• Eligible Branch: Computer Science

• CGPA Cut-off: None

• Minimum 10th/12th %: 60%

Job Description 📑

Responsibilities:

• Work on the development backend systems of large product

• Build reliable, secure, and performant backend systems

• Drive test coverage and continuous delivery automation within the team

• Mentor and provide feedback to teammates

Requirements:

• Strong computer science fundamentals

• Good knowledge of the Java ecosystem

• Can write code that is readable, maintainable, and performant

• Know the importance of tests and how to approach writing different types of tests

• Good understanding of relational databases, transactions, entity-relationship modeling

• Comfortable writing multi-threaded programs

Bonus:

• Understanding of domain-driven design concepts like ubiquitous language, bounded contexts, aggregates, and domain events

• Know how to use test-driven development as a design tool

• Good intuition for the principles underlying object orientation, particularly encapsulation

• Understand the importance of immutability and of reducing the state-space of objects

• Seek to identify key underlying ideas and use those as building blocks before reaching for shiny new tools

Timeline ⏰

• September 21 - Applications Open

• September 22 - Applications Closed

• September 28 - Company Presentation & Online Assessment

• September 30 - Interviews & Verbal Offer

• May 10 - Written Offer Letter

• May 23 - Day 1 at Navi

Recruitment Process 📈

Let’s dive straight into the process step by step

• Application Submission

• Company Presentation

• Online Assessment

• Resume Review & Shortlisting

• 3 x Virtual Interviews

• Offer Review & Extend

Application Submission 📃

We were provided with a Google Form from the Placement Cell to submit our resumes that can be forwarded to the organization alongside some basic identification and eligibility verification details.

Company Presentation 📽

Navi organized an hour-long WebEx meeting for the participating candidates to explain and present the details of the role.

Presenters included people from Human Resources, Engineering, & People Management. They majorly focused on describing the company and different businesses that Navi deals in, followed by details on the role, hiring process, and compensation.

A well-structured compensation breakup was also shown as part of the presentation.

Online Assessment 🧪

Navi used DoSelect to conduct an initial online assessment to filter out candidates based on their scores and answering patterns.

The total time for the assessment was 120 minutes and had ~50 questions. These questions were divided into 4 sections.

• Section 1: Aptitude MCQs (20 Questions) (20 minutes)

• Section 2: Maths MCQs (25 Questions) (20 minutes)

• Section 3: Coding Level A (2 Questions) (50 minutes)

• Section 4: Coding Level B (1 Question) (30 minutes)

The time limit for the first 2 sections is very limited, so be quick while attempting those. For coding questions, the time was pretty enough and the level was LC Easy/Medium.

I was able to solve all coding questions and almost 95% of MCQs correctly.

Resume Review & Shortlisting ♻️

Based on the scores in Online Assessment & the Resume submitted, they shortlisted 20 candidates out of 400 applications. I was part of this shortlisted batch.

These shortlisted candidates were scheduled for a Technical Interview on the next day.

3 x Virtual Interviews 👔

Navi interviewed candidates virtually via Google Meet. All the candidates were interviewed on the same day.

Round 1 - Technical

My first interview was scheduled for 10 am in the morning with an SDE-3 from the hiring team. The agenda of this interview was around Problem Solving and Data Structures.

This round lasted 60 minutes and I was supposed to solve an algorithmic question on a Google Doc. The difficulty level was LC Medium.

Out of 20, only 3 people were shortlisted for Round 2.

Round 2 - Technical

The second interview was scheduled one hour after the first round with the Engineering Manager of the hiring team. The agenda of this interview was around Low-Level System Design, discussions about previous projects/internships, and miscellaneous technologies listed on my resume.

This round also lasted 60 minutes. For the LLD question, I was given Software Requirement over a Google Doc and I was supposed to write class definitions and describe what data structures to use to optimize the software while showcasing Low-Level Design knowledge.

Out of 3, only I was shortlisted for Round 3.

Round 3 - Behavioural

The third interview was scheduled for around 3 pm in the afternoon with a Senior Group Manager. The agenda of this interview was around culture fitment to single out candidates whose values, beliefs, and behavior fit in with Navi's culture.

This round lasted 30 minutes. The interview asked 5-6 behavioral questions around my previous work experience and my expectations from Navi.

Offer! — the YaY moment! 🥳

Within a couple of hours, the recruiter notified the placement cell that I've cleared the hiring process and they would like to extend an offer to me.

Are you interviewing? Here’re some tips.

Before Interviews

• Go through all the resources provided by hiring teams.

• Research about the company. Make sure you know their values.

• Prepare answers to general questions beforehand.

• Go through your resume. Make sure you know, what they know about you.

During Interviews

• Be on time. Join the call 5 minutes before the scheduled time.

• Dress formally. Just because it’s virtual, doesn't mean it's casual.

• Let the interviewer know your thought process. Keep talking.

• Ask clarifying questions, and make use of what the interviewer gives you.

After Interviews

• Ask follow-up questions relevant to the job.

• Ask the interviewer for honest feedback.

• Give closing greetings to the interviewer.

Looking for resources? Here're some. 🚁

A lot of people ask me, how to get started with tech. If you have been asking this to someone, this might be the answer.

Let me try to answer it by taking some relevant programming fields in context.

Options?

According to me, there are four major programming fields that a beginner can start with,

1. Data Structures & Algorithms
2. Competitive Programming
3. Web / App Development
4. Machine Learning / Computer Vision

Let’s talk about them descriptively one by one.

Data Structures & Algorithms?

An essential & general starting point of everyone's programming journey is Data Structures & Algorithms.

In Data Structures you learn about the syntax and possible ways of structuring your data in different forms while in Algorithms you get to know the hustle part of mental work where you write procedural steps to solve a specific problem.

There are plenty of resources available online for learning DSA, I would recommend to pick up a dedicated regular class or a course. There are various benefits of joining a program, and the most important ones are regularity & mentor support.

Relevant Resources:

• JomaClass
• GoMaster
• InterviewBit
• HackerRank
• HackerEarth

Competitive Programming?

One of the branches of DSA comes out to be Competitive Programming where you have time & space restrictions and need to solve a theoretical problem by writing optimized codes while using minimum resources and competing against 100s and 1000s of coders.

You can start with Competitive Coding right after you have gained knowledge of basic Data Structures. There are various platforms available online. I would recommend going with Codeforces and CodeChef.

Relevant Resources:

• CLIST
• William Lin
• Google Kickstart

Web / App Development?

If you are interested in making applications, I would recommend starting with Web or App Development as it's the web and mobile apps with which you interact on a daily basis. More specifically start with Apps as they are in popular demand these days and I personally unlock my phone 100 times a day to dive into those.

You can choose any of the frameworks available online, there are tons of them. I use Flutter for App Development and ReactJS for Web Development. These are the prettiest framework I have worked with till now.

Relevant Resources:

• Web - freeCodeCamp
• Web - LearnCodeOnline
• App - Pawan Kumar
• App - Udacity

Machine Learning / Computer Vision?

Machine Learning is an intriguing field and really interesting to pursue as a career. But there are nearly no jobs available for freshers.

If you are in college, Machine Learning or Computer Vision might give you an upper hand in placements but might not get you placed all alone. I would recommend limiting Machine Learning to the extent you feel it's gonna add up to your career.

Relevant Resources:

• Machine Learning A-Z

Mantra to success?

Set your long term goals early in your career and short term goals as you go. Define them in such a way that your short-term goals adds up to a long-term goal. Similarly, your long-term goals add up to your life-goal.

Here's how goals could look like:

A Long Term Goal

Get a Software Engineer job at Google.

A Short Term Goal

To acquire a skill that would help you get an internship in the upcoming summer.

ProTip: Having prior experience in form of internships adds a bit of weight to your resume when applying for full-time roles.

Success?

Success is no accident. It is hard work, perseverance, learning, studying, sacrifice, and most of all, love of what you are doing or learning to do. ~ Pelé

The subject said, "2021 Application Engineering Internship Opportunity with Google India!".

At first, I was like, "Ahh.. this seems interesting. Let’s give it a read."

Neither I had applied nor been referred to this role. It was just sheer luck that the recruiter found me interesting and decided to shoot me an email.

Application Engineering? What’s that? 💼

It was not the first time I was hearing the term Application Engineering, but my initial perspective about the role was a bit off. Like, everyone, I was applying only for SWE roles till now, never thought of going in the AE direction.

When I dug deeper into the role and read more about it, not only I found it more exciting than generic SWE roles, also I found it to be more aligned with my interests and my career perspective.

Application Engineering is more business-aligned and generally focused on building products for fellow Googlers rather than for public release.

Recruitment Process 📃

Let’s dive straight into the process step by step

• Application Review & Shortlisting
• 2 x Hangout Interviews
• Hiring Committee (HC) Review
• Offer Review & Extend

Application Review & Shortlisting 👀

When I got the initial email to check my interest in the role, I was asked to fill an Interview Availability Form.

The form asked for the times when I’m available to take the interviews in a span of 10 days in the second week of December along with my preferred programming languages.

I wasn’t shortlisted till this time. Interviews will only be scheduled if I’m shortlisted for further interaction based on feedback from hiring teams.

Two days later, I got a mail saying I've been shortlisted for the interviews and mandatorily need to take part in an Interview Prep Session. The session took place in the next week.

2 x Hangout Interview 👔

Following the Interview Prep Session, I got the invitations for the interviews.

The interviews were scheduled on the very first day of the availability I gave. Both the interviews were back to back with some rest between them. Along with the schedule, they shared the links to separate Interview Documents.

Both the interviews were approximately 1 hour each and were done via Google Meet.

Coding Interview

Result: Positive
Experience: Good

Application Design Interview

Result: Positive
Experience: Average

Hiring Committee (HC) Review 🕒

A couple of days after the interviews, the recruiter emailed notifying me that I’ve done well in my interviews and they would be moving me to the next stage, Intern Hiring Committee Review.

Here I was also asked to confirm my graduating year and send the latest copies of resume and academic transcripts.

Offer! — the YaY moment! 🥳

Around a week later, the recruiter notified me that I've cleared the hiring process and they would like to extend an internship offer to me.

I was given 48 hours to accept the offer.

Are you interviewing? Here’re some tips.

Before Interviews

• Go through all the resources provided by hiring teams.
• Research about the company. Make sure you know their values.
• Prepare answers to general questions beforehand.
• Go through your resume. Make sure you know, what they know about you.

During Interviews

• Be on time. Join the call 5 minutes before the scheduled time.
• Dress formally. Just because it’s virtual, doesn't mean it's casual.
• Let the interviewer know your thought process. Keep talking.
• Ask clarifying questions, and make use of what the interviewer gives you.

After Interviews

• Ask follow-up questions relevant to the job.
• Ask the interviewer for honest feedback.
• Give closing greetings to the interviewer.

Looking for resources? Here're some. 🚁

According to JPMorgan Chase & Co.,

Code for Good is a series of hackathons hosted in JPMorgan’s global technology centers. During this event, participants spend 12–24 hours with our employees, developing creative solutions to help nonprofits tackle real-world problems.

It’s the chance of a lifetime to demonstrate how technology can be one of the greatest tools for solving social problems around the world.

According to me,

It’s a platform for university students, industry experts, and NPOs, where all come together to use technology to build a product that can help in solving real-world problems, not the bigger ones, but putting up a foundation stone for the greater good.

Students get to learn from industry experts, and vice-versa. In the end, competent students are offered internships and FTE opportunities with the firm.

👉 The Selection Process to Code for Good

📃 The Problem Statement

Our problem statement was given by Inqui-lab Foundation and was centered on developing a data collection and analytics solution.

🎁 Presentation from Inqui-lab Foundation

About Inqui-lab Foundation

Inqui-Lab aims to nurture the next generation as grassroot problem solvers who can contribute meaningfully to society. Their mission is to design platforms and interventions that transform student learning spaces into places of creativity, design, and innovation.

🎯 The Solution

We created a Progressive Web Application (PWA) based on ReactJS to get the data filled-in using forms thereby making the data collection process easier. We also created different dashboards so as to see the data in an aggregated format and draw out conclusions.

The entire backend / APIs were created on NodeJS and the databases were on MongoDB.

🔢 Data Flow Diagram

💻 Tech Stack Used

📺 Video Demonstration

🙌 The Team

My team titled #Team46, was a team of 5 members from different parts of the country. We worked through the challenge in a very collaborative manner and as a result, we’re able to win the hackathon at the end of the day.

Shivam Goyal — Thapar Institute of Engineering & Technology, Patiala
Rahul Bera — Vellore Institute of Technology, Chennai
Parshwa Shah — Sardar Patel Institute of Technology, Mumbai
Jessiya Joy — National Institute of Technology, Calicut
Aseem Khullar — Thapar Institute of Engineering & Technology, Patiala

👬 The Mentors

There were two mentors who were assigned to our team for guiding us throughout the hackathon day regarding technical as well as non-technical aspects of the product, problem statement.

The mentors were also responsible for judging the team members individually as the individual score of every team member is a major factor while extending job opportunities to participating students.

Sachin Bhade — Vice President — JPMorgan Chase | LinkedIn
Jagendra Deshmukh — Associate — JPMorgan Chase & Co. | LinkedIn

🎉 And the Winners

At 02:08 PM, on Monday 17th Aug, #Team46 was announced as the winners for the Inqui-lab Foundation’s problem statement.

📩 Final Words

I really don’t have words to express how it feels to be a winner in such a large scale hiring hackathon. The moment when winners were being announced, I was so worried & nervous. But the fact that we won it finally was really a dream come true for me and my team. We were so shocked that we literally asked the organizers to announce the result for our PS once again. 😅

Overall, it was a great experience, collaborating with students across India and building a product that soon will be used to solve a real-world problem and in turn, would help lakhs of students to build their skills further.

Here, I would like to express my thanks and gratitude to Sachin and Jagendra as well. They stood with us for the entire day of the hackathon and motivated us to build the right product while keeping the environment as friendly as possible. Thanks again guys, It wouldn’t have been possible without you guys.

Although it was a virtual event and I personally missed the energy blasts and talking to tons of people like we do at in-person events, but the organizers really did a great job and made the hackathon as close to an in-person event as possible. All thanks to Anjana & Mridula, you guys rock. 😉

🔰 More about Code for Good

What you’ll build?

In this tutorial, you’ll build a mobile app featuring an AlertDialog / Popup in Flutter. The AlertDialog will have the following features:

• Animated loader GIF

• Customized actions buttons

• Curved Edges

This tutorial focuses on adding an AlertDialog to the Flutter app. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.

GitHub Profile | shyvum

Setting up Flutter on your machine

The detailed steps to install Flutter on your personal computer & getting started with Flutter is available in the following blog post

AlertDialog constructor

const AlertDialog({
    Key key,
    Widget title,
    EdgeInsetsGeometry titlePadding,
    TextStyle titleTextStyle,
    Widget content,
    EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
    TextStyle contentTextStyle,
    List<Widget> actions,
    Color backgroundColor,
    double elevation,
    String semanticLabel,
    ShapeBorder shape
})

Downloading Assets

Download the GIF by right-clicking, and saving it as listening.gif at /{%PROJECTROOT%}/assets/images/listening.gif

Credits: Bendt on Pinterest

Importing Assets

Import the GIF to your project by adding the file path to your pubspec.yaml file.

...
flutter:
  uses-material-design: true
  assets:
    - assets/images/listening.gif
...

Putting Code in action

Create a file named voicePayDialog.dart in the same directory as of your main.dart file and amend the file with the following code:

import 'package:flutter/material.dart';

class VoicePay extends StatefulWidget {
  @override
  _VoicePayState createState() => _VoicePayState();
}

class _VoicePayState extends State<VoicePay> {

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(25),
        ),
      ),
      title: Text(
        'VoicePay',
        textAlign: TextAlign.center,
        style: TextStyle(fontWeight: FontWeight.w700, fontSize: 25.0),
      ),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Image.asset('assets/images/listening.gif'),
          SizedBox(height: 10.0),
          Container(
            alignment: Alignment.center,
            height: 45.0,
            child: Text(
              'Tap on mic to VoicePay',
              style: TextStyle(fontSize: 20.0),
              textAlign: TextAlign.center,
            ),
          ),
          SizedBox(height: 30.0),
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.keyboard),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.mic),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.translate),
                onPressed: () {},
              ),
            ],
          ),
        ],
      ),
    );
  }
}

To show the AlertDialog / Popup add the following code to onPressed or onTap parameter of any button in your main.dart file:

onPressed: () {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return VoicePay();
    },
  );
},

Remember to import voicePayDialog.dart in main.dart

Building & running the application

• Connect your Emulator or physical Android device to test the application.

• Click on Build & Run.

• And Boooom 🧨, your app is ready to launch.

Congratulations!

You have completed this tutorial and have built a Flutter app with an AlertDialog! Also, in the meantime, you integrated GIFs in the App.

Version control systems are a category of software tools that help a software team manage changes to source code over time. Version control software keeps track of every modification to the code in a special kind of database. If a mistake is made, developers can turn back the clock and compare earlier versions of the code to help fix the mistake while minimizing disruption to all team members.

In simple words, Version Control enables your code to live long by logging the state continuously, in an easily accessible format.

Do we developers really need VCS?

Having a VCS linked to your project is not a mandatory feature, but surely is a recommended one.

Having a VCS makes it easy to track 'who developed what' when the project is being developed on multiple devices simultaneously, by multiple developers.

While it is possible to develop software without using any version control, doing so subjects the project to a huge risk that no professional team would be advised to accept. So the question is not whether to use version control but which version control system to use.

Which Version Control is best for you?

There are plenty of choices available in the market including:

1. Git
2. Mercurial
3. SVN
4. CVS

The industry’s most used VCS is Git and hence is the most recommended one.Here, we will only be talking about Git.

Pros & Cons of Git Version Control

Pros of using Git

It’s exactly why to pick Git over others.

• Distributed fault-tolerant network architecture
• Optimized for fast commits and checkouts
• Non-destructive updates through the use of an immutable log

Cons of using Git

Nothing is perfect, hence is Git.

• Weak support for large binary files
• Very large repositories with extensive history can slow down interactions
• Learning curve and un-intuitive commands

Setting up Git

Now, it’s time to set up Git on your system.

There are plenty of ways to start with, but we will be using a VCS client called SourceTree as it’s the most prevailing VCS client in the tech industry.

Reasons for choosing SourceTree

There are five major reasons for choosing SourceTree over Command-Line or any other Git client.

1. Branch management
   Managing branches in Sourcetree is easy. It enables you to switch working copies with a single click. It also tells you how far ahead or behind you are to the version in the repository, and alerts you to push or pull. Know where you are with visual branch management.
2. Working Copy
   Using the command line can sometimes feel like you are working in the dark. The ‘Working Copy’ section shows the difference between your local copy and the version in the Git repository. This gives you a ‘real-time’ view of your local files, so you can see exactly what you have changed.
3. Branch History
   A huge part of the SourceTree interface is History. This section displays the full history of the current branch. Each commit and file change is displayed and accessible, providing a very powerful tool for version control. This alone is a huge benefit for projects which are worked on regularly by multiple developers.
4. GitFlow
   One feature I make use of is GitFlow. Having 6+ developers working on one set of code at once can get complicated. GitFlow adds a structured process to your workflow, which ensures that parallel code changes are completed without any hiccups, and it’s a two-click setup! I have seen a huge reduction in merge conflicts thanks to GitFlow.
5. It’s Free
   It doesn’t cost a thing to download or use SourceTree, great huh!?

Installing SourceTree

• Go to the Sourcetree website and click the download button.
• From the ZIP file you download, click the application file (EXE for Windows or DMG for Mac) to download.
• After you install, you’ll have to agree to the Atlassian Customer Agreement and hit Continue.
• You need an Atlassian account to use Sourcetree. When you get to this screen, click either Use an existing account or Go to My Atlassian and follow the prompts to create a new account. Once you’ve got an account, you’ll be able to log in with Use an existing account.

• If you want to connect to a remote hosting service, use the default options as you enter your Bitbucket or GitHub credentials. If you can’t continue without generating an SSH key, select HTTPS to continue or see Set up an SSH key for more details about setting up SSH with Sourcetree.

• Follow the prompts until you’re done with the setup. If you aren’t ready to clone a repository, click Skip Setup.

Connecting to GitHub

• Firstly, sign up on GitHub, if you already don’t have a GitHub account.

• Switch to SourceTree. Click the gear icon and select Accounts.

• Click Add from the Accounts tab.
• After you select a GitHub as Host, enter your hosting details. Keep the default Auth Type and click Connect Account to enter your credentials.
• When you enter your account details, you can choose whether you prefer to connect with HTTPS or SSH. Choose HTTPS for now.
• An authentication window will open in your browser. Login with your GitHub Credentials and grant permission.

Hola…!!! 🙌 Your Github account is logged into SourceTree and you are good to go.

Breakfast + Lunch + Dinner Commands

These are the commands which are highly used in each and every project.

• git init
  Create empty Git repo in the specified directory. Run with no arguments to initialize the current directory as a git repository
• git add
  Stage all changes in <directory> for the next commit. Replace <directory> with a <file> to change a specific file.
• git commit -m "<message>"
  Commit the staged snapshot, but instead of launching a text editor, use <message> as the commit message.
• git push <remote> <branch>
  Push the branch to <remote>, along with necessary commits and objects. Creates named branch in the remote repo if it doesn’t exist.
• git pull
  Fetch the specified remote’s copy of the current branch and immediately merge it into the local copy.
• git clone <repo>
  Clone repo located at onto local machine. The original repo can be located on the local filesystem or on a remote machine via HTTP or SSH.
• git status
  List which files are staged, unstaged, and untracked.
• git log
  Display the entire commit history using the default format. For customization see additional options.
• git diff
  Show unstaged changes between your index and working directory.

PowerUser Tips

Here are the tips to make the best use of Git with your projects.

SourceTree Dark Mode

Enable Dark Theme for SourceTree in Tools >> Options.

Push with Commit

Tick the checkbox against ‘Push changes immediately…’ to make sure your changes are updated on the remote repository as soon as you commit the change to the local copy of repository.

SourceTree QuickAccess Menu

Use the QuickAccess menu to access frequently used features easily.

• Terminal to open Terminal directly at the repository directory
• Remote to open the remote repository in the browser
• Explorer to open the local repository in the File Explorer

Faster Repository Search

• Press Ctrl + B on your keyboard to toggle Bookmarks Sidebar.
• Type your search query straight away.
• Hit ENTER to open the Working Copy of repo in SourceTree.

Git CheatSheet

SourceTree Shortcuts

What you’ll build?

In this tutorial, you’ll build a mobile app featuring a PullToRefresh gesture using the Flutter SDK. Your app will:

• Display a dynamic list with a random number of items

• Each time you PullToRefresh the no of items will change in the list

This tutorial focuses on adding a PullToRefresh gesture to a Flutter app. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.

Github Repository | shyvum

Widget In Focus | RefreshIndicator

Setting up Flutter on your machine

The detailed steps to install Flutter on your personal computer & getting started with Flutter is available in the following blog

Component Syntax

The basic format of PullToRefresh gesture looks like the one below:

Implementation

The most generic way to implement PullToRefresh is as follows:

Importing dart libraries to main.dart file

Import dart:async & dart:math libraries to your main.dart file by adding the following line at the starting of the file:

Putting Code in action

Amend your main.dart file as per the following code:

Building & running the application

• Connect your Emulator or physical Android device to test the application.

• Click on Build & Run.

• And Boooom 🧨, your app is ready. The final build would look like the below illustration.

What you’ll build?

In this tutorial, you’ll build a mobile app featuring a DateTime Picker using the Flutter SDK. Your app will:

• Display separate Date & Time Pickers with a minimalistic interface

• Display the selected data as outputs to console

This tutorial focuses on adding a DateTime Picker to a Flutter app. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.

Github Repository | ShivamGoyal1899

Package Used | flutter_datetime_picker

Setting up Flutter on your machine

The detailed steps to install Flutter on your personal computer & getting started with Flutter is available in the following blog

Component Syntax

The basic format of a DateTime Picker looks like the one below:

Adding DateTime Picker plugin as a dependency

Adding the additional capability to a Flutter app is easy using Pub packages. In this tutorial, you introduce the DateTime Picker plugin by adding a single line to the pubspec.yaml file.

Importing plugin to main.dart file

Import flutter_datetime_picker dependency to your main.dart file by adding the following line at the starting of the file:

Putting Code in action

Amend your main.dart file as per the following code:

Building & running the application

• Connect your Emulator or physical Android device to test the application.

• Click on Build & Run.

• And Boooom, your app is ready. The final build would look like the below illustration.

Customization Options

There are three functional variations of the plugin available as follows:

• Solo DatePicker

• Solo TimePicker

• Dual DateTimePicker

Language Options

There are various language options available to implement the plugin for international use. For changing the language of the component amend the following with preferred LocaleType.

locale: LocaleType.en

• English(en)

• Persian(fa)

• Chinese(zh)

• Dutch(nl)

• Russian(ru)

• Italian(it)

• French(fr)

• Spanish(es)

• Polish (pl)

• Portuguese(pt)

• Korean(ko)

• Arabic(ar)

• Turkish(tr)

• Japanese(jp)

• German(de)

• Danish(da)

• Bengali(bn)

• Vietnamese(vi)

• Armenian(hy)

Further Customizations

If you want to customize your own style of date time picker, there is a class called CommonPickerModel, every type of date time picker is extended from this class, you can refer to other picker models (eg. DatePickerModel), and write your custom one, then pass this model to showPicker method, so that your own date time picker will appear, it’s easy, and will perfectly meet your demand.

How to customize your own picker model:

What is Flutter?

Flutter is Google’s portable UI toolkit for crafting high-quality native experiences for mobile, web, and desktop in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

What does Flutter do?

For users, Flutter makes beautiful app UIs come to life.

For developers, Flutter lowers the bar to entry for building mobile apps. It speeds up the development of mobile apps and reduces the cost and complexity of app production across iOS and Android.

For designers, Flutter helps deliver the original design vision, without loss of fidelity or compromises. It also acts as a productive prototyping tool.

What technology is Flutter built with?

Flutter is built with C, C++, Dart, and Skia (a 2D rendering engine). See this architecture diagram for a better picture of the main components.

Why use Flutter?

• Develop for iOS and Android from a single codebase

• Do more with less code, even on a single OS, with a modern, expressive language and a declarative approach

• Experiment by changing code and reloading as your app runs (with hot reload)

• Fix crashes and continue debugging from where the app left off

• Benefit from a rich set of Material Design and Cupertino (iOS-flavor) widgets built using Flutter’s own framework

• Realize custom, beautiful, brand-driven designs, without the limitations of OEM widget sets

How to Install Flutter on Windows?

Minimum System Requirements

• Operating Systems: Windows 7 or later [64-bit]

• Disk Space: 400 MB

• Git for Windows

Get the Flutter SDK

• Download Latest Flutter SDK here:

• Unzip the downloaded zip in C:\flutter .

• Locate flutter_console.bat inside the flutter directory and start it by double-clicking.

Update your path

If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATHenvironment variable:

• From the Start search bar, type ‘env’ and select Edit environment variables for your account

• Under User variables check if there is an entry called Path:

• If the entry does exist, append the full path to flutter\bin using ; as a separator from existing values.

• If the entry does not exist, create a new user variable named Path with the full path to flutter\bin as its value.

Note that you will have to close and reopen any existing console windows for these changes to take effect.

Run flutter doctor

From a console window which has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:

C:\flutter> flutter doctor

This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).

For example:

[-] Android toolchain - develop for Android devices
    • Android SDK at C:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
     visit https://flutter.dev/setup/#android-setup for detailed instructions.

Android Setup

Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors.

Install Android Studio

1. Download and install Android Studio.

2. Start Android Studio, and go through the 'Android Studio Setup Wizard'. This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

Set up your Android device

To prepare to run and test your Flutter app on an Android device, you’ll need an Android device running Android 4.1 (API level 16) or higher.

1. Enable Developer Options and USB debugging on your device. Detailed instructions are available in the Android documentation.

2. Windows-only: Install the Google USB Driver

3. Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.

4. In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device.

By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_HOME environment variable to that installation directory.

Install the Flutter and Dart plugins

1. Start Android Studio.

2. Open plugin preferences (File > Settings > Plugins).

3. Select Browse repositories, select the Flutter plugin and click Install.

4. Click Yes when prompted to install the Dart plugin.

5. Click Restart when prompted.

How to Install Flutter on MacOS?

Minimum System Requirements

• Operating Systems: macOS [64-bit]

• Disk Space: 700 MB

• Git for macOS

Get the Flutter SDK

• Download Latest Flutter SDK here:

• Extract the file in the desired location e.g.

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip

• Add the flutter tool to your path. To do this, open your bash profile from your terminal (might need sudo)

$ sudo vim ~/.bash_profile

Add your flutter path to the $PATH variable in bash_profile.

E.g. If you extracted flutter in your Applications folder, your path will be /Applications/flutter/bin . Add this to the existing $PATH variable by using : in between two paths. Once added, save and close the bash_profile . Run terminal again and check the $PATH by running

$ echo $PATH

You should see your Flutter path added to the $PATH

• Run flutter precache in the terminal.

Run flutter doctor

Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the -v flag):

$ flutter doctor

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).

For example: If you haven’t used Flutter before, you might see an output like this by running flutter doctor

You can see there are several things to be done to begin using Flutter in this Mac. To correct these issues, let’s run the following commands

Fix license issue in Android studio

$ flutter doctor --android-licenses

Fix iOS toolchain issues

Install Xcode command line tools if you are on Mac OS Mojave

$ brew update
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller

Update iOS-deploy

$ npm install -g ios-deploy

brew does not maintain it any longer, as flutter doctor suggests

Android Studio — Install Flutter and Dart plugins

1. Start Android Studio.

2. Open plugin preferences (Preferences > Plugins on macOS, File > Settings > Plugins on Windows).

3. Select Browse repositories, select the Flutter plugin and click Install.

4. Click Yes when prompted to install the Dart plugin.

5. Click Restart when prompted.

Install VSCode Flutter Extension

Now all issues should be gone

iOS Setup

Install Xcode

To develop Flutter apps for iOS, you need a Mac with Xcode 9.0 or newer:

• Install Xcode 9.0 or newer (via web download or the Mac App Store).

• Configure the Xcode command-line tools to use the newly-installed version of Xcode by running the following from the command line:

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

• This is the correct path for most cases, when you want to use the latest version of Xcode. If you need to use a different version, specify that path instead.

• Make sure the Xcode license agreement is signed by either opening Xcode once and confirming or running sudo xcodebuild -license from the command line.

With Xcode, you’ll be able to run Flutter apps on an iOS device or on the simulator.

Set up the iOS simulator

To prepare to run and test your Flutter app on the iOS simulator, follow these steps:

• On your Mac, find the Simulator via Spotlight or by using the following command:

$ open -a Simulator

• Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the simulator’s Hardware > Device menu.

• Depending on your development machine’s screen size, simulated high-screen-density iOS devices may overflow your screen. Set the device scale under the Window > Scale menu in the simulator.

Create and run a simple Flutter app

To create your first Flutter app and test your setup, follow these steps:

• Create a new Flutter app by running the following from the command line:

$ flutter create my_app

A my_app directory is created, containing Flutter’s starter app.

CD into this directory:

$ cd my_app

To launch the app in the Simulator, ensure that the Simulator is running and enter:

$ flutter run

Deploy to iOS devices

To deploy your Flutter app to a physical iOS device, you’ll need some additional tools and an Apple account. You’ll also need to set up physical device deployment in Xcode.

• Install homebrew.

• Ensure that homebrew is up to date:

$ brew update

• Install the tools for deploying Flutter apps to iOS devices by running the following commands:

$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

Android setup

Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step will discuss that.

Install Android Studio

1. Download and install Android Studio.

2. Start Android Studio, and go through the 'Android Studio Setup Wizard'. This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

Set up your Android device

To prepare to run and test your Flutter app on an Android device, you’ll need an Android device running Android 4.1 (API level 16) or higher.

1. Enable Developer Options and USB debugging on your device. Detailed instructions are available in the Android documentation.

2. Windows-only: Install the Google USB Driver

3. Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.

4. In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device.

5. Once ready, run flutter run again to run the app on Android device 😎

By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_HOME environment variable to that installation directory.

Set up the Android emulator

To prepare to run and test your Flutter app on the Android emulator, follow these steps:

1. Enable VM acceleration on your machine.

2. Launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device. (The Android submenu is only present when inside an Android project.)

3. Choose a device definition and select Next.

4. Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.

5. Under Emulated Performance, select Hardware — GLES 2.0 to enable hardware acceleration.

6. Verify the AVD configuration is correct, and select Finish. For details on the above steps, see Managing AVDs.

7. In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.

Congratulations!

YaY..!! 👻 You’re almost done. Now, you are ready to design beautiful Android and iOS Apps with Flutter.