How to use English words package in Flutter

The English words package is a package that really helps us to use more than 5000 used English words and in addition, it has some utility functions. Let us use it in tandem with another useful package.

In our previous sections we’ve already learned one key point regarding provider package. We’ve learned that flutter uses declarative programming style. However, we can use provider package not only for state management, also for providing data from a model class.

In this article we’ll learn how to use English words package with provider package.

But before that, let’s know how provider package in flutter may work as a data model.

In this section we’re going to use provider package in a simple way, so firstly, let’s know how it works.

The provider is a wrapper around InheritedWidget to make them easier to use and more reusable. Certainly, we could have used InheritedWidget manually rather than using provider package.

If we had done that, we could have maintained state management. But, at the same time, we would have missed some advantages that provider package provides.

As a result, it’s better to see what advantages we can enjoy by using provider package.

• We can simplify allocation and disposal of our resources. We can change the value of a variable, call a method and do some more complicated staff that involves inputs and outputs.
• The lazy loading helps us to use system resources more efficiently.
• If we had used inherited widget manually, we would need to make a new class every time. The provider package reduces that boilerplate. That helps us to write less code.
• We can consume inherited widgets by three ways. However, in this section we’ll limit ourselves to practical considerations of Provider.of method.

Firstly, we should add the dependency of two packages to our pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0
  flutter_riverpod: ^1.0.0-dev.11


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  english_words: ^4.0.0

Next, right away we can start using the English words package inside any widget, just like the following.

final wordPair = WordPair.random();
Text(
            wordPair.asCamelCase,
            style: const TextStyle(
              fontFamily: 'Allison',
              fontWeight: FontWeight.bold,
              fontSize: 80,
            ),
          ),

The same way, the provider package may help us to use it as a provided object. And after that we can use other utility functions of English words package inside our data model.

import 'package:flutter/foundation.dart';
import 'package:english_words/english_words.dart';

class WordPairing with ChangeNotifier {
  late var word = WordPair.random();
}

After that we can use Provider.of to access the provided object.

final WordPairing word = Provider.of<WordPairing>(context, listen: false);
Text(
            word.word.asSnakeCase,
            style: const TextStyle(
              fontFamily: 'Allison',
              fontWeight: FontWeight.bold,
              fontSize: 80,
            ),
          ),

As a result we can get two different words on our screen.

At the end of this post, let us take a look at the full code to get an overview. Although in one case, we’ve used English words package directly, still we can use the same with provider package.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_artisan/models/wordpair.dart';

class ProviderSampleSeven extends StatelessWidget {
  const ProviderSampleSeven({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ProviderSampleSevenHome(),
    );
  }
}

class ProviderSampleSevenHome extends StatelessWidget {
  const ProviderSampleSevenHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Wordpairing Test'),
      ),
      body: const SevenBody(),
    );
  }
}

class SevenBody extends StatelessWidget {
  const SevenBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    final WordPairing word = Provider.of<WordPairing>(context, listen: false);
    return ListView(
      children: [
        Container(
          margin: const EdgeInsets.all(20),
          padding: const EdgeInsets.all(20),
          child: Text(
            wordPair.asCamelCase,
            style: const TextStyle(
              fontFamily: 'Allison',
              fontWeight: FontWeight.bold,
              fontSize: 80,
            ),
          ),
        ),
        Container(
          margin: const EdgeInsets.all(20),
          padding: const EdgeInsets.all(20),
          child: Text(
            word.word.asSnakeCase,
            style: const TextStyle(
              fontFamily: 'Allison',
              fontWeight: FontWeight.bold,
              fontSize: 80,
            ),
          ),
        ),
      ],
    );
  }
}

For more beautiful Flutter UI, you may take a sneak peek at this GitHub repository, though it’s not a hidden treasure. 🙂

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter