Hi Guys, Welcome to Proto Coders Point In this Flutter Tutorial we will look into flutter share plugin with example.
What is Flutter Share plugin?
In Flutter share plugin is very useful when user want’s to sharing contents from flutter app to any of his friends via the platform share dialog box.
This plugin is wraped with ACTION_VIEW INTENT as in android and UIActivityViewController as on iOS devices.
whenever the flutter app user wants to share any contents he can just click on share button which simply pop-up a share dialog using which he/she can easily share contents.
Let’s begin implementing Flutter share Plugin library
Flutter Share Plugin with Example
Step 1 : Add dependencies
To make user of this plugin you need to add share plugin depencencies under project pubspec.yaml file
On right side you will see your Flutter project,
your project name > pubspec.yaml
dependencies:
share: ^0.6.3+5 //add this line
The Version here given may get update so please visit official site here
Step 2 : Import share.dart package
Once you have add the dependencies file, to make use of this share plugin you need to import package share.dart in any dart file where you need to use this flutter plugin.
import 'package:share/share.dart';
Step 3 : Invoke share plugin method where ever required
To invoke or show a share dialog box in Android or iOS device all you need to do is just invoke share method like this :
Share.share('check out my website https://example.com');
This share method also takes an (optional)subject property that can be used when sharing through email
Share.share('check out my website https://example.com', subject: 'Look what I made!');
Flutter Share Plugin with Complete Source Code Example
main.dart file
Just copy paste below flutter source code under main.dart file
import 'package:flutter/material.dart';
import 'package:share/share.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Share Intent"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"Example on Share Plugin Flutter",
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 25.0),
),
),
SizedBox(
height: 25,
),
Center(
child: MaterialButton(
elevation: 5.0,
height: 50.0,
minWidth: 150,
color: Colors.blueAccent,
textColor: Colors.white,
child: Icon(Icons.share),
onPressed: () {
Share.share(
'check out my website https://protocoderspoint.com/');
},
),
),
SizedBox(
height: 25.0,
),
Center(
child: Text(
"Share with Subject works only while sharing on email",
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15.0),
),
),
Center(
child: MaterialButton(
elevation: 5.0,
height: 50.0,
minWidth: 150,
color: Colors.green,
textColor: Colors.white,
child: Icon(Icons.share),
onPressed: () {
Share.share(
'check out my website https://protocoderspoint.com/',
subject: 'Sharing on Email');
},
),
),
],
),
);
}
}
Result :
UI Design
UI Design
pop-up of share platform dialog box
When user clicks on blue share button and select any messenger to share contents
Flutter Photo View widget with zoomable image gallery
Hi Guys, welcome to proto coders point In this Flutter Tutorial will see above flutter photo view package library widget.
Flutter Photo View widget with zoomable image gallery
Photo View widget in flutter is a simple zoomable image or any content widget in flutter application development.
Using PhotoView widget on any widget view enable the widget images to become able to add zoom effect and a pan with user gestures such a rotate,pinch and drag gestures.
It also can show any widget instead of an image, such as Container, Text or a SVG.
This image viewer widget is super simple to use and play, Flutter zoom photo view widget is extremely customizable through the various options it provide and easy controllers.
Let’s begin implementing this flutter widget in our project
Step 1: Create new Flutter project
Create a new Flutter Project in android-studio or any other Framework or open your existing flutter project
File > New > New Flutter project
Once your project is ready remove all the default dart code from main.dart file
and just copy paste the below code in main.dart
main.dart
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, //primary theme color
),
home: MyHomePage(), //call to homepage class
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Photo View + Zoomable widget"),
),
// your body code here
);
}
}
Step 2: Add Dependencies
Then, you need to add dependencies in your project
open pubspec.yaml file and under dependencies line add below
dependencies:
photo_view: ^0.9.1
Step 3: import the photo view widget package
Once you have added photo_view dependencies in your project now you can use those packages into your project by just importing photo_view.dart library
import 'package:photo_view/photo_view.dart';
on the top of main.dart file add this import statement.
This allows you to make user of flutter zoomable image photoViewer library in main.dart file
Step 4: Create a folder(assets) and add path to asset folder in pubspec.yaml file
You need to create a assets folder and assign the path to be able to access images under assets folder.
Right click ( project ) > New > Directory
Name it as assets and then add some images under that folder.
creating image directory in flutter app
After you add images in assets folder open pubspec.yaml file to assign access path to assets folder for your project, So that your project can easily use that folder.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- assets/
# add the above assets exactly below users-material-----
Then, now the project is ready to make use of Flutter PhotoView zoomable image widget
Zoom image flutter basic code base
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, //primary theme color
),
home: MyHomePage(), //call to homepage class
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Photo View + Zoomable widget"),
),
// add this body tag with container and photoview widget
body: Container(
child: PhotoView(
imageProvider: AssetImage("assets/nightwolf.jpeg"),
)),
);
}
}
The above code will result you with:
Photo View Gallery
If you want to show more that 1 image in a form of slidable image gallery then you need to user PhotoViewGallery.dart package
In the Flutter Tutorial we learned how can we display an image or photo with customizable, rotatable image, and zoomable image in flutter using the PHOTO VIEW LIBRARY.
The Flutter PhotoView Gallery is one of the best way to show a zoomable image in flutter application.
Hi Guys, Welcome to Proto Coders Point In this Flutter Tutorial we will implement Flutter Slidable action on ListView with ListTile widget.
Flutter Slidable Widget
A Flutter Slidable Widget can be applied on Flutter ListView with ListTile widget that can help developer to give left or right directional slide actions with we create a beautiful User Interface and User Experience where user this Slidable widget to dismiss any listTile he don’t want to user.
Eg: you might have used gmail mobile app which makes user of Slidable listTile where you can easily slide left or right on the email you recieved where you can take different actions like delete the mail, or mark it as important and many more actions
let’s begin implementing Flutter Slidable in our project
Adding this package in our project
To add this slidable package into our project you need to
Add this to your package’s pubspec.yaml file:
dependencies:
flutter_slidable: ^0.5.4 // version might vary
Note : the verison might vary by time so just go to official site to get latest version of this library.
once you add the dependencies in pubspec.yaml file just click on Packages get, and then required package is been added into our flutter project.
Importing package
As you added the dependencies all the required packages will be added to your project.
All you need to do is just import the package dart file where every it’s requited.
Hi Guys, welcome to Proto Coders Point. This article will be learning all about the Future of Mobile Application Development in 2020.
What is Mobile Application Development ?
Basically a Mobile Application Development is a process of designing a Beautiful UI Mobile app for mobile Devices, In the Process of developing a mobile application a developer will pre-install on his mobile as a part of testing process to test all the modules. During this process any mobile app developer must consider a different screen size , hardware specofication and he should also need to the app in different version of mobile OS.
Mobile Application Development has been steadily growing in couple of years and this mobile application industry is generating lot of revenues and also creating best software development job for graduate.
Benefits of Mobile App Development?
In modern days mobile technology has been boosted, now a days mobile application is blended with all the business operation and also build opportunity to boost sales in market.
Mobile Technology is been used to send notification to their customer about the new products that is be launched, we can also use online coupons for discounts offers.
Now a days SmartPhones are been used all most every where in this earth and mobile usage is been increasing day by day.
Platform for mobile Applocation Development in 2020
Front-end development tools
Back-end servers
Security add-on layers
System Software
Mobile app testing
Front-end development tools
In Front End Developement all the focus will be on creating a best user interface and also user experience (UI-UX Designing), that makes users of the application attracted to the app.
Back-end Servers
The Back-End is a place where all the server side code get executed, that receives a request from a client(user) for some data, then the server sends back the requested data to the client(user), In back-end it also include the database where all the data will be stored.
Security add-on layers
In every field their must be a security layers where users data will be hidden from out-side world, this Create safety for the application user.
App wrapping for security
Data encryption
Client actions
Reporting and statistics
Mobile Testing
In mobile testing the developed app is been tested in different version of OS, and even the app is been tested using VPN to change the current location and check if data is been transmited properly to our targated location.
Google Android Emulator – The Developer makes use of Google Emulator which is basically runs on android OS.
Testing mobile Device – The app developer can also test the application in his own testing mobile device.
Most Commonly used Tools in mobile Application Development
Here are some commonly used tools in market today in 2020
Android – Studio :
Before, In android application development we where making use of java as programming language but now Google came with it’s own android development language called Kotlin.
In android Development we make use of IDE (Integrated Development Envirnoment) tools called Android-Studio.
Android uses Dalvik ( discontinued process virtual Machine ) to execute application written for android OS. Therefore android application can only run on android devices.
The best thing for developer is that android-studio is completly free to use and develop best android application.
The Unity editor is supported on all the OS such as windows and maxOS.
This Unity Engine is more powerful for building games for more then 25 different platforms including mobile, desktop, consoles, and virtual reality.
Programming language used in unity game development areC#, JavaScript, Boo, other .NET-based languages
This tools free for beginners for low level Game application development but to development high end games you need to buy commercial development licenses.
Flutter Application Development
The Flutter is a cross platform development framework introduced by Google, Flutter Application is done using Dart programming language – dart language is very simple language for any developer who knows basic of java development.
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
To develop an app using Flutter you need make use of an IDE ( either android-studio, xCode , IntelliJ IDEA )
Hi Guys Welcome to Proto Coders Point, In this Flutter Tutorial we gonna Talk about Flutter Navigation Drawer which is basically a Flutter Slide Menu.
In Flutter Application Development Navigation Drawer are basically used with the Scaffold.drawer Property, where Scaffold must have an appBar to show Drawer opening icon, The Drawer child usually is a ListView which first child is a DrawerHeader that are normally used to show current logIn user data.
The Remaining Drawer children are often been filled using ListTiles.
let’s Start implementing Flutter Navigation drawer Slide menu into our project
Flutter Navigation Drawer with Example
Step 1 : Create a new Flutter Project
offCourse you need to create a new Flutter project or open you existing Flutter project all left to your choice
File > New > New Flutter Project
Fill all the required details to create a new project.
Step 2 : Create 3 new Dart files in your flutter project
To create new dart file under your project,
Your_project > lib > (right click) New > Dart File
Then in lib directory you need to create 3 Dart Files and name it as ProfilePage.dart , Setting Page.dart , DrawerCode.dart.
Step 3 : Add a Scaffold Widget with appBar widget and drawer widget in main.dart
The above Snippet code is for explaination about Flutter Drawer
In Flutter Drawer their must be a child widget i.e ListView.
Then this listView that can have any numbers of children : <Widget>, Here in above snippet code i gave Flutter DrawerHeader widget that will aquire some space in the top of Drawer with some decoration to it, the DrawerHeader in turn has a child which are be any widget here have just for simple added a Text Widget.
Then the Second widget will be a ListTiles here is the Snippet code for that.
ListTile widget has a leading property with Icon as an Widget you can set a icon to the flutter Drawer, title property as a Text , and an onTap method property that will handle all the task when user clicks on the ListTile.
The Complete Code is below just create a DrawerCode.dart file and copy paste the below lines of Flutter Drawer Code.
Hi Guys, Welcome to Proto Coders Point, In this Android tutorial we will implement Firebase UI RecyclerView Adopter
This Project will basically fetch / retrive data from firebase using Firebase UI recyclerview adapter library and display it’s contents in recyclerview as a GridView.
Demo on How this Project will look at End of this tutorial
Firebase Ui RecyclerView Adapter Android Tutorial with Example
FirebaseUI makes it simple to bind data from the Firebase Realtime Database to your app’s UI.
Step 1 : Create a new Android Project
OfCouse, your need to create a new android project using android-studio, or else you can make use of your existing android project.
Step 2 : Adding your project to Firebase Console
Check out below video on how to connect android app to firebase console from android studio.
Note: this video is related to Cloud Messaging FCM to send push Notification but the process is same so watch 0 to 2 min minutes of the video to add project to firebase console
after downloading just import the file in realtime database
Just open realtime database and click on 3 vertical line a popup dropdown list will open click on import JSON > select the file you have downloaded and next..
Hence my Firebase Database structure will get imported into you firebase project.
Then, Now all is been set on the server – side
Just go back to our android Studio.
step 5 : Create a new XML file and Name it as customlayout
customelayout.xml
This xml file 2 views that are ImageView and a text View.
Step 6 : Open activity_main.xml and Copy below Code
activity_main.xml
This XML file have only one View that is RecyclerView where we gonna show our data that is retrieve from firebase database using Firebase UI RecyclerViewAdapter.
Step 7 : Create a Constructor class that holders all the data from firebase.
you need a class that handles data retrieved from firebase.
create a new java file and name it as product_getter_setter.java this file has a constructor and getter and setter methods that helps in getting and setiing the data.
product_getter_setter.java
package com.ui.recycleview.gridview.firebaserecyclerviewadapter;
public class product_getter_setter {
String name,image,link;
public product_getter_setter() {
}
public product_getter_setter(String name, String image, String link) {
this.name = name;
this.image = image;
this.link = link;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public String getLink() {
return link;
}
public void setLink(String link) {
this.link = link;
}
}
Step 8 : Main_Activity.java with has FirebaseRecyclerAdapter method
Main_Activity.java
open Main_Activity.java and copy paste below lines of java code
Step 9 : Adding Internet Permisson for your project
Then, as you know that we are fetching data from external source i,e our Firebase server, We definitely need access to internet permission to be set for our android project
open AndroidManifest.xml file and app internet permission tag before <application> tag