The Flutter is an open source cross-platform UI framework from Google that allows you to quickly build high quality native user interfaces on Android, iOS, and the Web. The Flutter is also the default development kit for Google’s new Fuchsia operating system. Flutter is being used by more and more developers and organizations around the world, and Flutter is completely free and open source.

As the most popular cross-platform technical framework, Flutter is being embraced by more and more developers and organizations. As of November 2019, Flutter has received over 80K of attention and 10K of forks. So it’s not too much to call the Flutter the hottest front-end technology of 2019.

Like any other front-end technology, the Flutter technology is popular because of the great community and developer enthusiasm, so we use some open source community libraries when developing our Flutter application to reduce the time cost of our own encapsulation. Here is a summary (in no particular order) of the libraries that have been used extensively in the development of Flutter.

Similar to the package management mechanism on the front end, The dependent packages of Flutter are placed in a pubspec.yaml file, as shown below.

Description: A new Flutter application. Version: 1.0.0+1 Environment: SDK: "> < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; white-space: inherit;" flutter_test: sdk: flutter flutter: uses-material-design: trueCopy the code

The third-party libraries we depend on are placed under the Dependencies node.

The UI display

The rich text

flutter_html_view

Pub.dartlang.org/packages/fl… By default, The Flutter does not provide a component for displaying Html, so to display Html, you need to use a three-party package that renders the Html to the native Widget. Similar to the JSoup plug-in for Android.

flutter_html_textview

Pub.dartlang.org/packages/fl… Render the HTML as a Widget, rendering the HTML in a TextView.

MarkDown

flutter_markdown

Pub.dartlang.org/packages/ma…

A Markdown viewing library written using Dart that resolves Markdown to HTML on both the client and server.

markdown

Pub.dartlang.org/packages/ma… Portable Markdown library written with Dart. It parses Markdown to HTML on both the client and server.

html2md

Pub.dartlang.org/packages/ht… A plug-in that supports converting HTML to MarkDown.

animation

flutter_villains

Pub.dartlang.org/packages/fl… A page to switch animation library, can simplify animation operations, use only need to manage the UI.

Screen adaptation

platform_aware

Pub.dartlang.org/packages/pl… The Flutter component is packaged to automatically adapt to the current platform without code changes for iOS and Android. All widgets rely on theme.of (context).platform to determine the platform of the currently active platform. You can change the platform dynamically using the Flutter Inspector.

native_widgets

Pub.dartlang.org/packages/na… To avoid duplication of code, you can write code once to support both platforms and automatically use stylized components based on the platform. Android will use material design and iOS will use Cupertino style widgets.

Calendar, time selection library

flutter_calendar

Pub.dartlang.org/packages/fl… The calendar component library for Flutter has a slightly different display because it calls the native component library.

calendarro

