Flutter first application: How to create a simple app to understand the basics

We all know that Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. In other words, Flutter first application is a collection of widgets, everything in the Flutter is a widget. 

Flutter first application tutorial
Flutter first application tutorial

Basically, this information is enough for anyone to get their hands dirty with Flutter. Yet, some will not be able to create the app using Flutter as the basic one. So now, we would like to provide you a guide to creating your Flutter first application. If you are familiar with object-oriented programming, and concepts such as variables, loops, and conditionals, you can complete this tutorial.

Get the starter web app

You need two pieces of software to complete this lab – the Flutter SDK and an editor. You can run the codelab by using any of the following devices:

  • A physical Android or iOS device connected to your computer and set to developer mode
  • The iOS simulator (requires installing Xcode tools)
  • The Android Emulator (requires setup in Android Studio)
  • A browser (Chrome is required for debugging)
Get the starter web Flutter first application
Get the starter web app

If you want to compile your Flutter first application to run on the web, you must enable this feature (which is currently in beta). To enable web support, use the following instructions:

 $ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

You need only run the config command once. After enabling web support, every Flutter first application you create also compiles for the web. In your IDE under the devices pulldown, or at the command line using flutter devices, you should now see Chrome and Web server listed. The Chrome device automatically starts Chrome. 

Step 1: Create the starter Flutter first application

Create a simple, templated Flutter app by using the instructions in Create the app. Enter startup_namer (instead of flutter_app) as the project name. You’ll modify the starter app to create the finished app. You’ll mostly edit lib/main.dart, where the Dart code lives. You should replace the contents of lib/main.dart. Then, delete all of the code from lib/main.dart and replace it with the following code, which displays “Hello World” in the center of the screen.

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

Step 2: Use an external package in creating Flutter first application

In this step, you’ll start using an open-source package named english_words, which contains a few thousand of the most-used English words, plus some utility functions. You can find the english_words package, as well as many other open-source packages, at pub.dev. While viewing the pubspec in Android Studio’s editor view, click Packages get. This pulls the package into your project. You should see the following in the console:

 flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0

As you type, Android Studio gives you suggestions for libraries in Flutter first application to import. It then renders the import string in gray, letting you know that the imported library is unused (so far). Next, you’ll use the english_words package to generate the text instead of using “Hello World”.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random(); // Add this line.
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          //child: Text('Hello World'),   // Replace this text...
          child: Text(wordPair.asPascalCase),  // With this text.
        ),
      ),
    );
  }
}

Step 3: Add a stateful Flutter first application widget

Stateful widgets maintain state that might change during the lifetime of the widget. Implementing a stateful widget requires at least two classes: 1) a StatefulWidget that creates an instance of a State class. The StatefulWidget object is, itself, immutable and can be thrown away and regenerated, but the State object persists over the lifetime of the widget. 

To do this, create a boilerplate code for a stateful widget. Then, enter RandomWords as the name of your widget. As you can see in the code below, the RandomWords widget does little else besides creating its State class. Once you’ve entered RandomWords as the name of the stateful widget, the IDE automatically updates the accompanying State class, naming it _RandomWordState. It should look like this:

 class RandomWords extends StatefulWidget {
  @override
  _RandomWordsState createState() => _RandomWordsState();
}

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

Then, make some changes for your Flutter first application:

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();  // DELETE

    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          //child: Text(wordPair.asPascalCase), // REPLACE with... 
          child: RandomWords(),                 // ...this line
        ),
      ),
    );
  }
}

Step 4. Create an infinite scrolling ListView

In this step, you’ll expand _RandomWordsState to generate and display a list of word pairings. As the user scrolls, the list (displayed in a ListView widget) grows infinitely. The builder factory constructor in ListView allows you to lazily build a list view on demand. Your Flutter first application’s set of code should look like this:

 class _RandomWordsState extends State<RandomWords> {
  final List<WordPair> _suggestions = <WordPair>[];            // NEW
  final TextStyle _biggerFont = const TextStyle(fontSize: 18); // NEW
  ...
}

Next, you’ll add a _buildSuggestions() function to the _RandomWordsState class. This method builds the ListView that displays the suggested word pairing. The ListView class provides a builder property, itemBuilder, and callback function specified as an anonymous function. Two parameters are passed to the function – the BuildContext and the row iterator, i. This model of Flutter first application allows the suggestion list to continue growing as the user scrolls.

Final words

That should be it! Here is the complete tutorial you need to know when considering building a Flutter first application to understand the basics of this app. All in all, Flutter is booming as a cross-platform mobile application development framework, and developers are keen to get started with Flutter. So, we do hope this guide acts as a great kick-off point for your first Flutter project.

We – ArrowHiTech is proud to be one of the most well-established outsourcing companies all around the world. That is to say, with over 12 years of experience, we can provide the best software development services for your eCommerce business. So, you can accelerate your next app project with our customized flutter app development services

ArrowHiTech services

If you have any questions, don’t hesitate to contact us !

Tags

Share