Categories: Flutter

21 best Flutter packages to ease your app development.

In Flutter, the support of shared packages is contributed by developers that allows us to build apps without much hustle. It saves developers from developing from scratch. We may use classes, for example, to request network  (HTTP), custom navigation route handling in Fluro, API integration and using a third-party platform.

In this article, I am going to list down 21 best Flutter packages to ease Flutter development, all of them are listed on Pub site

1.Path_provider

This is a Flutter plug-in package used to locate files on the file system in iOS and Android development environment.

Example

Directory tempDir = await getTemporaryDirectory();
String tempPath = tempDir.path;

Directory appDocDir = await getApplicationDocumentsDirectory();
String appDocPath = appDocDir.path;

For more details visit Path_provider

2. Url_launcher

This is a flutter plug-in used to launch URLs in mobile platforms. It mainly supports iOS and Android development platforms. To use url_launcher, add as a dependency in pubspec.yaml file.

Example

import 'package:flutter/material.dart';

import 'package:url_launcher/url_launcher.dart';

void main() {

runApp(Scaffold(

body: Center(

child: RaisedButton(

onPressed: _launchURL,

child: Text('Show Flutter homepage'),

),

),

));

}

_launchURL() async {

const url = 'https://flutter.io';

if (await canLaunch(url)) {

await launch(url);

} else {

throw 'Could not launch $url';

}

}

Supported schemes

The launch method takes string arguments containing url. This url can be preformatted in different schemes. We determine the supported schemes based on the underlying platform and installed apps.

  • http: <URL>, https:<URL> => Opens URL in the default browser
  • mailto:<email address>? Subject= <subject> & body = <body > => creates an email to.
  • Tel: <phone number> => makes a call
  • Sms: <phone number> => sends an SMS to.

In addition to schemes, I recommend checking the URL schemes supported using the canLaunch method prior to calling the launch method.

By default, Android opens up browsers when handling URLs. You can pass forceWebView: true parameter to open a web view instead. Whereas iOS opens up all URLs within the app, everything else is redirected to the app.

For more info visit URL_Launcher

3. Image_picker

Image_picker is a flutter plug-in used for selecting images in iOS and Android libraries, users can also take new images.

Example

import 'package:image_picker/image_picker.dart';

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
File _image;

Future getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.camera);

setState(() {
_image = image;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Picker Example'),
),
body: Center(
child: _image == null
? Text('No image selected.')
: Image.file(_image),
),
floatingActionButton: FloatingActionButton(
onPressed: getImage,
tooltip: 'Pick Image',
child: Icon(Icons.add_a_photo),
),
);
}
}

I recommend you go to Image_Picker  for in-depth details.

4. sqflite

It is an important SQLite plug-in for flutter which supports iOS and Android development platforms.
Features
• supports transaction and batch processing
• automatic version management during the start
• has helpers for insert, query, update, delete queries
• DB operations in the background thread
Add the dependency in your flutter project as follows;

dependencies:
      …
sqflite: ^1.1.6

Example First, you should import sqflite.dart

import ‘package: sqflite/sqflite.dart;
// Get a location using getDatabasesPath
var databasesPath = await getDatabasesPath();
String path = join(databasesPath, 'demo.db');

// Deleting the database
await deleteDatabase(path);

// open the database
Database database = await openDatabase(path, version: 1,
onCreate: (Database db, int version) async {
// When creating the db, create the table as well
await db.execute(
'CREATE TABLE Test (id INTEGER PRIMARY KEY, name TEXT, value INTEGER, num REAL)');
});

Visit sqflite for more info.

5. cached_network_image

It is a flutter library used to show images from the internet kept in the cache directory. It stores and retrieves files in the flutter_cache_manager.
Example

CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
),
Image(image: new CachedNetworkImageProvider(url))

 

6. Google_maps_flutter

It is another flutter plug-in for integrating  Google maps on iOS and Android apps. For Android, specify the API key in the application manifest as follows;

android/app/src/main/AndroidManifest.xml:

While for iOS, specify API key in the delegate as follows;

ios/Runner/AppDelegate.m:

ios/Runner/AppDelegate.m:
#include "AppDelegate.h"
#include "GeneratedPlug-inRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

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

 

7. Scope model

These are set of utilities used to pass a data model from a parent widget to its descendants. It rebuilds its own children when the model is updated. There are three main classes provided in the library, namely;
• model class:
This can be extended to create searchModel or userModel. It can also listen to models for changes!
ScopedModel widget:
Wraps your model in a scopeModel widget to make it available to all of its descendant widgets.

scopeModelDescendant widget:
we use this widget to find the appropriate scopeModel in the widget tree because it rebuilds automatically whenever there is change.

Example

