Using Webview in Flutter

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 »

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 »

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 »

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 »

Flutter Tutorials – Image Blur Effect using ImageFilters and BackdropFilters.

By | February 4, 2019

Hello,     Flutter makes it easy to apply filters to images. This article shows one of the ways to do that. The BackdropFilter widget along with ImageFilter class helps us to achieve this effect.   Watch Video Tutorial     Let’s Start…   Complete Code   I will be showing the complete source code here and explain… Read More »

Flutter Tutorials – Custom Progressbar using CustomPaint

By | February 3, 2019

Welcome to yet another Flutter Tutorial, in this Tutorial we will see how to create a custom Progressbar using Custom Paint.   Watch Video Tutorial     Custom Painter class   Create a new file named progress_painter.dart and create a class named ‘ProgressPainter’. This class extends the CustomPaint class and overrides two methods which needs to implemented.  … Read More »

Flutter Tutorials – Animated Container – Animate a widget in Flutter

By | January 31, 2019

Article shows how to use Animated Containers in Flutter. AnimatedContainer are used for Implicit animations in Flutter. Here we will be investigating AnimatedContainer, AnimatedCrossFade and AnimatedOpacity.   Watch Video Tutorial     AnimatedContainer   This by default uses Linear Interpolation to transition to the new values. Specify the duration to AnimatedCrossFade Here we will animate between two images,… Read More »

Flutter Tutorial – Shared Preferences (Android and iOS)

By | January 29, 2019

This article shows how to implement Shared Preferences in Flutter.   Watch Video Tutorial     Add Dependency   We will be using the shared_preferences plugin from Flutter to implement this.   You can go to this link and read more about it.   Go to your pubspec.yaml file and add the dependency.     Import plugins  … Read More »

Radio, RadioListTile in Flutter – Android & iOS.

By | January 27, 2019

This article will explain how to use Radio Buttons in Flutter. You can do this in flutter with the help of ‘Radio’ or ‘RadioListTile’ Widgets.   Watch Demo     Watch Video Tutorial     Let’s jump into the code.   Add Radio Buttons   The Below code adds two radio buttons to the UI.     The… Read More »

Rotate, Scale, Skew or Translate Widgets in Flutter using Transform

By | January 26, 2019

This articles describes how easily you can rotate, scale or translate widgets in Flutter. We can do that with the help of Transform Widget. Watch Demo Below is the demo of the app that we are going to build. https://youtu.be/Fw7DJV-QlkI Watch Video Tutorial The types of Transform widgets are: Transform (default constructor) Transform.rotate Transform.scale Transform.translate 1. Rotate Our… Read More »

#Flutter Tutorials – Shared Element Transition (Hero Widgets) – Android & iOS.

By | January 20, 2019

Shared Element transitions are native in Android, but with Flutter you can do the same UI transition with Flutter as well.   Watch Video Tutorial     Hero Widgets   Shared element transitions can be achieved in Flutter with the help of Hero Widgets.   Here I have two Screens, one is called ScreenOne and other DetailsScreen. ScreeOne… Read More »

Flutter Tutorial – Enable/Disable Any Widget – Android and iOS.

By | January 20, 2019

Today, I will introduce to a new widget in Flutter with which you can enable or disable any widget in Flutter.   If you wrap any widget in Flutter with the AbsorbPointer Widget, you can enable or disable that widget. That means if you wrap your whole UI in AbsorbPointer Widget, then you can control the user interaction… Read More »

Flutter Tutorials – Inherited Widgets

By | January 18, 2019

Today we are going to see how to use inherited widgets in Flutter. You may have seen ‘Theme.of(context)’ in one some Flutter applications or you might have used it. The thing is ‘Theme’ is available for the whole application and in every widget correct? We are going to do something like that and share data across the application.… Read More »

Flutter Tutorials – Navigation Drawer in Flutter – Android and iOS

By | January 16, 2019

Today we will see how we can implement a Navigation Drawer in Flutter. In Flutter, its easy, so Lets start…   Watch Video Tutorial     Navigation Drawer can be added as part of the Scaffold Widget. The Scaffold widget has a ‘drawer’ property on to which you can add the drawer. This simple example below demonstrates that.… Read More »

Bottomsheets in Flutter – Android and iOS

By | January 15, 2019

This demo shows how you can implement bottom sheets in flutter which works for both Android and iOS.   The StatefulWidget has a built-in function called “showModalBottomSheet’ which we will implement to show a bottom sheet.   Watch Video Tutorial     Modal Bottom Sheet     The below function implements a bottom sheet which shows like a… Read More »

Efficient use of Widgets in Flutter Container – Tip

By | January 12, 2019

  I am going to show how to efficiently make use of widgets in Flutter. This is a simple example of how to work with widgets in Flutter. Here we will be creating two widgets that looks similar, but let’s see how many hierarchies or levels of widgets are needed to create such a widget.   Watch Video… Read More »

Flutter Tutorials – AutoComplete TextField

By | January 11, 2019

Hi, Today, I will show you how you can implement AutoComplete TextField in Flutter. Watch Demo   Watch Video Tutorial     Add Library   You can get the Flutter AutoCompleteTextField Library from below link   https://pub.dartlang.org/packages/autocomplete_textfield   Get the package name and add it in the pubspec.yaml file add the dependency. We will also add the http… Read More »

Flutter Tutorial – Select an image from Gallery and show in Imageview

By | January 8, 2019

For selecting an image from the Gallery or Camera roll in Flutter, we need to include a library in pubspec.yaml file under the dependencies that is present in the root of your project. Demo Video     Watch Video Tutorial     Usage   To open the gallery     Show Image in the UI   Once the… Read More »

Flutter Tutorial – Bottom Navigation Tabs (Android and iOS)

By | January 5, 2019

In this article I am going to show how to implement bottom tabs in Flutter. Watch Video Tutorial     Let’s start. To add a bottom navigation bar in Flutter, you need to have the ‘Scaffold’ widget in the screen. So we will be adding a Scaffold widget as the parent of our screen.   Scaffold   Now… Read More »

Flutter Tutorials – Form Validation (Android and iOS)

By | January 5, 2019

Hello friends, In this article I am gonna show you how you can do Form Validation in a very simple way in Flutter. Below is the demo of the app we are going to build App Demo   Watch Video Tutorial   Explanation Here in this demo, I will have two TextformField and a Button and we will… Read More »

Create Custom Widget(Button) in Flutter – Android or iOS

By | January 3, 2019

Hello friends, In this article, I will show you how you can create custom widgets in Flutter using Widget Composition. As you know Flutter is cross Platform, so this is gonna work for both Android and iOS. Watch Video Tutorial   Let’s start now.   I am going to create a custom button just like you see in… Read More »

Switch Widget in Flutter Android and iOS Demo

By | January 1, 2019

Hello… In this article I am gonna show you how to implement a switch widget in Flutter. Watch Video Tutorial The switch widget has the following syntax. OnChange function is called when the user toggles the button. We have to create a state variable in the parent Widget to hold the state of the switch widget and change… Read More »