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.

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); } }

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.

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.

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">

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.

Animate.css provides just-add-water CSS animations, simples! It’s got effects for bounce, pulse, shake and several more.

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.

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.

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

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 hovering on the left/top side of the screen . Also, check out and subscribe to my YouTube channel (hit the bell icon too) for videos on Dart.

Subscribe to the newsletter for my free 35-page Get started with Dart eBook and to be notified when new content is released.

Like, share and follow me for more content on Dart.