/**
Create a class that holds some view state
Counter starts at 0 and can be incremented.
Note: It must extend from the Model.
*/
class CounterModel extends Model {
int _counter = 0;

int get counter =&gt; _counter;

void increment() {
// First, increment the counter
_counter++;

// Then notify all the listeners.
notifyListeners();
}
}

/**
Create our App, which will provide the `CounterModel` to
all children that require it!
*/class CounterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
/**
First, create a `ScopedModel` widget. This will provide the `model` to the children that request it.
*/return new ScopedModel&lt;CounterModel&gt;(
model: new CounterModel(),
child: new Column(children: [
/**
Create a ScopedModelDescendant. This widget will get the
CounterModel from the nearest ScopedModel&lt;CounterModel&gt;.
It will hand that model to our builder method, and rebuild any time the CounterModel changes (i.e. after we `notifyListeners` in the Model).
*/new ScopedModelDescendant&lt;CounterModel&gt;(
builder: (context, child, model) =&gt; new Text('${model.counter}'),
),
new Text("Another widget that doesn't depend on the CounterModel")
])
);
}
}
 

8. Provider

It is a dependency injection system built with widgets for widgets. In version 3.0.0, providers can no longer be instantiated with const, uses listenableProvider and streamProvider instead of listenable and stream.
Uses of provider
i) Expose a value:
Wrap any widget into one of the provider widgets from the package and pass it to variables so that all the new providers can access the variable

Provider&lt;String&gt;.value(
value: 'Hello World!',
child: MaterialApp(
home: Home(),
)
)

ii)Read a value:
Reads a value by use of static method provider.of(BuildContext context). Combined with the example above; exposing a value, the widget will read the exposed string and render ‘Hello World!’. You can alternatively use consumer widget for performance optimization or when it is difficult to obtain a BuildContext descendant of the provider.

Provider&lt;String&gt;.value(
value: 'Hello World',
child: Consumer&lt;String&gt;(
builder: (context, value, child) =&gt; Text(value),
),
);

Multiprovider:
A provider can provide pretty nested values in big applications e.g

Provider&lt;Foo&gt;.value(
value: foo,
child: Provider&lt;Bar&gt;.value(
value: bar,
child: Provider&lt;Baz&gt;.value(
value: baz,
child: someWidget,
)
)
)

9. firebase_storage

This is a flutter plug-in used in firebase cloud storage API, powerful, simple and cost-effective object storage service for Android and iOS. To use this plug-in, add firebase_ storgage as a dependency in your pubspec.yaml file. Note that this plug-in is still under development and some APIs might be unavailable yet.

check out firebase_storage for more

10. Flutter_webview_plug-in

This is a flutter plug-in that allows flutter to communicate with native webview. Below is an example to launch a webview full screen with flutter navigation. hidden and initialChild are available to show something else as the page is loading.

new MaterialApp(
routes: {
"/": (_) =&gt; new WebviewScaffold(
url: "https://www.google.com",
appBar: new AppBar(
title: new Text("Widget webview"),
),
),
},
);

11. Package_info

This is a flutter plug-in that provides an API used for querying an application package info, both on Android and iOS. Example

Import 'package: package_info/package_info.dart';

PackageInfo packageInfo = await PackageInfo.fromPlatform();

String appName = packageInfo.appName;
String packageName = packageInfo.packageName;
String version = packageInfo.version;
String buildNumber = packageInfo.buildNumber;

12. device_info

It is a flutter package that provides detailed information about the device like make, model and the version of Android or iOS. It gives the current information about the device at hand.
To get started with this package, first import package: device_info/device_info.dart. From there, utilize Android and iOS getters to get platform-specific device info.

Example

Import 'package:device_info/device_info.dart';

DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
print('Running on ${androidInfo.model}');

IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
print('Running on ${iosInfo.utsname.machine}');

13.bloCbuilder

A flutter widget that simplifies the implementation of the Business Logic Component design pattern, It is a flutter widget that require bloc and builder function. BlocBuilder is responsible for building widgets according to responses in new states. BlockBuilder resembles streamBuilder but less amount of code is needed because of its simple API.

Example

BlocBuilder(
  bloc: BlocA(),  
   builder: (context, state) {    
   // returns widget based on BlocA's state  
    }
)

14. webview_flutter

a flutter plug-in that provides a webview widget on iOS and Android. WKWwebview backs webview widget on iOS while webView backs the webview widget on Android. To use webview flutter widget, add webview_flutter as a dependency in your pubspec.yaml file. Keep in mind the fact that it is possible now to include webView widget in your widget tree.

15.Location

It is a flutter plugin that handles real-time locations on iOS Android. It also provides settings for performance and battery optimization.

 Sample code

import 'package:location/location.dart';
var currentLocation = LocationData;

var location = new Location();

