Here is a simple example for creating expanded list in flutter. Watch Video Tutorial We will create a new class named “Entry” which will be the data on each row of the list. Data Source Let’s create the array to be shown in the expanded list. Create Row Widget Create the List That’s it. Complete… Read More »
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… Read More »
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… Read More »
The first thing you need is the webview plugin itself and you can get it from the below link https://pub.dev/packages/webview_flutter Watch Video Tutorial Sample HTML file Below is the sameple HTML code that we are going to load into the webview I have saved this file under a folder named “files” in the root of… Read More »
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… Read More »
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… Read More »
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… Read More »
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… Read More »
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 … Read More »
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… Read More »
Below are the things that we are going to do. 1. Fetch data from Webservice 2. Create List of Objects from Webservice 3. Create View for each for in GridView 4. Call Webservice function in Main File with FutureBuilder. 5. Show Progress until data downloads 6. Show Error when some error happens. 7. Add… Read More »
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… Read More »
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… Read More »
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.… Read More »
DataTable is a really useful widget in Flutter. Today we will look into how we can use that to create beautiful apps in Flutter for Android and iOS. Watch Demo Below is the demo of the app we are going to make. Watch Video Tutorial The video tutorial demonstrates… Read More »
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… Read More »
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… Read More »
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… Read More »
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… Read More »
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… Read More »
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… Read More »