Write the first Flutter application (Part 1)

How will you build the application in part 1?

Your application will be a simple application, generating proposed names for a start up company. Users can select and unselect their names, saving their favorite names. The App will create names slowly. When user scroll, more names will be created, unlimited.

Step 1: Create a Flutter app

Create a basic Flutter application based on an existing template, named startup_namer instead of myapp

1. Change the code in lib / main.dart .

Delete all the code in lib / main.dart , replace it with the following code. Display “Hello World” in the middle of the screen.

2. Run the application. You can see both Android and iOS as follows, depending on the device you use.

Observe

• This example creates a Material application. Material is an intuitive design language that comes standard on mobile and web devices. Flutter offers a rich set of Material.
• The main () method uses the arrow symbol (=>). Use arrow symbols for single line functions or methods.
• The StatlessWidget extend application makes the application a widget. In Flutter, almost everything is a widget, including alignment, padding and layout.
• The Scaffold widget, from the Material library, provides a default application bar, title, and body attribute that holds the widget tree for the home screen. Widgets can be quite complex.
• The main task of the widget is to provide a build () method that describes how to display widgets according to other, lower-level gadgets.
• The body of this example includes a Center widget that contains the Text child widget. Widget Center aligns the widget to the center of the screen.

Step 2: Use external package

In this step, you will start using the open package named english_words , containing a few thousand English words most used along with some utility functions.

You can find the english_words package, as well as many other open source packages, on pub.dev .

1. The pubspec file manages assets and dependencies for the Flutter application. In pubspec.yaml , add english_words (3.1.0 or higher) to the list of dependencies:

2. While viewing pubspec in the editor view of Android Studio, click Packages get . This will drag the package into your project. You should see the following in the control panel:

The Packages get implementation also automatically creates a pubspec.lock file with a list of all packages that are pulled into the project and their versions.

3. In lib / main.dart , import the package:

As you type, Android Studio gives you suggestions for libraries to import. It then outputs the gray input string, letting you know that the imported library has not been used (until now).

4. Use English words to create text instead of using “Hello World”:

5. If the application is running, please hot reload to update the running application. Every time you click on hot reload or save the project, you will see a different, randomly chosen word pair in the running application. This is because the compound word created inside the build method, is run whenever MaterialApp requires rendering or when converting Platform in Flutter Inspector.

Step 3: Add Stateful widget

Stateless widgets are immutable, meaning their properties cannot be changed, all values ​​are final.

Stateful widgets are state maintainable state that can change throughout the life of the widget. The implementation of a Stateful widget requires at least two classes: 1) a StatefulWidget class creates an instance of 2) a State class. The StatefulWidget class itself is immutable, but the State class persists throughout the widget’s lifecycle.

In this step, you will add a stateful widget, RandomWords , create its State class, RandomWordsState . You will then use RandomWords as the child within the existing stateless widget MyApp .

1. Create a state class. minimum. Add the following to the bottom of main.dart :

Note the State <RandomWords> declaration . This indicates that we use the same State class for RandomWords . Most of the application and states logic is located here, which maintains the status for the RandomWords widget. This class stores pairs of words that are created, infinitely growing as users scroll and favorite word pairs (in part 2), when users add or remove them from the list by turning on the heart icon.

RandomWordsState depends on the RandomWords class. You will add that next.

2. Add stateful RandomWords widget to main.dart. The RandomWords widget does nothing more than create its State class:

After adding the state class, the IDE will report that the class lacks a build method. Next, you’ll add a basic build method to generate word pairs by moving the code generated from MyApp to RandomWordsState.

3. Add build method to RandomWordsState, as shown below:

4. Remove the code generated from MyApp by making the following changes:

5. Hot reload app. The App will work as before, displaying a compound word whenever you reload or save the project.

Step 4: Create an infinite ListView scroll

In this step, you’ll expand RandomWordsState to create and display a list of compound words. As the user scrolls, the list (displayed in the ListView widget) will grow indefinitely. ListView’s factory builder constructor allows you to build a lazy list view, as required.

1. Add to the list _suggestions RandomWordsState class to save the proposed compound. Also, add a _biggerFont variable to make the font size bigger.

Next, you’ll add the _buildSuggestions () function to the RandomWordsState class. This method will build ListView showing the suggested word match.

The ListView class provides a builder, itemBuilder property , that is the factory builder function and the callback function specified as an anonymous function. The two parameters passed to the function are BuildContext and iterator row, i. The loop starts at 0 and increments each time the function is called once for each proposed word coupling. This model allows the list of suggestions to grow indefinitely as the user scrolls.

2. Add the entire _buildSuggestions function, shown below, into the RandomWordsState class:

The _buildSuggestions function calls _buildRow once for each word pair. This function displays each new folder in ListTile.

3. Add the _buildRow function to RandomWordsState:

4. Update the build method for RandomWordsState to use _buildSuggestions () , instead of calling the word creation library directly. ( Scaffold implements basic Material Design visual layout.)

5. Update the MyApp build method, change the title and set the home to a RandomWords widget:

6. Restart app. The following results:

That’s it part 1 of this app. Part 2 we will add a bit more as follows:

1. More interaction.
2. Add the ability to navigate to a new screen.
3. Change theme colors.

Demo:

Thank you for reading my post