Module 17: Packages and pub.dev -- Standing on the Shoulders of Giants

What Is pub.dev?

pub.dev is Dart and Flutter's official package repository. Think of it as an app store for code libraries. Every package has:

• A readme with usage instructions and examples
• A score based on likes, pub points (code quality metrics), and popularity
• A changelog showing version history
• An API reference with every class and method documented
• Platform compatibility tags (Android, iOS, web, macOS, Linux, Windows)

When evaluating a package, look for:

1. High pub points (120+ out of 140 is great) -- this means the code follows best practices
2. Recent updates -- a package last updated 3 years ago might not work with current Flutter
3. Null safety -- all modern packages should support null safety
4. Popularity -- high popularity means more eyes on bugs and more Stack Overflow answers

pubspec.yaml -- Your Dependency Manifest

Every Flutter project has a pubspec.yaml file at the root. This is where your dependencies live.

dependencies:
  flutter:
    sdk: flutter
  # Caret syntax: compatible with 6.1.0 up to (but not including) 7.0.0
  url_launcher: ^6.1.0
  # Exact version
  google_fonts: 6.1.0
  # Range
  intl: '>=0.18.0 <1.0.0'

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

dependencies are packages your app needs to run. dev_dependencies are packages only needed during development (testing, linting, code generation).

Version Constraint Syntax

This is one of those things that seems boring until you get bitten by a version conflict at 5 PM on a Friday.

Adding and Managing Packages

# Add a package (updates pubspec.yaml automatically)
flutter pub add url_launcher

# Get all dependencies (usually runs automatically)
flutter pub get

# Upgrade dependencies to latest compatible versions
flutter pub upgrade

# Check for outdated packages
flutter pub outdated

# Remove a package
flutter pub remove url_launcher

The Five Packages Every Flutter Developer Should Know

google_fonts -- Beautiful Typography in One Line

Instead of downloading font files, bundling them in your assets, and registering them in pubspec.yaml, just call GoogleFonts.lobster():

import 'package:google_fonts/google_fonts.dart';

// On a single widget
Text(
  'Hello World',
  style: GoogleFonts.lobster(fontSize: 30),
)

// As the app's default text theme
MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(),
  ),
)

The package downloads fonts on first use and caches them. You get access to the entire Google Fonts library -- over 1,000 font families -- with zero configuration.

flutter_slidable -- Swipe Actions on List Items

import 'package:flutter_slidable/flutter_slidable.dart';

Slidable(
  endActionPane: ActionPane(
    motion: const ScrollMotion(),
    children: [
      SlidableAction(
        onPressed: (context) => _deleteItem(index),
        backgroundColor: Colors.red,
        foregroundColor: Colors.white,
        icon: Icons.delete,
        label: 'Delete',
      ),
    ],
  ),
  startActionPane: ActionPane(
    motion: const ScrollMotion(),
    children: [
      SlidableAction(
        onPressed: (context) => _emailContact(index),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        icon: Icons.email,
        label: 'Email',
      ),
    ],
  ),
  child: ListTile(
    title: Text('Contact ${index + 1}'),
    subtitle: Text('Slide me left or right'),
  ),
)

endActionPane reveals actions when swiping from right to left. startActionPane reveals actions when swiping left to right. The motion parameter controls the slide animation style -- ScrollMotion, DrawerMotion, StretchMotion, and BehindMotion each have a different feel.

cached_network_image -- Smart Image Loading

Loading images from the internet is slow. Loading the same image from the internet every time the user scrolls past it is wasteful. cached_network_image downloads once, caches to disk, and loads from cache on subsequent views.

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  imageUrl: 'https://example.com/photo.jpg',
  placeholder: (context, url) => const CircularProgressIndicator(),
  errorWidget: (context, url, error) => const Icon(Icons.error),
)

Three lines. Automatic disk caching, a loading spinner while the image downloads, and an error fallback if the network fails. Compare that to manually managing Image.network with error handling, caching logic, and loading states.

intl -- Dates, Numbers, and Internationalization

The intl package handles date formatting, number formatting, and message pluralization:

import 'package:intl/intl.dart';

// Date formatting
final now = DateTime.now();
print(DateFormat.yMMMd().format(now));         // "Mar 13, 2026"
print(DateFormat('EEEE, MMMM d').format(now)); // "Friday, March 13"
print(DateFormat.jm().format(now));             // "2:30 PM"

// Number formatting
print(NumberFormat.currency(symbol: '\$').format(1234.56)); // "\$1,234.56"
print(NumberFormat.compact().format(1500000));                // "1.5M"
print(NumberFormat.percentPattern().format(0.85));            // "85%"

DateFormat uses pattern strings based on the Unicode CLDR standard. Common patterns:

url_launcher -- Opening URLs, Email, Phone

When a user taps a phone number, you want to open the dialer. When they tap an email address, you want to open their email app. When they tap a website link, you want to open the browser. url_launcher handles all of these:

import 'package:url_launcher/url_launcher.dart';

Future<void> openUrl(String url) async {
  final uri = Uri.parse(url);
  if (await canLaunchUrl(uri)) {
    await launchUrl(uri, mode: LaunchMode.externalApplication);
  } else {
    throw 'Could not launch $url';
  }
}

// Usage
openUrl('https://flutter.dev');           // Opens browser
openUrl('mailto:alice@example.com');      // Opens email app
openUrl('tel:+15551234567');              // Opens phone dialer
openUrl('sms:+15551234567');              // Opens SMS app

Combining Packages in Practice

The real power of packages shows up when you combine several of them in a single screen. Here is a contact list item that uses three packages at once:

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:intl/intl.dart';
import 'package:url_launcher/url_launcher.dart';

class ContactListItem extends StatelessWidget {
  final Contact contact;
  final VoidCallback onDelete;

  const ContactListItem({
    super.key,
    required this.contact,
    required this.onDelete,
  });

  Future<void> _launch(String url) async {
    final uri = Uri.parse(url);
    if (await canLaunchUrl(uri)) {
      await launchUrl(uri, mode: LaunchMode.externalApplication);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Slidable(
      endActionPane: ActionPane(
        motion: const ScrollMotion(),
        children: [
          SlidableAction(
            onPressed: (_) => _launch('tel:${contact.phone}'),
            backgroundColor: Colors.green,
            icon: Icons.phone,
            label: 'Call',
          ),
          SlidableAction(
            onPressed: (_) => onDelete(),
            backgroundColor: Colors.red,
            icon: Icons.delete,
            label: 'Delete',
          ),
        ],
      ),
      startActionPane: ActionPane(
        motion: const ScrollMotion(),
        children: [
          SlidableAction(
            onPressed: (_) => _launch('mailto:${contact.email}'),
            backgroundColor: Colors.blue,
            icon: Icons.email,
            label: 'Email',
          ),
        ],
      ),
      child: ListTile(
        leading: CircleAvatar(
          backgroundImage: CachedNetworkImageProvider(contact.avatarUrl),
        ),
        title: Text(contact.name),
        subtitle: Text(
          'Added ${DateFormat.yMMMd().format(contact.addedDate)}',
        ),
      ),
    );
  }
}

Four packages working together in a single widget: flutter_slidable for swipe actions, cached_network_image for the avatar, intl for the date, and url_launcher for the phone and email actions. Each package handles its domain. Your code stays focused on composing them together.

There Are No Dumb Questions

Q: How many packages is too many?

A: There is no magic number, but every package adds to your app's size and build time. The real question is: does this package save me significant development time and is it well-maintained? If yes, add it. If you are adding a package for something you could write in 10 lines, maybe write those 10 lines instead.

Q: What happens if a package is abandoned?

A: Check the package's pub.dev page for the last update date. If it has not been updated in over a year, consider alternatives. You can also fork a package and maintain your own version if necessary. The Dart team also provides a "discontinued" flag that package authors can set.

Q: Do I need to worry about package conflicts?

A: Dart's package manager (pub) resolves version constraints automatically. If two packages require incompatible versions of a shared dependency, flutter pub get will fail with an error explaining the conflict. The fix is usually upgrading one or both packages to newer versions with compatible constraints.

Q: What is the difference between dependencies and dev_dependencies?

A: dependencies are bundled into your final app. dev_dependencies are only available during development -- things like testing frameworks, linters, and code generators. When your app is compiled for release, dev_dependencies are not included. Put testing packages in dev_dependencies to keep your app size smaller.

📝 Module Quiz

Test what you learned. 45 seconds per question. Passing score is set per module. Your best attempt is saved in your browser so you can track progress -- nothing is sent to a server.

Sharpen Your Pencil

Exercise: Contact Directory App

Build a complete contact directory app using all five packages. This exercise ties everything together.

Step 1: pubspec.yaml

Add google_fonts, flutter_slidable, cached_network_image, intl, and url_launcher with caret version syntax. Run flutter pub get.

Step 2: Contact Model

Create a Contact class with name, email, phone, website, avatarUrl, and addedDate fields. Include a static sampleContacts() method returning at least 6 contacts with real placeholder avatar URLs (e.g., https://i.pravatar.cc/150?img=1).

Step 3: Contact List Screen

• Apply a Google Font to the AppBar title
• Render contacts using Slidable with swipe actions: Call (green, right-swipe), Email (blue, left-swipe), Delete (red, right-swipe)
• Use CachedNetworkImage inside CircleAvatar for avatars with a loading spinner and error fallback
• Format addedDate with DateFormat as "Added MMM d, yyyy"
• Call slide action uses url_launcher with tel: scheme
• Email slide action uses url_launcher with mailto: scheme
• Delete action removes the contact and updates the UI

Step 4: Contact Detail Screen

• Large avatar (radius 60) with CachedNetworkImage
• Name displayed in a different Google Font than the list screen
• Tappable rows for email (mailto:), phone (tel:), and website (https:) using url_launcher
• "Member since" date formatted with DateFormat.yMMMMd()

Step 5: main.dart

• Apply a GoogleFonts text theme to the entire app
• Navigate from list to detail on contact tap