Creating a Flutter App

Understand how to use stateless widgets in different files to create various views.

We'll cover the following

Getting started

In the Introduction to the Flutter Framework lesson, we ran the SPA widget to get the default Flutter counter app. We’ll now modify it to our liking. Let’s start by running the default app. Go ahead and click the “Run” button so that Flutter can build a counter app that increases the value of the number when we press the plus icon.

name: dockertest
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1

environment:
  sdk: '>=2.18.6 <3.0.0'

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
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

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
A default Flutter counter app

After running the app, the Flutter project builds a counter app that increases the value of the number when we click the plus icon. Please take note of this simple counter-app concept, as we’ll be using it to explain a few concepts before we dive into integrating Firebase into the project.

When we open the lib directory, we observe that only one file named main.dart is available, which holds the code of the app. The default widget tree is built using the main() and runApp() functions on lines 3–5. The main() function is the starting point for all Flutter apps, and the runApp() function is used to initialize and run the app. Lines 7–30 give the code for the default tree.

The default widget tree has a single root widget, which is the MaterialApp widget. This widget provides the top-level app structure and styling that is consistent with the Material Design guidelines. The MaterialApp widget has several properties that can be configured in the default app, such as:

  • title

  • home

  • them

The home property is set to a Scaffold widget, which is a Material Design layout structure that provides a default:

  • appBar

  • body

  • Floating action button

We’re going to clear the homepage class in the process of removing the default Scaffold widget, so we’ll build our own.

Views

In the context of Flutter development, views refer to the individual screens or pages within the application. Each view represents a distinct UI and functionality, contributing to the overall structure of the application.

The homepage view

To create a homepage view for our app, we’ll create a new file named home.dart in the lib folder of our project.

In this file, we create an empty view by adding the following code to it.

Press + to interact
import 'package:flutter/material.dart';



class Home extends StatelessWidget {

  const Home({super.key});



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title:const Text("homepage") ,

      ),

      body: Container(child:const Center(child: Text("home"),),),

    );

  }

}

Now that we have our home page view ready, we’ll create another view.

The profilepage view

For this page, we repeat the same process as we did before creating the same empty view with a slight change in appBar and title on lines 10–11.

The final code for our view looks like this:

Press + to interact
import 'package:flutter/material.dart';





class Profile extends StatelessWidget {

  const Profile({super.key});



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title:const Text("profilepage") ,

      ),

      body: Container(child:const Center(child: Text("profile"),),),

    );

  }

}

View

To see what we’ve created, click the “Run” button in the SPA widget below:

import 'package:flutter/material.dart';

class Profile extends StatelessWidget {
  const Profile({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text("profilepage") ,
      ),
      body: Container(child:const Center(child: Text("profile"),),),
    );
  }
}
The two updated views

Note: To change the view, change line 20 to home: const Profile(),, then click “Run” again, and the view will be updated to the profile page.

So what did we do? We created two stateless widgets: home and profile. Just like that, we’ve completed the first step in creating our views.