How to start with an app template in Flutter 2.5

We’ve already seen that Flutter 2.5 has brought many changes for the mobile app developers and peers. However, in that article we’ve not discussed how we can start with an app template in Flutter 2.5.

Certainly, Flutter 2.5 includes performance enhancements, DevTool updates, new Material You support, and with those changes also comes another great feature.

In addition, we can start with an app template in Flutter 2.5.

In normal default way, we start with this command to create a flutter app:

flutter create new_app

But, to start with an app template we change this command in the following way:

flutter create -t skeleton new_flutter_template 

To see the full code please visit the respective GitHub repository.

As we have expected, this new app template has added many features that we can tweak quite easily. However, this article will give a gentle introduction. Not more than that.

The pubspec.yaml has a skeleton code. And it comes with many more features. If we take a look at the file, we’ll understand how it differs from the default Flutter application pubspec.yaml file.

name: new_flutter_template
description: A new Flutter project.

# Prevent accidental publishing to pub.dev.
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

flutter:
  uses-material-design: true

  # Enable generation of localized Strings from arb files.
  generate: true

  assets:
    # Add assets from the images directory to the application.
    - assets/images/

We’ll discuss the localization part in the next tutorial. So stay tuned and keep reading the articles.

Before that we take a look when we run the app.

If we click any Sample item it uses the static routename we’ve seen before. And takes us to the detail page.

As a beginner you may find the folder structure difficult to follow.

Why?

Because, the item class and view pages come from the “/lib/src/sample_feature/” folder. Subsequently, three items have been passed through the class constructor.

First we have a simple sample item class:

class SampleItem {
  const SampleItem(this.id);

  final int id;
}

And after that we have passed three ids through class constructor as list items.

class SampleItemListView extends StatelessWidget {
  const SampleItemListView({
    Key? key,
    this.items = const [SampleItem(1), SampleItem(2), SampleItem(3)],
  }) : super(key: key);

  static const routeName = '/';

  final List<SampleItem> items;
...
// code is incomplete for brevity

Then we use the ListView.builder to get three items displayed on the home page.

What is the latest version of Flutter?

As we can see the latest version of Flutter as on 8th September, 2021, is Flutter 2.5 stable release.

And, we’re discussing the features of the latest version. One of the great features is, certainly, this app template.

If we go through the detail page, there is nothing new.

import 'package:flutter/material.dart';

/// Displays detailed information about a SampleItem.
class SampleItemDetailsView extends StatelessWidget {
  const SampleItemDetailsView({Key? key}) : super(key: key);

  static const routeName = '/sample_item';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Item Details'),
      ),
      body: const Center(
        child: Text('More Information Here'),
      ),
    );
  }
}

There is a static constant routename, and that has been defined in the Material App page.

And we’ve set the route or navigation in the “app.dart” file.

onGenerateRoute: (RouteSettings routeSettings) {
            return MaterialPageRoute<void>(
              settings: routeSettings,
              builder: (BuildContext context) {
                switch (routeSettings.name) {
                  case SettingsView.routeName:
                    return SettingsView(controller: settingsController);
                  case SampleItemDetailsView.routeName:
                    return const SampleItemDetailsView();
                  case SampleItemListView.routeName:
                  default:
                    return const SampleItemListView();
                }
              },
            );
          },
...
// code is incomplete for brevity

There are a lot of other things that we should know about this app template in Flutter 2.5.

In the next article, we’ll discuss settings controller and settings service. We’ll also see how we can use localization feature with this app template in Flutter 2.5.

So stay tuned and keep reading about Flutter new features.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter