Network Connectivity in Flutter

By | June 10, 2019

In this demo, we will see how to check network connectivity in flutter. We will see three different ways to check connectivity in Flutter. Watch Video Tutorial Add Plugin Method 1 Method 2 Using Subscription, we can subscribe to the network change events. Method 3 What if you want to listen to network changes through out the app… Read More »

James

Download ZIP, Extract it and Show the images file in List in UI

By | June 7, 2019

Watch Video Tutorial     Add Plugins   For downloading, Extracting and saving ZIP in the device, we need some plugins. So open your pubspec.yaml file and add the below plugins.   The ‘http‘ package is for downloading the zip file, ‘path_provider‘ is for saving the file inside the device and the ‘archive‘ package is for extracting the… Read More »

James

Understanding Application States in Flutter

By | June 3, 2019

This example is all about understanding Application States in flutter. Although it seems simple, it’s very important. If you are an Android or iOS Developer, you may be familier with these concepts and callbacks. Andrid has onResume, onPause etc callbacks, iOS has viewWillDisappear,viewDidAppear, didFinishLaunchingWithOptions etc callback functions to acheive this. These funtions are useful most of the times… Read More »

James

Play Video in Flutter

By | May 30, 2019

This is a simple example to play a video in Flutter. Add Plugin We will use the video player plugin to play video. Go to your pubspec.yaml file in your project and add the below plugin. Initialiaze the Controller Add the Video Player Widget We will add the VideoPlayer when the connectionState is done and video is actually… Read More »

James

Flutter Tutorials – Handling Back Button in Flutter for Android and iOS

By | May 20, 2019

Handling back button and providing a different functionality is always a requirement among mobile developers. Flutter also helps you to do that. Let’s see how that works. Watch Video Tutorial This is achieved with the help of a widget called “WillPopScope”. ‘WillPopScope‘ has a method call ‘onWillPop‘ which can be used to override the back button functionality and… Read More »

James

Flutter Tutorial – Google Maps in Flutter

By | May 12, 2019

For Adding Google Maps in Flutter, you need the API keys for each app. Let’s Start Watch Video Tutorial Get API Key To get API key, you have to go to Google Platform Cloud Console and register your app there. Create a new project or set up a new one, the enable Google Maps to get the API… Read More »

James

Flutter Tutorial – Upload Image in Flutter Using PHP

By | April 30, 2019

Today in this article we will see how we can upload image to a server using Flutter. Watch Video Tutorial     Add Plugins   First thing we are going to need is the plugin for networking and plugin to select image from camera or gallery.   Add the below plugins in the pubspec.yaml file. Import the needed… Read More »

James

Interview Problem Solving – Mars Exploration

By | April 26, 2019

Problem Sami’s spaceship crashed on Mars! She sends a series of SOS messages to Earth for help. Letters in some of the SOS messages are altered by cosmic radiation during transmission. Given the signal received by Earth as a string, , determine how many letters of Sami’s SOS have been changed by radiation. For example, Earth receives SOSTOT.… Read More »

James

TabbedAppBar in Flutter – Android and iOS.

By | April 26, 2019

Hello, welcome to another flutter tutorial. This tutorial helps you to create a top TabBar navigation with AppBar. The app will look like this below. Watch Video Tutorial This is actually simple and easy. Let’s start by creating the model class. Our model class is named “Choice“. Now we will create a list of Choices and fill it… Read More »

James

Carousel in Flutter

By | April 22, 2019

Carousels are an awesome way to show a list of images. We will be using a plugin to show the carousel in flutter.     Watch Video Tutorial Add Plugin   To use carousel we need to add the below plugin to our pubspec.yaml file https://pub.dartlang.org/packages/carousel_slider   So open your pubspec.yaml file and add the plugin…    … Read More »

James

Using Gradient in Flutter

By | April 18, 2019

Here is a simple example of using Gradient in Flutter. Here we are just showing a demo of how to use LinearGradient in Flutter. You can even use the RadialGradient or SweepGradient in the similar way.   Watch Video Tutorial Here is the complete example of setting a LinearGradient in a Container. Please leave your valuable comments below.

