Skip to main content

Posts

Showing posts with the label flutter

Flutter : Image Picker Tutorial | Pick single image from Gallery

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...

Flutter | Material Banner Tutorial

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"...

Flutter: SharedPreferences tutorial | How to setup SharedPreferences ?

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...

PageView in Flutter | Everything about PageView in Flutter

 Introduction PageView is one of the best widgets in Flutter. You can make your screen swipeable and in this tutorial, we are going to learn PageView . Table of Contents Project Setup Code Design Extra features Result Project Setup We don't need any package to install for this tutorial. Also this tutorial we are going to use Containers in our PageView for simplicity. So create a new Flutter project and come to the body field of the Scaffold widget. Make sure to delete the rest of the sample code provided. Also, remove the FloatingActionButton widget. We do not need it for our tutorial. Inside the body field of Scaffold , use the PageView widget and declare the children field here. The code should be like below. If cannot delete the code properly copy and paste the code below in main.dart file. import 'package:flutter/material.dart' ; void main() { runApp(MyApp()); } class MyApp extends Statele...

Flutter: How to make Flip-Card animation in flutter. Flip card animation tutorial.

In this tutorial, we will learn to create Flip Card animation in Flutter. We will be using a package called flip_card for this tutorial.  Contents: Create a project Import dependencies Logic code Design of app Result