home

Package	Kind	Provides the role	Needs	Choose with
smf_home_flutter	feature	none	a router	-m home

home is the start screen of the app. As generated, it is a welcome to you, the developer of the app: it names the app and lists what to do next. You replace its content with the first screen of your app.

What the screen shows

From the top:

1. A greeting by the time of the day and the name of the app, next to the mark of Say My Frame. The greeting is Good morning before noon, Good afternoon until six in the evening, and Good evening after that.

2. A card that tells that the app is ready. It shows the app as a cell of the periodic table, next to cells that light up one after another.

3. Three next steps, each with the path or the address that it is about:

   Step	What a tap copies
   Make this screen yours	lib/features/home/home_screen.dart
   Add a feature	lib/features/
   Read the docs	doc.saymyframe.com

   A snack bar says what was copied.

4. A last line, Built with Say My Frame.

smf create makes the symbol and the number of the cell from the name of the app. The symbol is the first letter of its first word and the first letter of its second word, or the first two letters of a name of one word. The number is how many letters and digits the name has. For my_app they are Ma and 5, at the top of the file:

lib/features/home/home_screen.dart

/// The name of the app, as the screen shows it.
const _appName = 'My App';

/// The symbol of the app in its cell, as an element of the periodic table
/// has one: the first letters of the first two words of its name, or the
/// first two letters of a name of one word.
const _appSymbol = 'Ma';

/// The number in the cell of the app: how many letters and digits its name
/// has.
const _appNumber = 5;

Colors and fonts	The screen takes its colors and the styles of its texts from the theme of the app, whichever module provides it, so it follows the theme mode. Only the card keeps the colors of Say My Frame in the light and in the dark theme. A path is in the monospaced font of the device.
Motion	When the screen opens, its parts rise in one after another, once, and then nothing moves. So a widget test that waits for the screen with pumpAndSettle() returns.
Less motion	On a device that asks for less motion, the parts are there at once.
Large text and small phones	The screen scrolls. The symbol and the number of the cell keep their size, since the cell is a picture. The path of a step and the snack bar grow to at most one and a half times their size, and take as many lines as they need. A narrow card leaves out the cells that would reach the cell of the app.
Screen readers	A screen reader announces the name of the app and the heading of the steps as headers, and each step as one button. It reads the mark as Say My Frame and passes over the cell of the app.

HomeScreen takes a function now that tells the time, DateTime.now unless a test gives its own, so a test can show each greeting whatever the time of the machine.

What it adds to the app

In the app	What it is
lib/features/home/home_screen.dart	HomeScreen, the screen.
lib/features/home/assets/smf_mark.png	The mark of Say My Frame, an image. The files of the same name in 2.0x/ and 3.0x/ next to it are for the screens with more pixels.

The module declares the image in pubspec.yaml. Flutter finds the other two files next to it, so they have no line of their own:

pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - "lib/features/home/assets/smf_mark.png"

The module adds no package to the app.

It gives the router role one route:

Path	/ of the feature, so the full path is /home
Full name	home.home
Navigation	context.nav.home.home()
Destination	Home, with the home icon, in the main navigation when the app has a layout
Start	The app can start on it

When no other route can start the app, the app opens on /home, and / redirects there. When other routes can start it too, smf create asks which one, or takes it from --start.

The label of the destination and the 14 texts of the screen are texts of the module, in English and in Ukrainian: the three greetings, the two texts of the card, the heading of the steps, a title and a text for each step, Copied, and the last line. In an app with a module that provides the localization, such as gen_l10n, they are texts of the app under names that start with home, from homeLabel to homeFooter, and the screen shows them in the language of the app. Without one, the screen shows them in English.

The guide for coding agents of the app gets a section "Home", which says that the screen is a welcome whose content you replace, and where the image that it shows is declared.

Make the screen yours

Replace the content of lib/features/home/home_screen.dart with the first screen of your app. Keep the class HomeScreen with a const constructor that needs no arguments, since the router creates the screen with const HomeScreen(), and keep the route while the app starts there:

lib/features/home/home_screen.dart

import 'package:flutter/material.dart';

/// The screen that the app starts on.
class HomeScreen extends StatelessWidget {
  /// Creates the screen.
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: const Text('My App')),
    body: const Center(child: Text('The first screen of the app')),
  );
}

Then take out what only the welcome needs:

• Once no screen shows the mark, remove the three files in lib/features/home/assets/ and their line in pubspec.yaml.
• In an app with gen_l10n, remove the texts of the welcome from the ARB files once no code reads them, and run flutter gen-l10n. Keep homeLabel, the label of the destination, which lib/core/layout/destination.dart reads in an app with a layout.

The generated screen has no app bar, and it does not tell the system which icons the status bar needs. The root of the app does that for every screen, from the theme, so a screen of your own without an app bar needs no AnnotatedRegion for them either.

Requirements

As a feature, home requires the router role, whichever module provides it. While go_router is the only module that provides the router, smf create adds go_router by itself. What moves on the screen is the state of the screen itself, so home works with any module that manages state or with none, and it needs no services.

Choosing it

smf create asks which features the app has. To choose it without the question:

smf create my_app -m home