// if platform messages fail to use a try/catch PlatformException.
try {
currentLocation = await location.getLocation();
} on PlatformException catch (e) {
if (e.code == 'PERMISSION_DENIED') {
error = 'Permission denied';
}
currentLocation = null;
}

For continuous callbacks when the location is changing, use the following code;

var location = new Location();

location.onLocationChanged().listen((LocationData currentLocation) {
print(currentLocation.latitude);
print(currentLocation.longitude);
});

16.Flutter Spinkit

It is a collection of loading indicators that are animated with flutter to give the user a nice look as the loading process continues.You need to start by installing dependencies;

dependencies:

flutter_spinkit: “^3.0.1”

Then import the flutter package;

Import ‘package: flutter_spinkit/flutter_spinkit.dart’;

Sample code

SpinKitRotatingCircle(
color: Colors.white,
size: 50.0,
);

From version 3.0.0, the following is possible;

SpinKitFadingCircle(
itemBuilder: (_, int index) {
return DecoratedBox(
decoration: BoxDecoration(
color: index.isEven ? Colors.red : Colors.green,
),
);
},
);

Result is:

17. AudioPlayers

A flutter plug-in used to play multiple audio files simultaneously in Android and iOS. Start by installing dependencies as follows;

dependencies:

audioplayers: ^0.13.0

An audioPlayer instance can play a sing audio file at a time by calling the constructor to create.

AudioPlayer audioPlayer = AudioPlayer ();

For low latency API, better for gaming sounds, use the following code;

AudioPlayer audioPlayer = AudioPlayer (mode: playermode.LOW_LATENCY);

18. Image_cropper

It is a flutter plug-in for iOS and Android that supports cropping pictures.

For Android, add UCropActivity into your AndroidManifest.xml.

Example

&lt;activity
android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/&gt;

No configuration for iOS platform.

Example

Future&lt;Null&gt; _cropImage(File imageFile) async {
File croppedFile = await ImageCropper.cropImage(
sourcePath: imageFile.path,
ratioX: 1.0,
ratioY: 1.0,
maxWidth: 512,
maxHeight: 512,
);
}

19. Connectivity

Connectivity is a flutter plug-in that allows flutter apps discover network connectivity and configure accordingly. This plug-in has the ability to distinguish between cellular and WiFi connections.

Sample

import 'package:connectivity/connectivity.dart';

var connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.mobile) {
//print I am connected to a mobile network.
} else if (connectivityResult == ConnectivityResult.wifi) {
//print I am connected to a wifi network.
}

20. Shimmer

It is a flutter package that provides an easy way to adding shimmer effects in the flutter project.

Example

SizedBox(
width: 200.0,
height: 100.0,
child: Shimmer.fromColors(
baseColor: Colors.red,
highlightColor: Colors.yellow,
child: Text(
'Shimmer',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
fontWeight:
FontWeight.bold,
),
),
),
);

21. Share Plug-in

Last but not least on my list is share plug-in, which is a flutter plug-in for sharing content from flutter apps via share dialogue. It wraps the ACTION_SEND intent on Android and UIActivityViewController on iOS. Add share as a dependency in your pubspec.yaml file for you to comfortably use this plug-in.

Example

First import the library via;

import 'package:share/share.dart';

Then invoke the static share method anywhere in your Dart code like this;

Share.share(check out my website https://example.com');

Conclusion


Flutter packages allow us to build apps quickly and save precious time to build a product. Flutter allows developers to publish and contribute towards flutters package development. The long list of flutter packages has been ranked using package health, overall score, and ease of maintenance. I made my list based on popularity and ease of maintenance, based on my opinion.

Deven Rathore @http://twitter.com/devenrathore2

Entrepreneur, blogger and, Programmer, Constantly learning and experiencing new things.

Share
Published by

Recent Posts

15 best Vue.js OpenSource projects

Today, I am going to highlight some of the best Vue.js opensource projects. Vue.js is a JavaScript framework mainly focussed on…

3 hours ago

7 best Xcode themes

Imagine if you could make Swift development in Xcode more elegant, and see an instant boost in your workflow. or even…

1 day ago

12 Best Node.js ORMs

In this article, our primary focus will be reviewing best Node.js ORMs (Object Rational Mapping) Additionally, this article will clearly…

46 mins ago

15 Best Angular UI frameworks

Angular is a full-fledged framework with its own tooling and best practice implementation designed on top. It encourages the use…

2 days ago

7 best Electron IDE and Editors

Electron is a runtime that allows you to create desktop applications with HTML5, CSS, and JavaScript. Electron development is essentially…

3 days ago

5 Best JavaScript libraries alternatives to React and Vue

In this article, we will highlight 5 best Newly Emerging JavaScript Libraries, alternatives to React and Vue. JavaScript is the most…

4 days ago