James

Bottom Navigation in Flutter

By | April 18, 2019

This article shows how to implement Bottom navigation using Tabs in Flutter.     Watch Video Tutorial     For that we need to have a TabController and a TabBarView Widget.   Create Tabs   This is our demo tab layout widget. Create a new file name FirstTab.dart and copy the contents into it. You can create other… Read More »

James

Using Custom Fonts in Flutter

By | April 17, 2019

Using Custom Fonts in Flutter is really easy. Watch Video Tutorial     Here I have a folder named “fonts” in my project folder. I also have a font file “Roboto-Medium” in fonts folder.   Register font in pubspec.yaml   If you open pubspec.yaml file, you will see commented out fonts section below the file. You can uncomment… Read More »

James

Dropdown List in Flutter

By | April 16, 2019

We are going to create a simple dropdown in Flutter. Watch Video Tutorial     Create Model Class We will be listing a group of company names in a dropdown. For that we should create a model class named “Company”. So we have a static function that returns an array of companies. Now we will need a list… Read More »

James

Stepper Widgets in Flutter

By | April 15, 2019

Hello, Stepper is an awesome widget in Flutter. It makes developers job easy by writing less code.     Here we will have a UI as shown in the below screenshot.     First we will create a list of 3 Steps. Each Step will have a ‘title‘, ‘content‘ and isActive property. ‘content‘ can be any Widget. To… Read More »

James

Flutter – Tips & Tricks

By | April 6, 2019

Hello welcome back to another flutter tutorial. Here I will be showing some quick flutter coding tips and tricks.   Watch Video Tutorial     # Tip 1 – Dismiss Keyboard   To dismiss Keyboard, we have to set focus on a different node as shown in the example below using the Gesture Detector.     # Tip… Read More »

James

Webview in Flutter – Part 2

By | March 28, 2019

Welcome to another Webview tutorial, In this tutorial we will see what are the other API’s available in the webview_flutter plugin. Read the part-1 of this tutorial to get an introduction on webview in flutter.     Watch Video Tutorial     We will be implementing the below functionalities in our webview.   Show User Agent List Cookies… Read More »

James

Using Webview in Flutter – Part 1

By | March 24, 2019

We can use Webviews in Flutter with the help of webview plugins. I will be showing one of the plugins that is developed by the Flutter team. So Let’s start and we will add the dependency first Watch Video Tutorial     Add dependency   The plugin can be found in the below url https://pub.dartlang.org/packages/webview_flutter You have to… Read More »

James

Collapsing AppBar in Flutter – Android and iOS

By | March 1, 2019

Here I will show two different ways to create collapsing AppBar in flutter.     Watch Video Tutorial     Using NestedScrollView     I have the sample image parrot.jpg in the images folder and added to pubspec.yaml. SliverAppBar expands to its expandedHeight when user scrolls the view below the AppBar.   Using CustomScrollView     Here we… Read More »

James

Create Device Specific Layout – Phone/Tablet layouts in Flutter using MediaQuery and LayoutBuilders.

By | February 24, 2019

This article will show you how to create layouts that behave according to the user’s device, that’s a phone or Tablet. Here we will be creating two GridViews, one will be for Phones and others will be for Tablets. Watch Video Tutorial Let’s create the functions that returns the two GridViews first. Here the Phone GridView will show… Read More »

James

Complex JSON Parsing in Flutter / Dart

By | February 19, 2019

Hi This article helps you to do complex Json Parsing in Flutter or dart. Watch Video Tutorial Simple JSON I have the following json in a file named “person.json” in a folder named “json” in root of my project. To parse this json, we will create a model class named “Person”. The “fromJson” method creates a “Person” object… Read More »

James

Flutter Tutorials – CloudFireStore CRUD Operations in Flutter

By | February 13, 2019

For accessing CloudFireStore for Firebase, you need to have Firebase account. For that you need to go to https://console.firebase.google.com and sign up.   Watch Video Tutorial     # Create a project and give the details # Once you create the project, Click Add new App in the Project Settings.     # Add the Details for your… Read More »

James