[https://pub.dartlang.org/packages/calendarro](https://pub.dartlang.org/packages/calendarro)
Copy the code

The calendar component library for Flutter. This library provides a variety of ways to customize components.

flutter_picker

Pub.dartlang.org/packages/fl… A date, time, date, time, icon, custom data selector, can be in the popup window, can pop up at the bottom. By far the most comprehensive selector control. The plugin is available on both ios and Android platforms and uses ios-style UI effects.

Color choices

flutter_color_picker

Pub.dartlang.org/packages/fl… A simple color selector, similar to Android’s Selector, that sets the effect of a selector on a control when it is clicked.

flutter_colorpicker

Pub.dartlang.org/packages/fl… A color selector for HSV.

The navigation bar

navigation_bar

Pub.dartlang.org/packages/na… Simple bottom navigation bar library

fluro

Pub.dartlang.org/packages/fl… The best route navigation framework. Functions: Simple route navigation; Function handlers (mapping to functions rather than paths); Wildcard parameter matching; Query string parameter parsing; Built-in common conversion; Simple custom transformation creation.

Network and data serialization

Network request

http

Pub.dartlang.org/packages/ht… Github.com/dart-lang/h… HTTP is a network request library written natively using Dart that makes it easy to implement HTTP resource requests, platform-independent, and available on the command line and browser.

HttpClient

HttpClient is an Http request provided by the Dart IO library that implements some basic Http requests. However, HttpClient can only achieve some basic network requests, corresponding to some complex network requests can not be completed, such as POST in the Body request Body transmission content type part is not supported, multipart/form-data this type transmission is not supported.

dio

Pub.dartlang.org/packages/di…

The Dart community provides HTTP request libraries that support not only common network requests, but also Restful apis, FormData, interceptors, request cancellation, Cookie management, file upload/download, timeout, and more.

http_multi_server

Pub.dartlang.org/packages/ht…

HttpServer wrapper, which can be used to handle requests from multiple servers.

Ps: For more information on how to use the web library, see my previous article entitled Http Web Requests developed with Flutter

serialization

The serialization of Flutter can be divided into manual serialization and tool serialization. Manual serialization refers to using dart: Convert’s built-in decoder, which involves passing in the JSON raw String to the js.decode () method and then querying the data you need from Map<String, Dynamic >. Automatic serialization can use libraries such as JSON_serialIZABLE, built_value, built_value_Generator, and built_value_test.

In addition, when it comes to JSON parsing, you can use the Codable library, which converts dynamic structured data (JSON, YAML) into a Dart type library. Here is a comparison of some commonly used JSON parsing libraries.

The codec

Sometimes for the sake of data security, data transmission or locally stored data will be codec, encryption and decryption operations, if you have such operations, you can use the following libraries.

ninja

Pub.dartlang.org/packages/ni… In the Dart Converter and Codec interface on the improvement of AES and RSA encryption and decryption algorithm library.

archive

Pub.dartlang.org/packages/ar… Provides encoders and decoders for various archive and compression formats such as zip, tar, bzip2, gzip, and Zlib.

The database

If you have requirements related to data storage and caching, you can use the following third-party libraries.

sqflite

Pub.dartlang.org/packages/sq… The Flutter plug-in for SQLite is a self-contained, highly reliable embedded SQL database engine.

file_cache

Pub.dartlang.org/packages/fi… Cache Json, Buffer, and FileCacheImage for the Flutter Package project.

Image loading and processing

The image to load

Image is an important module in the development of Flutter, which is mainly about image loading and image processing. Pictures of loading in addition to using the Image.net work Image components, FadeInImage memoryNetwork to load the pictures, you can also use the following some of the photo gallery to load images.

cached_network_image

Pub.dartlang.org/packages/ca… A Flutter library for displaying images from the Internet and storing them in a cache directory can be used to load and cache network images, or can be used with placeholders and error widgets.

flutter_advanced_networkimage

Pub.dartlang.org/packages/fl… An advanced image cache loading and scaling control flutter library.

transparent_image

Pub.dartlang.org/packages/tr… Simple transparent images, represented as Uint8List, can be used as placeholders when loading images.

The image processing

image_jpeg

Pub.dartlang.org/packages/im… Used to convert images to JPEG zoom and compression, compression and then upload the image is more efficient. The library will eventually call on Android or iOS native features for image compression, with high performance and support for a wide range of source image formats.

image_picker

Pub. Dev/packages/im…

Image_picker, as you can see from the library name, is a library for selecting images from Android and iOS image libraries, allowing you to take new photos with your camera.

photo

Pub.dartlang.org/packages/im… The library can also be used to select images, support multiple selection, and the library uses the UI with Flutter to make it easy to customize the display style.

image

Pub.dartlang.org/packages/im…

Dart library, which provides the ability to load, save, and manipulate images in a variety of file formats. The library does not rely on DART: IO, so it can be used for servers and Web applications.

flutter_svg

Pub.dartlang.org/packages/fl… You can use this library to load SVG images.

zoomable_image

Pub.dartlang.org/packages/zo… A gallery that supports image viewing and gesture zooming.

image_carousel

Pub.dartlang.org/packages/im… Image_carousel is a control used to display Flutter images. Compared to the official Image component, Image_Carousel allows you to swipe left and right to switch from one Image to the next. Image_carousel also incorporates zoomable_image, so you can click and zoom to view the Image. In addition, Image_Carousel supports Asset and web images.

carousel_slider

Pub.dartlang.org/packages/ca… As the name suggests, Carousel_Slider is a gestrophic library that allows you to switch between image components with a gestrophic swipe, and also supports autoplay of images.

parallax_image

Pub.dartlang.org/packages/pa… Parallax images can be used with any scrollable (such as ListVIEW) to make images placed within the scrollarea look smoother as they roll.

camera

Pub.dartlang.org/packages/ca… It is used to obtain information about Android and iOS cameras, preview camera feeds, capture images, and record videos.

alerts

flutter_local_notifications

Pub.dartlang.org/packages/fl… A plugin to display local notifications across platforms, both Android and iOS.

local_notifications

Pub.dartlang.org/packages/lo… Use this library to easily create Notifications on Android and iOS.

url_launcher

Pub.dartlang.org/packages/ur… Urls can be launched on Android and iOS, enabling web, phone, text, and email solutions.

firebase_messaging

Pub.dartlang.org/packages/fi… A cross-platform messaging solution that lets you deliver messages reliably on Android and iOS.

event_bus

Pub.dartlang.org/packages/ev… A library for a simple event bus that decouples applications using Dart streams, similar to the event bus mechanism in Android, uses a broadcast mechanism internally.

Video and audio

The development of the Flutter may involve the development of video and audio playback. In addition to the components provided by the Flutter, there are open source third-party libraries that can be used.

video_player

Pub.dartlang.org/packages/vi… Officially maintained video playback plugin for displaying embedded videos along with other Flutter widgets on Android and iOS.

video_launcher

Pub.dartlang.org/packages/vi… Mainly used for video player.

flute_music_player

Pub.dartlang.org/packages/fl… Music player and audio plug-in based on Flutter, support local music file playback.

audioplayer

Pub.dartlang.org/packages/au… Flutter audio plugin for playing remote or local audio files.

audioplayers

Pub.dartlang.org/packages/au… A branch of the AudioPlayer that differs in that it supports playing multiple audio simultaneously and displaying volume controls.

other

In addition, such as maps, TWO-DIMENSIONAL code, chart library, permission library and sharing, is usually encountered in the development of more needs.

The map

map_view

Pub.dartlang.org/packages/ma… A Flutter plugin for displaying Google Maps on iOS and Android.

flutter_map

Pub.dartlang.org/packages/fl… Leaflet based Flutter map pack.

location

Pub.dartlang.org/packages/lo… Handles locations on Android and iOS, providing a callback when the location changes.

latlong

Pub.dartlang.org/packages/la… LatLong is a lightweight library for calculating general latitude and longitude.

Qr code

qr_flutter

Pub.dartlang.org/packages/qr… Qr_flutter is a Flutter library for QR codes that can be rendered easily and quickly via Widget or custom Paint.

barcode_scan

Pub.dartlang.org/packages/ba… Barcode_scan is a Flutter plugin for scanning 2D barcodes and QRCodes.

qrcode_reader

Pub.dartlang.org/packages/qr… Qrcode_reader is a Flutter plugin that reads QR codes using the camera.

The graph library

In many cases, chart development is also a common development requirement. If you have a chart development requirement, you can use the following open source libraries.

charts-common

Pub.dartlang.org/packages/ch… Material Design style chart library.

charts-flutter

Pub.dartlang.org/packages/ch… General purpose chart library component that provides basic bar charts, line charts, pie charts, etc.

flutter_circular_chart

Pub.dartlang.org/packages/fl… A library that lets you easily create animated circular chart controls with Flutter.

permissions

In development, if you want to apply for a permission from the system, you can use the permission library to apply for it.

simple_permissions

Pub.dartlang.org/packages/si… A library for request permissions for Android and ios.

flutter_simple_permissions

Pub.dartlang.org/packages/fl… Library of Flutter permission applications.

Share statistical payments

share

Pub.dartlang.org/packages/sh… The Flutter plugin supports sharing.

flutter_umeng_analytics

Pub.dartlang.org/packages/fl… The sharing and statistics library of the Alliance.

flutter_qq

Pub.dartlang.org/packages/fl… Integrated QQ login, QQ sharing, QQ space sharing function library.

flutter_wechat

Pub.dartlang.org/packages/fl… Integrated wechat, support wechat login, sharing, payment and other functions of the library.

flutter_alipay

Pub.dartlang.org/packages/fl… Realized the function of calling Alipay for payment, compatible with Android and iOS.

Open source applications

The most effective way to start learning a skill is to write a small application after learning the basics. As one of the hottest cross-platform technologies of the year (no one), there is a large number of open source application sources available on the Web. By reading these sources, we can quickly develop the application in depth.

flutter-go

Github.com/alibaba/flu…

Developed by alibaba’s front-end technical team, the Flutter developer assistance APP contains a demo of the common 140+ components of the Flutter and a Chinese document. It is a necessary manual for learning about the development of the Flutter.

gsy_github_app_flutter

Github.com/CarGuo/GSYG… Advantages of the GSYGithubApp series: We already have four versions of the Flutter, Weex, ReactNative, and Kotlin. Complete functions, the project framework involves a wide range of technology, high degree of completion, continuous maintenance, supporting articles, suitable for comprehensive study, comparison and reference. Cross-platform open source Github client App, better experience, richer features, aimed at better daily management and maintenance of personal Github, to provide better and more convenient driving experience. ￣ blue) Blue.

flutter-examples

Github.com/nisrulz/flu…

Contains common learning examples of Flutter.

flutter-osc

Github.com/yubo725/flu…

Open source Chinese client based on Google Flutter, support for Android and iOS.

FlutterDouBan

Github.com/kaina404/Fl…

The Awesome Flutter Project is a 100% restored Douban client on the whole web. Main functions include home page, book, video, group, market and personal center, all in one place.

zhihu-flutter

Github.com/xujiyou/zhi…

A Flutter application that mimics Zhihu, supports black theme switching.

flutter_shuqi

Github.com/huanxsd/flu…

High copy book flag novel client, all functions are written using Dart, iOS and Android code reuse rate reached 100%.

flutter-netease-music

Github.com/boyan01/flu… High imitation of netease Cloud music, complete most functions of high imitation.

NeteaseCloudMusic

Github.com/fluttercand…

High copy of the latest version of netease cloud music, interface using Binaryify big – NeteaseCloudMusicApi

Morec

Github.com/Mayandev/mo…

This is a very elegant movie client version of Flutter, which makes use of the existing Api of Douban to create a complete movie display App. The details are perfect, and it is a fully designed product rather than a Demo.

flutter_boss

Github.com/heruijun/fl… A Flutter application modeled after Boss Zhipin.

awesome-flutter-cn

Github.com/crazycodebo…

The Flutter is a Google SDK for the development of high performance, high fidelity, cross-platform apps (Android iOS). Awesome Flutter – CN is a flutter learning database that beginners can use to study their flutter.