What is the latest version of Flutter?

The latest version of Flutter is 2.5 release. We have already seen how they work. Goggle’s Flutter 2.5 and Dart 2.14, what’s new and how to start with an app template in Flutter.

In this series of articles we examine what is new in the latest version of Flutter 2.5. The app template generates a skeleton of flutter app, where we have found a completely new feature – settings.

We’ll see how it works in a minute. For full code snippet please visit the respective GitHub repository.

In the new folder structure, we find a new file:

analysis_options.yaml
# The following line activates a set of recommended lints for Flutter apps,
# packages, and plugins designed to encourage good coding practices.
include: package:flutter_lints/flutter.yaml

Besides, the pubspec.yaml file has added the assets from the images directory to the application.

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

There are many more other features. However, let’s concentrate on settings only for this article.

In the main dart file the skeleton sets the settings controller that automatically adds an image on the top right section of the app bar.

import 'package:flutter/material.dart';

import 'src/app.dart';
import 'src/settings/settings_controller.dart';
import 'src/settings/settings_service.dart';

void main() async {
  
  final settingsController = SettingsController(SettingsService());

  
  await settingsController.loadSettings();

  
  runApp(MyApp(settingsController: settingsController));
}

As we can see, from the very beginning settings controller plays a big role in the app building process. Which was absent in the previous version.

As a result we find the settings version on the app bar top right section.

If we click the settings icon what happens?

Let’s see in the following image.

Now we can change this to the Dark theme.

Is flutter only for UI?

The answer is NO! Flutter is never intended to only design and build an awesome app that can simultaneously run on Android and iOS from a single codebase.

Flutter can manage state management most efficiently and with the help of Dart programming language, we can build any kind of app that takes help from the backend.

The latest version skeleton main dart file imports app dart file where we define the Material page route.

/// The Widget that configures your application.
class MyApp extends StatelessWidget {
  const MyApp({
    Key? key,
    required this.settingsController,
  }) : super(key: key);

  final SettingsController settingsController;

  @override
  Widget build(BuildContext context) {
    
    return AnimatedBuilder(
      animation: settingsController,
      builder: (BuildContext context, Widget? child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          
          restorationScopeId: 'app',
          
          localizationsDelegates: const [
            AppLocalizations.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
          ],
          supportedLocales: const [
            Locale('en', ''), // English, no country code
          ],

          
          onGenerateTitle: (BuildContext context) =>
              AppLocalizations.of(context)!.appTitle,          
          
          theme: ThemeData(),
          darkTheme: ThemeData.dark(),
          themeMode: settingsController.themeMode,

          
          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();
                }
              },
            );
          },
        );
      },
    );
  }
}

The question is why we wrap the MaterialApp with the AnimatedBuilder widget?

The reason is, the AnimatedBuilder listens to the SettingsController for changes. Because of that, we can change the theme mode and provides a temporary state to that particular theme.

If we take a look at the SettingsController code snippet it will be clear in a minute.

class SettingsController with ChangeNotifier {
  SettingsController(this._settingsService);
 
  final SettingsService _settingsService;
  
  late ThemeMode _themeMode;

  
  ThemeMode get themeMode => _themeMode;

  
  Future<void> loadSettings() async {
    _themeMode = await _settingsService.themeMode();
    
    notifyListeners();
  }
  
  Future<void> updateThemeMode(ThemeMode? newThemeMode) async {
    if (newThemeMode == null) return;
    
    if (newThemeMode == _themeMode) return;
    
    _themeMode = newThemeMode;
    
    notifyListeners();
    
    await _settingsService.updateThemeMode(newThemeMode);
  }
}

Firstly, SettingsController is a class that many widgets can interact with. Moreover, widgets can listen to any changes. The SettingsController uses mixins to use ChangeNotifier functionalities to notify listeners.

Secondly, we find two methods load settings and update theme mode. The first one helps to load user’s settings from settings service. And finally inform listeners that a change has occurred.

On the other hand, the update theme mode method updates and persists the theme mode based on the user’s selection.

Finally, after informing listeners this method persists the change to a local database or internet. While doing so, it uses the SettingsService class.

Not only settings, but flutter latest version 2.5 that has been released on 8th September, 2021 brings in more features.

Localization is one of them. In the next article, we’ll discuss that. So stay tuned.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter