Flutter Open Source Plugins in 2019 [Top 5]

Leave a Comment / Flutter / By

Flutter Open Source Plugins in 2019

This article covers the 5 important flutter open-source plugins that are available. The list comprises of all the different sections with the Flutter framework. These plugins are simple dependencies that have to be included in your pubspec.yaml file before using. This list contains UI related plugin and Function related plugins as well.

All these plugins are required to make modifications to the pubspec.yaml file present inside the lib folder inside the project.

Flutter video-player Plugin

This plugin lets you embed a local video in your Flutter app. Easily integrates and lets you play the video. Note: Up to Flutter 1.9, there is no video player class present in Flutter. Have to dependent on external plugins like the video_player.

Before using the VideoPlayer class in Flutter. We will have to take some pre-requisites for IOS and Android Application.

For Android

Make sure, that the minimum SDK is set to 21. You can modify this through the Build Gradle inside the android>app folder.

Once done, make sure that the AndroidManifest.xml file has the Internet permission added. (i.e) add the following line in the Androidmanifest.xml file.

<uses-permission android:name="android.permission.INTERNET"/>
For IOS

Make sure the following lines are added to the info.plist file. This will help in giving permission to use the Internet to render the videos if required. Add the below lines to <project root>/ios/Runner/Info.plist

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Adding the dependency

Once the above pre-requisites are done. Time to add the dependency to the pubspec.yaml file. Add the following lines to the dependency section and use get packages to sync the project.

dependencies: video_player: ^0.10.1+3

Video_Player plugin – Basics

Video_Player plugin provides the support to play both the network as well as local videos on the device. It creates a simple API for the videos to be called. In this application, we will look at how the Video_Player plugin uses the Controller object and how to create the Future<> Builder to play the video on loading.

As always, we will start off by using the Scaffold Widget as the parent body widget. The idea is to play the video but also provide Button controls to play and pause the video.

In order to call the video player object from any place, we need a controller to hold that. It is possible by using the VideoPlayerController class. We will look at how all of that is pieced together in the below section.

Do not forget to read the last section for a clearer explanation of what the code does. Since we do not have a lot of things going on, I have directly put the code for use below.

Flutter Video Player App

 

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() => runApp(VideoPlayerApp());

class VideoPlayerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Demo',
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);

  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
    );

    // Initielize the controller and store the Future for later use.
    _initializeVideoPlayerFuture = _controller.initialize();

    // Use the controller to loop the video.
    _controller.setLooping(true);
    super.initState();
  }

  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      backgroundColor: Colors.orangeAccent,
      appBar: AppBar(
        title: Text('Bee Video'),
        backgroundColor: Colors.black87,
      ),
      // Use a FutureBuilder to display a loading spinner while waiting for the
      // VideoPlayerController to finish initializing.
      body: Stack(
        children: <Widget>[
          Center(child:FutureBuilder(
            future: _initializeVideoPlayerFuture,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                // If the VideoPlayerController has finished initialization, use
                // the data it provides to limit the aspect ratio of the video.
                return AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  // Use the VideoPlayer widget to display the video.
                  child: VideoPlayer(_controller),
                );
              } else {
                // If the VideoPlayerController is still initializing, show a
                // loading spinner.
                return Center(child: CircularProgressIndicator());
              }
            },
          )),
          Center(
              child:
              ButtonTheme(
                  height: 100.0,
                  minWidth: 200.0,
                  child: RaisedButton(
                    padding: EdgeInsets.all(60.0),
                    color: Colors.transparent,
                    textColor: Colors.white,
                    onPressed: () {
                      // Wrap the play or pause in a call to `setState`. This ensures the
                      // correct icon is shown.
                      setState(() {
                        // If the video is playing, pause it.
                        if (_controller.value.isPlaying) {
                          _controller.pause();
                        } else {
                          // If the video is paused, play it.
                          _controller.play();
                        }
                      });
                    },
                    child: Icon(
                      _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
                      size: 120.0,
                    ),
                  ))
          )
        ],
      ),
    );
  }
}

This creates the application which looks like,

Flutter Video Plugin
Flutter Video Plugin
Flutter Video Plugin
Flutter Video Plugin

Flutter UI – Shimmer Effect Plugin

The next plugin in the list is the Flutter UI effect plugin – Shimmer Effect or the Lazy Loading effect. The shimmer effect is fairly straight forward. Make use of only one class in your Widget tree and the work is done. If you do not know how the shimmer effect actually works, check the below GIF to understand.

"<yoastmark

To perform the same effect as above, we will jump into the Widget definition. Make use of the class,

Shimmer in your Widget tree! There is one option to do this like given below,

Shimmer.fromColors

Once this is done, we will have to fill out the properties to finalize the application.

Shimmer.fromColors – Properties

The Shimmer.fromColors consist of the following properties.

  • baseColor – Base Color of the Shimmer that gets shown on the Widget. This color is primary as the child widget will be of this color only.
  • highlightColor – Highlight Color is the color that produces the shimmer like effect. This color keeps waving across the child widget and it creates the Shimmer like effect. To find more about this check out the example program in the next section.
  • child – The Child holds whatever widget has to produce the ShimmerEffect. Could be a Text Widget or any complex structure and the ShimmerEffect is produced without any problem! Check out the next section to see more about this attribute and how to use it across complex Widgets

Shimmer UI Effect App

The code below produces the ShimmerEffect for two important widgets, the Text Widget and the Column of ListView Widget. To know how the app looks do not forget to check the next section for the app output.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

void main() => runApp(ShimmerEffectApp());

class ShimmerEffectApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample ShimmerEffect Widget',
home: ShimmerWidget(),
);
}
}

class ShimmerWidget extends StatefulWidget {
ShimmerWidget({Key key}) : super(key: key);

@override
_ShimmerWidgetState createState() => _ShimmerWidgetState();
}

class _ShimmerWidgetState extends State {

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Shimmer effect"),),
body: Container(
padding: EdgeInsets.all(25.0),
child:Center(
child: Shimmer.fromColors(
direction: ShimmerDirection.rtl,
period: Duration(seconds:5),
child: Column(
children: [0, 1, 2, 3]
.map((_) => Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 48.0,
height: 48.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 8.0),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 8.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 2.0),
),
Container(
width: double.infinity,
height: 8.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 2.0),
),
Container(
width: 40.0,
height: 8.0,
color: Colors.white,
),
],
),
)
],
),
))
.toList(),
),
baseColor: Colors.grey[700],
highlightColor: Colors.grey[100]),
)
),
);
}
}

 

shimmer_effect
shimmer_effect
Lazy Loading Effect
Lazy Loading Effect

Flutter UI – Badges Plugin

The next plugin is a very useful Badge like UI effect plugin, particularly used to mark a notification count, or ecommerce items count in the basket etc. All these can be created with a simple plugin and the use of the Flutter Badges Plugin.

To use the Flutter Badges plugin, make sure to add the following dependency in your pubspec.yaml file.

dependencies:
    badges: ^1.1.0

Once done, import the following line into your main.dart file.

import ‘package:badges/badges.dart’;

Alright, we are good to go. As given below, the Badges can be created with a Simple call to the Badge class.

Badge Class Properties

The following are the available properties of the Badge class.

  • badgeContent – The important attribute that takes in the actual value of the Badge. Could be a number, alphabet etc. Make sure to give it as small as possible!
  • badgeColor – Can control the Color of the badge by simply adjusting the BadgeColor Colors property.
  • animationType – The important attribute that lets 3 animations for the Badge.
      • BadgeAnimationType.scale – Scaling animation once the loading happens.
      • BadgeAnimationType.fade – Fade animation once the loading happens
      • BadgeAnimationType.slide – Slide animation once the loading happens
  • shape – Can control the Shape of the Badge. Could be a Circle or Square
  • animationDuration – Duration to which the Animation should happen. Takes in a Duration class as its value.

Once all of these attributes are controlled, you can create a simple app like given in the next section.

Flutter Badge – Example Application

Add the following into your main.dart file and run the application. It generates the app that looks like below.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:badges/badges.dart';

void main() => runApp(BadgesApp());

class BadgesApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'APP',
home: BadgesWidget(),
);
}
}

class BadgesWidget extends StatefulWidget {
BadgesWidget({Key key}) : super(key: key);

@override
_BadgesWidgetState createState() => _BadgesWidgetState();
}

class _BadgesWidgetState extends State {

int value = 0;

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text("Sample Badges")),
body: Center(
child: Container(
padding: EdgeInsets.all(25.0),
child: Column(
children: [
Spacer(),
Badge(
child: RaisedButton(
color: Colors.blueGrey,
child: Text("Notifications", style: TextStyle(color: Colors.white),),
onPressed: (){
setState(() {
value = value + 1;
});
},),
badgeContent: Text('$value',style: TextStyle(color: Colors.white),),
badgeColor: Colors.red,
animationType: BadgeAnimationType.scale,
animationDuration: Duration(milliseconds: 500),
shape: BadgeShape.circle,
),
Spacer(),
Badge(
child: RaisedButton(
color: Colors.blueGrey,
child: Text("Messages", style: TextStyle(color: Colors.white),),
onPressed: (){

},),
badgeContent: Text("2",style: TextStyle(color: Colors.white),),
badgeColor: Colors.red,
animationType: BadgeAnimationType.scale,
animationDuration: Duration(seconds: 1),
shape: BadgeShape.circle,
),
Spacer(),
Badge(
child: RaisedButton(
color: Colors.blueGrey,
child: Text("Notifications", style: TextStyle(color: Colors.white),),
onPressed: (){
},),
badgeContent: Text("2",style: TextStyle(color: Colors.white),),
badgeColor: Colors.red,
animationType: BadgeAnimationType.scale,
animationDuration: Duration(seconds: 1),
shape: BadgeShape.circle,
),
Spacer(flex: 4,)
],
),
),
)
);
}
}
Flutter Badges app
Flutter Badges app

Flutter Google Maps Plugin

Google Maps in Flutter is a very easy process to do with the help of the google_maps_flutter plugin.

Note: Google Maps Flutter is still in developer preview(It cannot be released to the app store yet). Make sure to wait for the stable release before releasing it.

The main pre-requisite is to have a google cloud platform account. If you do not have one, create it here – Google Cloud Platform. It is also mandatory to create the Google Maps API key. If you do not know how to obtain the key, please read Google Maps Integration in Flutter article and proceed.

Once the Google Maps SDK is enabled with a Credential/API key, time to use it in our Flutter App. As a pre-requisite, fill out the following places with the key.

For Android

Go to the android>app>src>main>Androidmanifest.xml and make sure that the Manifest looks like below,

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

Where the YOUR KEY HERE is replaced with the API key we generated in Step 1

For IOS

Similarly for IOS as well, make sure to edit the Appdelegate.m file like below.

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Where, YOUR KEY HERE is replaced with the API key we generated in Step 1

All GoogleMaps Widget

With Step 1 & 2 completed, time to look at how to bring the Maps inside the Flutter Application. To begin with, add the dependency in the pubspec.yaml file like given below.

dependencies: 
 google_maps_flutter: ^0.5.21

Do packages get and add import the following package to the main.dart file.

import ‘package:google_maps_flutter/google_maps_flutter.dart’;
Once these two are done, time to look at the Widgets that this package provides.

GoogleMap

GoogleMap Widget provides the main control over providing Google Maps inside the Flutter Application. There are several important attributes that are part of this Widget which will help in creating the Maps we require. They are

  • mapType – This attribute defines what type of Map is to be shown. There are options to show either satellite, hybrid, normal. Choose either of these by giving the value as MapType.hybrid etc.
  • initialCameraPosition – The initial camera position is important to render the Map on the Flutter UI. This will move the camera position from this point only. To give the initial Camera position, create a variable with the CameraPosition class as its value. To know more about the CameraPosition see the next sub-section.
  • onMapCreated – This is a callback that gets fired whenever the camera position is changed. Since the user can move the Map by either pinching or swiping the map, this will get fired every single time. In case there is a use case to move the camera angle programmatically, you will have to make use of the GoogleMapController which we will see in the next sub-section.
GoogleMapController

This class provides control of the GoogleMap itself by creating an instance of it. Since there is no explicit way of changing the camera position of the google map, we will be using this GoogleMapController to control all sorts of activities on the GoogleMap class. To know more about how we can use the Google Map Controller see the Next section for the example application.

CameraPosition

CameraPosition class provides the required camera position values that will be required to show any position on the GoogleMap.

CameraPosition initPosition = CameraPosition( 
target: LatLng(14.5, 25.7), zoom: 7, );

The CameraPosition class takes in various attributes like target, zoom, etc. The Target attribute marks the Latitude & Longitude position on the Google Map. This class takes in a double value like LatLng(double, double) to mark it at that position.

To know more about how we make use of this CameraPosition, check the next section for the example application.

Creating GoogleMaps App

With the 3 steps completed, find the final app example below. This example creates an animated camera transition on Google Maps when it is created. This is a very useful way to provide Google Maps in Flutter Application.

Do not forget to check out the final section for the example output of this App.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(GoogleMapApp());

class GoogleMapApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample GoogleMap Widget',
home: GoogleMapWidget(),
);
}
}

class GoogleMapWidget extends StatefulWidget {
GoogleMapWidget({Key key}) : super(key: key);

@override
_GoogleMapWidgetState createState() => _GoogleMapWidgetState();
}

class _GoogleMapWidgetState extends State {

Completer _controller = Completer();

@override
void initState() {
super.initState();
}

CameraPosition initPosition = CameraPosition(
target: LatLng(14.5, 25.7),
zoom: 7,
);

void updateGoogleMap()
async{
GoogleMapController cont = await _controller.future;
setState(() {
CameraPosition newtPosition = CameraPosition(
target: LatLng(14.5, 28.7),
zoom: 4,
);
cont.animateCamera(CameraUpdate.newCameraPosition(newtPosition));
});

}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black45,
title: Text("Update Google Map"),
),
body: Center(
child: Column(
children: [
Container(
height: 400.0,
child: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: initPosition,
onMapCreated: (GoogleMapController controller){
_controller.complete(controller);
},
),
),
FlatButton(
child: Text("Update Map", style: TextStyle(color: Colors.white),),
color: Colors.deepOrange,
onPressed: (){
updateGoogleMap();
},
)
],
),
));
}
}

 

Google Maps – Conclusion

For the example App code above, the Flutter App looks like,

Google Maps in Flutter
Google Maps in Flutter
Google Maps in Flutter
Google Maps in Flutter

ImagePicker – Image Gallery Plugin

To begin with creating this ImagePicker plugin, which lets you have an Image Gallery integrated easily in Flutter. 

To use the image_picker plugin, add the following dependency in the pubspec.yaml file and proceed.

dependencies:
  image_picker: ^0.6.1+4

This will also require you to add an import statement in the main.dart(or whichever is the main file).

import 'package:image_picker/image_picker.dart';

Once these two are added, in case the application has to be used for IOS, make sure to add the following changes in info.plist file.

  • NSPhotoLibraryUsageDescription – describe why your app needs permission for the photo library. This is called Privacy – Photo Library Usage Description in the visual editor.
  • NSCameraUsageDescription – describe why your app needs access to the camera. This is called Privacy – Camera Usage Description in the visual editor.
  • NSMicrophoneUsageDescription – describe why your app needs access to the microphone if you intend to record videos. This is called Privacy – Microphone Usage Description in the visual editor.

Image Picker Widget – Basics

To make use of this ImagePicker widget, just call the class ImagePicker. There are two possibilities for this class.

  • Choose an Image or Choose a Video
  • Choose one of the above from a Gallery or a Camera Source directly

The above is possible through the method callbacks.

  • ImagePicker.pickImage() with source as ImageSource.gallery or ImageSource.camera
  • or ImagePicker.pickVideo() with the sources as mentioned above.

Both the calls above mentioned are async calls(Read more about FutureBuilder Widget and Asynchronous operations). Hence, it requires to setState() on the image/video that is selected.

The ImagePicker.<source call> returns a file location of the image/video. It is up to us to load the image using the Image.file() call.

All of this is pieced together in the below example code. To know more about it read it in the next section.

ImagePicker Widget – Example Application

The below example app creates an Image Picker button which lets you choose either an image from the gallery or directly from the Camera.

The next section contains the app images. Also, find the code explained below.

import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(ImagePickerApp());

class ImagePickerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample Imagepicker Widget',
home: ImagePickerWidget(),
);
}
}

class ImagePickerWidget extends StatefulWidget {
ImagePickerWidget({Key key}) : super(key: key);

@override
_ImagePickerWidgetState createState() => _ImagePickerWidgetState();
}

class _ImagePickerWidgetState extends State {

File _image;
@override
void initState() {
super.initState();
}

void open_camera()
async {
var image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = image;
});

}
void open_gallery()
async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sample Imagepicker Widget"),
backgroundColor: Colors.black45,),
body: Center(
child: Container(
child: Column(
children: [
Container(
color: Colors.black12,
height: 300.0,
width: 900.0,
child: _image == null ? Text("Still waiting!") : Image.file(_image),),
FlatButton(
color: Colors.deepOrangeAccent,
child: Text("Open Camera", style: TextStyle(color: Colors.white),),
onPressed: (){
open_camera();
},),
FlatButton(
color: Colors.limeAccent,

child:Text("Open Gallery", style: TextStyle(color: Colors.black),),
onPressed: (){
open_gallery();
},
)
],
),
),
)

);

}
}
Image Picker in Flutter
Image Picker in Flutter
ImagePicker Widget
ImagePicker Widget
ImagePicker Widget
ImagePicker Widget

Flutter Plugins – Conclusion.

All these plugins are really important to help in creating a neater UI experience and ramp up faster with the Flutter App development.

Tweet
Pin
Share
0 Shares

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *