All About Flutter

Introduction In this tutorial, we will create an image picker and display the content on the screen . I mage Picker picks a file from the Storage or Camera and stores it in an XFile object. Implementation Install dependency We will first need the image_picker dependency . To install it, add the following dependency to pubspec.yaml file. image_picker: ^0.8.4+3 Then click on Get Packages in your IDE or run the following command on your Terminal / Command Prompt. flutter pub get Example Import the dependency in your dart file. import 'package:image_picker/image_picker.dart' ; Syntax Image picking is a future task . So we need to await the image picking . Here is the syntax. await _picker.pickImage( source : ImageSource.gallery); Here we have provided the source from the gallery . We can also provide the source as a Camera using the following syntax. await _picker.pickImage( source : Ima...

In this tutorial, we will create and display Material Banner in Flutter . Material Banners are displayed at the top of the screen . User interaction is required to dismiss the banner . Material Banner Material Banner alerts the user about action and p rovides some actions for the user to take . In brief, it alerts the user about an issue and the user address the issue . The user should dismiss the banner to remove it from the screen else it will be active. Syntax  ScaffoldMessenger.of(context).showMaterialBanner(MaterialBanner( content: content, actions: actions)) Code Here is our starting class. It is a stateless class and we will display a banner when the Button is pressed. class SnackBarTutorial extends StatelessWidget { const SnackBarTutorial({Key ? key}) : super ( key: key); @ override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text( "Material Banner"...

In this article, we will create and display different types of SnackBars in Flutter.  SnackBars in Flutter SnackBars are used to briefly display some information or inform the user about an action. For instance, when a user deletes a mail or message you may want to inform the user about the action. Also, the user can undo the action he performed by the undo button in the Snackbar . Syntax For creating a SnackBar, we use the following code. ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: content)); Inside the content field of SnackBar, we will pass the content. Any content can be passed inside it, but in practice, small messages with or without a button. Example Simple SnackBar class SnackBarTutorial extends StatelessWidget {   const SnackBarTutorial({Key? key}) : super (key: key);   @override   Widget build(BuildContext context) { ...

In this tutorial, we will learn how to perform animations while navigating from one screen to another. We will not require any other dependency to be installed. We will demonstrate the following example. So let's start. Approach Instead of using the default MaterialPageRoute, we will use the PageRouteBuilder. PageRouteBuilder provides all the functionalities like duration, type of animation. Syntax The syntax for PageRouteBuilder is as follows. PageRouteBuilder( transitionDuration: const Duration( seconds: 1 ), pageBuilder: (context, animation, secondaryAnimation) { return const SecondScreen(); }, ), The parameters and fields are self-explanatory. Code Let us code our First Screen of the app. class FirstScreen extends StatelessWidget { const FirstScreen({Key ? key}) : super ( key: key); @ override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text( "First...

Introduction Data saving and storing is a common practice in applications. We have many options like SQL, NoSQL and SharedPreference. The first two options are mainly focused on large amounts of data with large transactions with constant efficiency. If you want only to store the user progress in terms of levels the user crossed or name and age of user or if the user wants to turn off or on the music of the application. Here comes the SharedPreferences data saving type. So we will learn how to save data in our app using SharedPreference and then call the data. Table of contents Approach Project setup Code Conclusion Approach We need to add the plugin for SharedPreference in our project. After that, we need to instantiate the SharedPreference object in our class. After that, if we need to save data we will call the .set() method and for retrieving we need to call .ge...

Introduction DatePicker is very important when you want the user to pick his / her date of birth or something else. In Flutter, implementing DatePicker is very easy and we will implement DatePicker in both Android or Material style and Cupertino or IOS style.  Table of contents Approach Project Setup Material Style DatePicker Cupertino Style DatePicker Conclusion Approach Flutter has widgets for everything and even for DatePicker. DatePicker widget is loaded with all needed animation and colours. So implementation is very easy.  Project Setup No extra plugins are required for this project and you can continue with your existing project. Here is the starting code. class DatePickerTutorial extends StatefulWidget { const DatePickerTutorial({Key? key}) : super (key: key); @ override _DatePickerTutorialState createState() => _DatePickerTutorialState(); } class _DatePickerTutorialState extends State...

Introduction Checking and validating forms is an old practice that is followed since the times of the website and we have the same feature in Flutter. Many times user inputs either wrong information or in incorrect format and that's why Form and Text validation is very important whether it is a website or an app. Suppose you want a user to input his / her email address. Now if the user randomly types anything, you will store the wrong information. With Forms in Flutter, this work is even easier.  So in this tutorial, we are going to learn how to validate the Form widget and data input by users. Approach We will create a Form with some Text fields in our app. Later we will create a function that will check and validate the information input by the user. Table of Contents Setup Project Create a Form with Text Fields Validation Conclusion Setup Project We can either create a new project or proceed with the existing project. Th...