How to Create a Flutter Library: my_changelog

Flutter and the Dart ecosystem makes it easy to create, publish and use new libraries. Within our Flutter applications we can pull libraries in from the filesystem, Git, and pub.dev, making it easy to make new changes during the development/distribution phase.

What will we be making?

You've been tasked with a way to display a CHANGELOG inside of your application. You decide to create a library for this to make it reusable and offer powerful (future) features such as dialog popups, auto-show on version number change, and so on.

Prior to working on the more complex features, you decide to get an early MVP up and running - simply displaying a CHANGELOG.md file from a local asset or parsing Markdown from a String.

Creating a Flutter project

As always, we can go ahead and create a new Flutter project prior to creating our library:

$ flutter create my_app

This will serve as a test bed as we'll be loading our library from the filesystem during development. We'll come back to this later on in the tutorial!

Creating a Flutter library

Next up, we can create a new library by opening a new terminal window and typing the following:

$ flutter create --template=package my_changelog

This will create a new library project named my_changelog. Let's open it up inside of our editor:

$ cd my_changelog
$ code .

We should now be able to see the stock Calculator class and the surrounding test file at lib/my_changelog.dart and test/my_changelog_test.dart:

library my_changelog;

/// A Calculator.
class Calculator {
  /// Returns [value] plus 1.
  int addOne(int value) => value + 1;
}

There's also other key files that'll need to be configured prior to our deployment such as LICENSE and CHANGELOG.md, aside from that, it's a completely bare-bones Dart/Flutter project.

Adding our dependencies

Let's head over to pubspec.yaml and under the dependencies: key, add the flutter_markdown plugin. We'll need this to parse the Markdown content that we'll be passing into our library later on.

NOTE: We don't need to add the Flutter dependency because we generated this with the Flutter SDK

dependencies:
  flutter:
    sdk: flutter
  flutter_markdown: ^0.3.3

Once you've done this, save the file. If your environment doesn't run flutter pub get by default, run this inside of your terminal from within the my_changelog directory.

Creating the ChangeLogScreen

Next up, we'll be making the ChangeLogScreen that we can import inside of our my_app project that we created earlier. Add the following to your lib/my_changelog.dart file:

library my_changelog;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

class ChangeLogScreen extends StatelessWidget {
  final Widget title;
  final String markdownData;
  final bool showAppBar;
  final String markdownFilePath;

  final ScrollController scrollController = ScrollController();

  ChangeLogScreen({
    this.title,
    this.markdownData,
    this.showAppBar = true,
    this.markdownFilePath,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: showAppBar
          ? AppBar(
              title: title ?? Text(""),
              leading: IconButton(
                icon: Icon(Icons.close),
                onPressed: () => Navigator.of(context).pop(),
              ),
            )
          : null,
      body: SafeArea(
        child: markdownFilePath != null
            ? FutureBuilder(
                future: rootBundle.loadString(markdownFilePath),
                builder:
                    (BuildContext context, AsyncSnapshot<String> snapshot) {
                  if (snapshot.hasData) {
                    return Markdown(
                      controller: scrollController,
                      data: snapshot.data,
                    );
                  }

                  return Center(child: CircularProgressIndicator());
                },
              )
            : Markdown(
                controller: scrollController,
                data: markdownData,
              ),
      ),
    );
  }
}

This should hopefully meet our MVP requirement. We're able to currently customise a StatelessWidget which contains a Scaffold that optionally has an AppBar, markdown support for rootBundle (i.e. project assets), text, and so on.

Adding the my_changelog dependency

Now that we have the foundation of our my_changelog library, we can go ahead and view this inside of our my_app project.  Open this up inside of your editor and head on over to pubspec.yaml and edit your dependencies to include the path for my_changelog on your machine:

dependencies:
  flutter:
    sdk: flutter
  my_changelog:
    path: "../my_changelog"

Once again, you'll need to run flutter pub get if your environment does not automatically fetch packages after changing this file.

We can also use git instead of a local path here:

my_changelog:
    git:
      url: git://github.com/username/repo.git

Using our library

Now that we've got the my_changelog library, we'll be able to use the exported ChangeLogScreen inside of my_app. Head over to lib/main.dart and update your build to use this:

import 'package:flutter/material.dart';
import 'package:my_changelog/my_changelog.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: ChangeLogScreen(
          title: Text("Changelog"),
          markdownData: """
## 1.1 - 22/02/2020
- Fixed an issue where the lorem wouldn't ipsum.
- Stability improvements.
- Security and bug fixes.

## 1.0 - 21/02/2020
- Added a changelog to the application.
          """,
        ));
  }
}

We can now start our project using the debugger on either an iOS or Android emulator/device, showing our ChangeLogScreen in action:

We could also display this data using the markdownFilePath if we wanted to turn this into it's own file (such as assets/CHANGELOG.md).

Conclusion

In this article we created a new Flutter library to accommodate a CHANGELOG or other Markdown data. In the next part of our library series, we'll look at how to publish this on pub.dev and make this accessible to everyone without needing it locally or using the git URL.