Creating a Name Generator

In this example we’re going to look at loading external libraries, adding additional widgets and more, all to create a name generator.

Our first step is to create a new Flutter App in VSC. We’ve done this before several times.

This will setup all of the libraries and connections we need initially, however we do not need this source code, so you can remove it, and replace it with the base source code below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Name Generator',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Name Generator'),
        ),
        body: const Center(
          child: Text("")
        ),
      ),
    );
  }
}

Notice that main is using the => notation as we’ve seen in other examples. This is designed for single line functions/methods.

Importing an External Library

Now we want to import an external library. Given the number of libraries out there, it is good to know how to import them so you have access to a large assortment of tools which are already ready built for you.

We’re going to import english_words.

To import, we need to first open pubspec.yaml. Remember, yaml files are used for configuration purposes.

Scroll down until you see cupertino_icons, then add english_words: ^4.0.0 to the line below it.

Remember, in yaml files, indentation is important as is capitalization, so make sure you have indented the same amount for english_words as you see for cupertino_icons.

If you notice where you are, you are under dependencies, so you have added this library as a dependency for your project.

dependencies:
  flutter:
    sdk: flutter


  # 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

Now you will need to download the library so you can use it. In other editors, you might have to run a command line tool. However in Visual Studio Code, there is an icon (shown on the right) which downloads the dependencies for you that are missing.

Now that we have the library file, we can import it into our code.

import 'package:english_words/english_words.dart';

Generating Text Dynamically

One of the things that english_words does it picks words randomly for us. So we’re going to implement this. This will be an intermediary step to make sure our code is working and we can connect to the library before we move forward.

In the build method, we will need to add a local variable that will hold the words generated. This will need to be up near the top of the build method before the return statement.

final wordPair = WordPair.random();

Notice that is calls a class WordPair, from the english_words library, and calls one of it’s methods, random. This will give us two words joined together.

Next, we will place this value where our text field is on our widget. As of now, we have an empty string, so we’re going to place $wordPair inside of it like you see below.

body: Center(
    child: Text(wordPair.asPascalCase),
  )

Notice that the keyword const is also removed from before center. That is because it is no longer constant, and you will dynamically change the text.

asPascalCase is also known as Upper Case Camel, where every word is capitalized.

IF you run, or do a hot reload, you should see some new random words appear. If you do it again and again, you will get (hopefully) different random words appearing.

Adding a Stateful Widget

We’ve added stateful widgets before. We use this if we need our application to remember values, or settings. In this case we’re going to hold some of random word combinations, so we can later store a bunch and scroll through them.

Code to the end of your code in the main.dart file.

Start typing st, and you should see Flutter stateful widget appear. Click on that, or hit the tab key, and a section of code will automatically be generated for you. Type in RandomWords, and it will finish filling out the code for you, so it looks like what you see below.

class RandomWords extends StatefulWidget {
  const RandomWords({ Key? key }) : super(key: key);

  @override
  _RandomWordsState createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

Within the _RandomWordsState we need to update the build method, removing the return of an empty container with a call to create a random word pair and return a Text widget with that within it as you see below.

@override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }

The changes we made in the previous section, will need to be changed again. So in the main app, the wordPair will need to no longer exist, and the Text widget will be replaced with the Stateful Widget we just created. So the body of the app will look like the following:

body: Center(
          child: RandomWords(),
        ),

If you do a hot reload at this point, you should not see a change in the application at all. This is actually good, as it means that it is still properly working, and we’re just adding functionality to it one step at a time.

Creating a Scroll List

Our next step is to use the Stateful Widget we created to build a scrolling list. We’ll need to make a few changes however.

First in the state class, we’ll need to two new class properties, as you see below. We’ll put these before the build method.

final _suggestions = <WordPair>[];
final _biggerFont = const TextStyle(fontSize: 18.0);

Remember the underscore specifies that these are private properties.

Our next step is to build a new class within _RandomWordsState. This will be used to build a list of suggest words.

Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i) {
          if (i.isOdd) return const Divider(); 

          final index = i ~/ 2;
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

The itemBuilder is called once per suggested word pairing. It places each suggestion into a ListTile row.

For odd rows, the function adds a Divider widget to visually separate the entries.

Note: the divider might be difficult to see on smaller devices.

final index = i ~/ 2 keeps track of how many list items we actually display by dividing by two since we’re adding dividers which shouldn’t count. This returns an integer value.

We check to see if we’re at the end of the list by seeing if our index is greater than the _suggestions.length: if (index >= _suggestions.length) if It is, then we add 10 more items to our list.

At this point you should have an error because we haven’t written _buildRow() yet, so we need to do that.

Widget _buildRow(WordPair pair) {
  return ListTile(
    title: Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
  );
}

This code is fairly straight forward as we’ve seen it several times before in various places.

Both _buildSuggestions and _buildRow should be within the _RandomWordsState class.

However, while we’ve built those widgets, they are not currently being called. So we’re going to have to make a couple of final adjustments.

First, in the _RandomWordsState we will update our build() method. Instead of returning Text(wordPair.asPascalCase) we’re going to remove that, and replace it with the code you see below:

return Scaffold(
      appBar: AppBar(
        title: const Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );

This also means you will need to remove the randomWords you had before.

If you do a hot reload, you will see you have your app working with a scrollable list of random words displaying.

However, you’ll also probably notice that there are two titles, because you have two Scaffold items. Therefore, remove the one from home, and replace it with RandomWords().

Now a hot reload should look correct with only one title bar.

Creating a Name Generator was originally found on Access 2 Learn