5 Must-Have Flutter Desktop Packages to Include in Your Next Build
Flutter is a software development kit developed by Google in 2018. Since its inception, it has garnered substantial industry acclaim. What makes it stand out is its simple and easy-to-learn coding language Dart, simple and eye-catching designs of widgets, and cross-platform development abilities.
Flutter continues to make vast improvements and is now a stable product for both flutter web and mobile. While Flutter Desktop is still in alpha, you can expect massive enhancements in the coming months as developers continue to use it for desktop application development. In this article, we’ll walk you through the 5 must-have desktop packages worth including in your next build.
Why is Desktop still relevant?
You’d be good company if you were made to believe that the era of the desktop app was finished. After all, mobile application development and its usage continues to soar, and most of the attention is on the future of mobile.
Still many users prefer to view an application on a larger screen, even if it’s not a desktop app. Desktop users can view more information, navigate easily, and can spend more time with an application.
The rise in Cross-Platform Development
In the past couple of years, there has been a significant decline in the demand for native developers. DRY (don’t repeat yourself) has been the holy grail for developers for a long time. There was the “promise” (no pun intended) of JsNode, then Xamarin as a cross development tool to use on a multitude of platforms. This feature is missing from native development.
Flego was the first-ever cross-platform development tool, now referred to as React Native. Flutter is a cross-platform development tool equipped with UI rendering components, navigation, testing, and a plethora of libraries. The Flutter engine is packed with all the features that developers need to build and deploy their app.
Because of these new developments, many peoples are of the view that Flutter is likely to replace electron for desktop development.
The Flutter Engine
The goal of the Flutter team is to build a cross-platform UI toolkit that enables code reusability. This leads to the development of the Flutter engine. From a technical standpoint, the Flutter engine puts pixels on the screen when they are required. Flutter engine is a cornerstone of Flutter’s speedy and high-quality output.
Flutter’s new desktop-oriented version alpha release enables more keyboard inputs, mouse controls, and a large screen display.
Desktop Packages for Flutter
There are a plethora of desktop packages that work on Windows, Mac, and Linux Operating systems. Here is a quick overview of the packages.
1. Provider 5.0.0 (Null Safety)
It is a wrapper around an InheritedWidget to make it reusable and easy to use. You can use Provider in your code instead of manually writing Inheritedwidget, you’ll get the following benefits:
- Simplified allocation of resources
- Lazy-loading
- A significant reduction in boilerplate and making of a new class every time
- User-friendly dev tools
- The most reliable way to use IngeritedWidget in your code
- Provides more scalability for classes, extending the listening class — an object that maintains your list of listeners
2. Google_fonts
No surprise here. This Flutter package enables you to use any of the 977 fonts and their variants from fonts.google.com in your flutter app.
Getting Started with google_fonts
With the google_fonts package, .ttf or .otf files don’t need to be stored in your assets folder and can be mapped in pubspec. They can be retrieved once by using the HTTP command at runtime and can be cached in the app’s system. This package is designed specifically to reduce the app bundle size. With the google_fonts package, developers can choose between pre-bundling the fonts and choose them over HTTP, while using the same API.
A simple zoomable image/content widget for flutter. PhotoView enables users to zoom images and cater to the user’s pinch, rotate, and drag gestures.
It can also be used to display any widget inside an image such as Container, Text, or SVG. While the PhotoView Flutter package is easy to use, it is extremely customizable via its options and controllers.
How to Install it?
Add photo_view as a dependency in your pubspec.yaml file
Import Photo View:
import ‘package:photo_view/photo_view.dart’;
Very Basic Usage
Here is how you can use this package in your code
@overrideWidget build(BuildContext context) {return Container(child: PhotoView(imageProvider: AssetImage(“assets/large-image.jpg”),));}Result:
4. Animations
High-quality pre-built animations for Flutter. This package is equipped with pre-canned animations for commonly-desired effects. The animations can be customized with your content and can be integrated into the application to delight users:
Material Motion for Flutter
Material motion is a set of transition patterns that helps users to understand and navigate an app. Currently, the following transition patterns come with this library:
1. Container transform
2. Shared axis
3. Fade through
4. Fade
Container transform
The container transform pattern is designed to facilitate the transition between the UI elements that include the container. The picture shown below tells us that this package creates a visible connection between two UI elements.
Shared axis
The shared axis pattern aids in the transitions between UI elements that have a spatial or a navigational relationship. This pattern employs shared transformation on the x, y, and z-axis to reinforce the relationship between elements.
Fade through
The fade-through pattern is used for transition between UI elements that aren’t closely related to each other.
Fade
The fade pattern is used for those UI elements that exist within the boundary of a screen, such as a dialog that fades in the center of the screen.
This Flutter package is integrated into the flutter scroll component and drop-down refresh.
Features
- When you scroll up in the window, it loads and when you scroll down it refreshes
- It best suits all Scroll widgets like GridView and ListView
- Equipped with some common indicators
- Comes with the global setting of default indicator and property
- Aside from horizontal and vertical refresh, it supports reverse ScrollView
- Contains more refreshstyle like Behind, Follow, Unfollow, and Front.
- Supports twoLevel refresh
Feel free to join our growing flutter, dart, and devops community https://discord.gg/xWz8V7Wn
