Commonly Used Packages and Plugins in Flutter
- Created at:
- Updated at:
When it comes to a mobile app development, there are few features that may fall common across all the mobile apps. These features include network operations, data persistence, location services, notifications, etc. In Flutter development, these features can be implemented by adding the required packages/plugins in pubspec.yaml file of the flutter project. Below is the curated list of most commonly used flutter package every developer must be aware of.
- Material
In flutter, every component visible on screen is a Widget. However, there are few widgets which are invisible, e.g. Stack, Align, GestureDetector, etc. So almost everything is widget in flutter. These widgets are provided by Material package bundled inside Flutter SDK by default. Cupertino is another package for iOS-Style widgets.
- HTTP
More or less, every mobile app has web API to call by means of HTTP requests. For example, getting a list of restaurants near you, uploading your profile photo, backing up data on a server, etc. Dart community already provide us with the great package - http to deal with network operations. If your app is offline-only and doesn't involve any network operations, it’s okay not to add this package. But remember that not having data backup strategy means risk of losing data.
- Shared_preferences
Shared preferences are used to store and persist a very small amount of data in a key-value format to disk. e.g. Logged in user id, a flag value about whether a user has viewed particular screen, etc. This package is wrapper around Android's shared preferences and iOS's User Defaults. According to the docs, this plugin should be use for storing simple data only, not for storing critical data as there is no guarantee that writes will be persisted to disk after returning.
- Path_provider
Apart from shared preferences and sqflite, we have the third option to persist data locally on our device, i.e. writing to and reading from files. This can be achieved with the help of path provider package in combination of dart:io library. As name suggest, path provider package provides a platform-agnostic way to access commonly used locations on the device’s file system. You can get both temporary path and document directory path for the app. You can refer to downloads_path_provider if you wish to access the path to download folder inside internal storage of your device.
- URL_launcher
This flutter plugin is simply used for launching or opening the URLs. It supports all the platform. Common URL schemes supported are: http, https, mailto, tel, and sms. Below is the sample code for launching the URL with https scheme. The launch() will open up the browser and launch the URL specified.
- Flutter_local_notifications
A plugin for displaying local notifications. For example, trigger alarm to remind user about particular event. This plugin provides us with the set features like displaying a basic notification, scheduling notifications, interval based periodic notifications, custom notification sound, retrieve a list of pending notification requests, cancelling/removing notification, etc.
- Dart_notification_center
If you're from iOS development background, then the term 'Notification Center' may look familiar to you. The notification center subscribed to a channel and an object can observe the channel for incoming messages on that channel. We can keep message optional, but channel name is mandatory. This is extremely useful plugin for implementing observer pattern.
- Intl
intl is the short form for 'Internationalization and Localization'. This is one of the most important library as it provides facilities such as message translation, plurals and genders, date/number formatting and parsing, and bidirectional text. It defines the formatter like DateFormat & NumberFormat.
- Webview_flutter
This plugin provides in-app browser view to a flutter app. Let's say you already have a website and now you decided to go for mobile apps with Flutter. Using WebView, you can display your website's page in your flutter app. For example, contact us page is good one to embed in the mobile app when user clicked Contact Us button. On iOS the WebView widget is backed by a WKWebView, and on Android the WebView widget is backed by a WebView.
- Toast
Toast is a small message displayed on our app's window. Its specifically useful when we want user to be notified of any event while using the app, no matter which screen he/she is viewing. In addition to message text and context (which are mandatory to pass), the plugin also provides some other properties such as duration, gravity, text color, background color, and border.
- Cached_network_image
This Flutter library is operational in saving image information within the cache once it is viewed online using your device. Moreover, it is also designed to be used with error widgets. The image provider also proceeds with the concerned cached network image and collects the data in your browsing device. All such features make the Cached Network Image a renowned Flutter library at the global level.
- Flutter_svg
We often deal with displaying images in mobile app. In flutter, we can easily display an image stored as assets using Image.asset() constructor. Consider there is single image to be display on 5 different places with 5 different colors. Then we will need to maintain 5 different image files (png, jpg, etc.) under assets. Second solution would be to have single image file that can be colourize. The library flutter_svg is for second solution. You just store single svg file under assets and it can be use on multiple places with different colours with the help of SvgPicture.asset() constructor:
final String assetName = 'assets/up_arrow.svg';
final Widget svgIcon = SvgPicture.asset(
assetName,
color: Colors.red,
);
- Universal_html
This package is extremely useful in case you're targeting web platform as well for your flutter app. Importing dart:html directly doesn't support from flutter 1.9, we can use universal_html package instead. The package has extensive support for handling HTML and XML documents. Below is the example of saving file bytes(Uint8List) on browser:
import 'package:universal_html/prefer_universal/html.dart' as html;
final blob = html.Blob([bytes]);
final url = html.Url.createObjectUrlFromBlob(blob);
final anchor = html.document.createElement('a') as html.AnchorElement
..href = url
..style.display = 'none'
..download = '';
html.document.body.children.add(anchor);
anchor.click();
html.document.body.children.remove(anchor);
html.Url.revokeObjectUrl(url);
- Local_auth
When we authenticate users with the username and password, we validate those credentials against the data stored on remote database. But there is a way to authenticate user locally without interacting with server by using biometric data of device's user. This biometric data may contain Touch id, Face ID and Pass/Lock Code. The plugin local_auth provides means to perform local, on-device authentication of the user referring to biometric authentication.
- Provider
Provider is state management approach recommend by Flutter docs and is popular amongst many flutter developers. It is a wrapper around InheritedWidget to make them easier to use and more reusable.
- RxDart
RxDart is an implementation of the popular ReactiveX API for asynchronous programming, leveraging the native Dart Streams API. Dart comes with a very decent Streams API out-of-the-box; rather than attempting to provide an alternative to this API, RxDart adds functionality from the reactive extensions specification on top of it.RxDart does not provide its own Observable class as a replacement for Dart Streams. Rather, it provides a number of additional Stream classes, operators (extension methods on the Stream class), and Subjects.
- Flutter_bloc
BLoC stands for Business Logic Component - one of the renowned design pattern for flutter, presented by Paolo Soares and Cong Hui, from Google at the DartConf 2018. In general terms, data will be flowing from the BLOC to the UI or from UI to the BLOC in the form of streams. The package flutter_bloc provides the widgets that make it easy to implement the BLoC design pattern. So flutter_block together with RxDart will deliver a god lever flutter project architecture.
Top Mobile App Development Company
Popular posts
-
10 Best Apps that Help You Boost a Conversion Rate of Shopify Store
- 2
- 0
-
Can Augmented Reality Help Augment Sales?
- 1
- 0
-
How to free up space on iPad in 5 steps
- 3
- 0
-
Kids and gadgets: friends or foes?
- 1
- 0
-
How to measure social media ROI for eCommerce businesses
- 4
- 1
-
The 13 Best Writers Software and Writing Apps for 2020
- 3
- 1