Dart has hit another win lately, having been listed at #12 of the most loved languages according to the StackOverflow 2019 Annual Developer Survey. In light of that I have taken a look and hand-picked 10 of the most interesting Dart packages you can start working with along side CSS libraries you should shortlist for your next web project.
1. dio
Dio is a powerful library for making HTTP requests. It wraps Dart’s HttpClient class while extending it with support for features such as Interceptors, File Download, Request Cancellation, Timeout and several more. It can be configured globally and its super simple to use:
import 'package:dio/dio.dart';
void main() async {
try {
Response res = await Dio().get('https://news.ycombinator.com');
print(res);
} catch(e) {
print(e);
}
}
2. BulmaCSS
Bulma is a free, open source CSS framework based on Flexbox and used by more than 150,000 developers, including myself. It provides helper classes for styling various UI elements while adopting a mobile-first responsive design approach. In fact I’ve worked with Bulma in this tutorial series.
3. RxDart
RxDart is a reactive functional programming library based on the ReactiveX JS counterpart. It’s one of the go-to solutions for state management in Flutter mobile apps, although it also works on server and web. RxDart builds on top of Dart’s pretty decent Streams API with extra functionality.
4. Water.css
Water.css is a just-add-css collection of styles to make simple websites just a little nicer. It can easily be activated by sticking the CSS file in your <head> section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css">
5. html
html is a pure Dart HTML5 parser. It’s a port of html5lib from Python. It’s got a straight-forward API and a useful application when writing web scrapers.
6. animate.css
Animate.css provides just-add-water CSS animations, simples! It’s got effects for bounce, pulse, shake and several more.
7. markdown
markdown is a portable Markdown library written in Dart. It can parse Markdown into HTML on both web and server. Points for whoever can combine this with the html library. Try it out at https://dartlang.github.io/markdown.
8. DynCSS
DynCSS parses your css for -dyn-(attribute) rules and then evaluates then via JS on browser events like scroll and resize. The result is applied to the CSS attribute you have specific in the (attribute) sufix. For the most part you only need to set CSS property/value pairs, but there also a JS API for custom functions, which can be accessed from Dart 🎯😉. Here’s of demo of this at work.
9. pdf
pdf creates PDF files for web and Flutter projects. It can create full multi-page documents with graphics, images and text using TrueType fonts. The library provides a low-level PDF creation utility that takes care of the bits generation and a Widget system similar to Flutter’s, for easy high-level PDF creation.
Example code:
final pdf = Document()
..addPage(Page(
pageFormat: PdfPageFormat.a4,
build: (Context context) {
return Center(
child: Text("Hello World"),
); // Center
})); // Page
10. Hover.css
Hover.css provides a collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. It can be applied to your own elements and modified too. Available in CSS, SASS and LESS.
Sharing is caring
If you enjoyed reading this post, please share this through the various social buttons on this page. Also, check out and subscribe to my YouTube channel (hit the bell icon too) for videos on Dart with Angular, Vue, React, HTTP, RESTful APIs, MongoDB and many more.
Visit creativebracket.com for more in-depth Dart tutorials.
Top comments (1)
Tks