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.6Example
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 => _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<CounterModel>(
model: new CounterModel(),
child: new Column(children: [
/**
Create a ScopedModelDescendant. This widget will get the
CounterModel from the nearest ScopedModel<CounterModel>.
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<CounterModel>(
builder: (context, child, model) => 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<String>.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<String>.value(
value: 'Hello World',
child: Consumer<String>(
builder: (context, value, child) => Text(value),
),
);
Multiprovider:
A provider can provide pretty nested values in big applications e.g
Provider<Foo>.value(
value: foo,
child: Provider<Bar>.value(
value: bar,
child: Provider<Baz>.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: {
"/": (_) => 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 requires 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.
Example
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.0An 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
<activity
android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
No configuration for the iOS platform.
Example
Future<Null> _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 to discover network connectivity and configure accordingly. This plug-in has the ability to distinguish between cellular and WiFi connections.
Example
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.
