Beyond the Counter: Exploring Flutter App Templates
Flutter’s default starter app is well-known: the counter app. But in a vast ecosystem, developers seek more specialized starter templates tailored to their project’s nature. What are the options beyond the counter app?
In this article, we’ll explore the power of custom templates designed to jumpstart your Flutter projects with style.
Why do we need app templates?
When I worked on my first projects, I didn’t have anyone to mentor or guide me on how to build clean, high-quality code — having access to app templates at that time would have been a game-changer, accelerating my learning curve and saving me countless hours of trial and error.
- For both mobile app development agencies and indie developers, using templates (often custom-created within a team) taps into in-house expertise, helping to share best practices across projects.
- These tools save engineers significant time, which also translates to cost savings!
- Templates usually include built-in, common features like user authentication or navigation, streamlining the development process.
- Moreover, relying on templates means benefiting from tried-and-true methods that enhance code quality and reduce bugs.
So, the real question is, why not use an app template to kickstart your next project? ;)
1. The Beloved Counter App
If you are a Flutter developer of any level, you probably know this template really well. Every new project starts from it by default and you get to modify it to continue with your own code. It’s a simple and convenient template if you want to start a project from scratch.
Complexity: ⭐ ️Beginner
State management: low-level setState
Getting started:
flutter create counter_exampleWhat’s included:
One-screen app with a number and a floating action button. When the user taps the button, the number increments by one.
Useful resources:
Write your first Flutter app codelab
2. The Versatile Skeleton App
Complexity: ⭐ ⭐ ️Intermediate
State management: ChangeNotifier
Getting started:
flutter create -t skeleton skeleton_exampleWhat’s included:
- List view main screen
- Settings UI with theme selection
- Localization with default English
Introduced in 2021, the Skeleton template aimed to provide intermediate users with a more complete app. It features several widgets in separate files, app-wide state management, navigation, and basic state restoration.
Let’s have a look at the source file structure.
Localization Files
The first folder centers around localization. While English is the default language, the pre-installed flutter_localizations package allows for hassle-free addition of multiple languages. To incorporate a new language, simply add a .arb file with the respective translation, and configure the supported locales in app.dart.
List Feature
The subsequent folder hosts list related files. The sample feature displays a list of clickable items — each leading to a distinct page. This can be repurposed for a variety of app types, whether you’re building a to-do list, a fitness tracker, or an e-commerce catalog.
State Restoration and Navigation
Should an app instance be terminated while running in the background, restorablePushNamed is used to restore the navigation stack. Route names are mapped to their corresponding pages through the onGenerateRoute property.
App Settings
The final folder targets app settings. We have a settings view — a dedicated page where users can modify the app theme. A placeholder service is included but the implementation is left up to you, you will only see a starter class here. Finally, a SettingsController integrates with ChangeNotifier to effectively manage the app's state.
Slightly Confusing “Animated” Builder
The use of AnimatedBuilder in the main app ensures that the UI updates only when necessary—like during a theme switch. Contrary to its name, the tool isn’t employed for animations; it's rather a dynamic way to update specific UI elements in response to setting changes.
Nice-to-haves
Setting itself apart from the basic Counter template, the Skeleton comes equipped with resolution-aware image assets and a preliminary analysis_options.yaml file, enabling you to implement your own linting rules.
In Summary
The Skeleton template offers a solid, structured foundation that’s both functional and versatile. It’s an excellent follow-up to the counter app, particularly for those curious about alternative state management approaches beyond basic setState.
Useful resources:
Flutter: Deep dive into the new `skeleton` app template
Starting a new app from the Skeleton template on YouTube
3. Going Advanced with Flutter News Toolkit
Complexity: ⭐ ⭐ ⭐ ️Advanced
State management: BLoC
Getting started:
dart pub global activate mason_cli
dart pub global activate dart_frog_climason add -g flutter_news_template
mason make flutter_news_template? What is the user-facing application name? (Daily Globe) News Example
? What is the application bundle identifier? (com.google.news.template) com.google.news.template
? Who are the code owners? (e.g. @user1 @user2) @username
? What flavors do you want your application to include?
❯ ◉ development
◯ integration
◯ staging
? What flavors do you want your application to include? [development, production]- Create and configure Firebase project in the Firebase Console
- Run the API server locally:
dart pub global activate dart_frog_cli
cd api
dart pub get
dart_frog devWhat’s included:
- A fully working news app UI, complete with feeds and search
- Monetization with ads and in-app purchases
- Settings UI for notifications, login, and ads tracking
- Localization with default English
- Analytics features
- User onboarding functionality
- Registration and login options
- Deeplinking support
Announced in 2023, Google’s News Toolkit is the most advanced official Flutter template available, as of writing this. Created as part of the Google News Initiative, this toolkit accelerates the development of news apps. It claims to cut the development time up to 80% compared to building separate apps for iOS and Android.
You might think, “Why should I care about news apps if I am not planning to release one?” Well, this toolkit isn’t just for news apps! It comes packed with features useful for various kinds of customer-focused apps.
Just as with the Skeleton template, this toolkit also utilizes a feature-based folder structure. Let’s walk through it from top to bottom. To get the app up and running, you’ll need to set up a Firebase project and run an API server locally.
State Management: The BLoC Pattern
The toolkit adopts the BLoC (Business Logic Component) pattern for state management. Although this may (and will) appear complex for those just starting out with Flutter, it serves as an excellent learning resource for anyone interested in mastering BLoC.
Ad Support
The template seamlessly integrates with Google Ad Manager or AdMob for advertisement display within the app. All you need to do is link your Google AdMob apps to their corresponding Firebase apps and specify your app IDs.
Analytics Engine
The analytics BLoC captures user interactions and funnels the data to the appropriate analytics platforms, offering insights into user behavior and app performance.
Core App Functionality
The main app class controls a variety of components and BLoCs — ranging from user data repositories to news feeds and notifications. It also defines the app’s aesthetics, language options, and navigational flow.
Engaging Content Displays
The ArticlePage is designed to display articles in different layouts, depending on whether they come with videos. Features like pop-up ads, share buttons, and subscribe prompts for non-subscribers are also integrated.
Categories Management
Widgets like CategoriesTabBar and CategoryTab enable a user-friendly way to browse through various news categories.
News Feeds
The FeedView and FeedBloc widgets work in tandem to manage and display news feeds, driven by the categories chosen by the user.
User Interface
The HomeView handles the visual aspects and keeps an eye on changes in login status, while HomeCubit is responsible for tab selection logic. Additionally, the IndexedStack toggles between feed and search views seamlessly.
Multilingual Support
The toolkit is built with internationalization in mind, utilizing Flutter’s gen_l10n package. It simplifies translating the app into different languages.
Authentication
A comprehensive set of login options is available, including Google, Apple, Facebook, Twitter, and traditional email-based logins.
Notifications and Subscriptions
Users can customize their notification preferences and opt for in-app subscriptions, ensuring a personalized experience and app monetization.
Utility Folders
- Navigation: Controls the app’s navigation features, including the main drawer and bottom navigation bar.
- Network Error: Manages network issues through a specialized NetworkError widget.
- Newsletter: Allows for newsletter sign-ups with a streamlined user interface.
- Terms of Service: Presents necessary legal information in a straightforward manner.
- Theme Selector: Enables users to switch between light and dark modes.
- User Profile: Manages user settings and profiles within the app.
Package Folders
- ads_consent_client: Manages user choices about ads.
- analytics_repository: Tracks how users interact with the app.
- app_ui: This is the style guide for the app. It makes sure everything looks the same.
- article_repository: Handles all the data about articles.
- authentication_client: Manages how users sign in.
- deep_link_client: Handles deep links in the app.
- email_launcher: Helps in opening email apps on Android and iOS.
- form_inputs: Checks if the email you put in is valid.
- in_app_purchase_repository: Handles buying stuff within the app.
- news_block_ui: Contains specialized UI elements for a news app.
- news_repository: Manages all news-related data.
- notifications_client: Manages how notifications work.
- notifications_repository: Handles notification settings.
- package_info_client: Gets data about the app package.
- permission_client: Manages device permissions.
- purchase_client: Handles in-app purchases.
- share_launcher: Lets you share content from the app.
- storage: Manages local storage on your device.
- user_repository: Takes care of user-related tasks.
Testing
The template comes with full test coverage for all features, ensuring that each component works as expected and making it easier to maintain and update the code in the long run.
In Summary
The toolkit is a comprehensive, world-class template that helps developers create large-scale, customer-oriented apps. While it might seem overwhelming for beginners, each feature and folder serves a purpose, contributing to a powerful, efficient, and user-centric mobile application. Even if you don’t need all of its features in your app, you can use it as a benchmark for industry-standard implementation of different features.
Useful resources:
Game development is not quite the same as app development. There are things like leaderboards, in-game currencies, and real-time multiplayer features that don’t usually show up in your average to-do list app.
4. Casual Games Toolkit
Complexity: ⭐ ⭐ ️⭐ ️Advanced
Repo: https://github.com/flutter/samples/tree/main/game_template
State management: provider
Getting started:
git init casual_example
cd casual_example
git remote add origin -f https://github.com/flutter/samples.git
git config core.sparseCheckout true
echo "game_template/*" > .git/info/sparse-checkout
git pull origin mainWhat’s included:
- Casual game UI without the actual gameplay part
- Monetization with ads and in-app purchases
- Settings UI for sounds and ad removal
- Game sounds
- Leaderboards and achievements
Developed by Filip Hracek and announced at Google I/O 2022, Casual Games Toolkit comes with all the basics you’d need for a casual game skeleton, including a main menu, settings page, and sound support.
Ad Support
The ads/ folder in this toolkit is a dedicated hub for ad management, making use of Google's Mobile Ads. This streamlines the process of ad initialization, preloading, and retrieval, resulting in a smoother ad experience for end-users.
Lifecycle Management
The AppLifecycleObserver class is your go-to for tracking the app's different stages, like when it's active or in the background. It's built on top of StatefulWidget and WidgetsBindingObserver, using a ValueNotifier to alert other parts of the app about these state changes. It's especially useful for pausing and resuming tasks, such as muting and unmuting audio.
Audio Experience
The AudioController class in the audio/ directory ensures a sound experience. It handles both background music and sound effects, adapting to user settings and application lifecycle events. Moreover, it enables the simultaneous playback of multiple sound effects.
Game State Management
Within the game’s architecture, the LevelState class serves as a straightforward game state manager. By extending ChangeNotifier, it manages a ‘progress’ variable that simulates gameplay. Additionally, it features an ‘onWin’ callback for predefined goals.
Leaderboards & Achievements
The game_services/ directory contains the GamesServicesController class. This offers a façade over the package:games_services and facilitates user achievement awards and leaderboard displays.
In-App Purchases
Most game devs aim to monetize their projects. Managing in-app purchases can be complex, but the InAppPurchaseController in the in_app_purchase/ directory simplifies the entire lifecycle. From initiating to restoring purchases, this class has you covered.
Level Selection
The LevelSelectionScreen class combines UI design, user interaction, and audio feedback. It facilitates an engaging player experience by allowing seamless navigation through levels.
User Settings
The SettingsScreen offers toggles for sound effects and music, ad removal options, and a reset function for player progress.
Custom Styling
The style directory comprises miscellaneous style-related files like color palette constants, making it easier to give your game a unique look and feel. You can also find a fun Confetti widget here!
Celebrating The Wins
A game isn’t complete without its victories. The WinGameScreen class is a stateless widget designed to display a win screen, complete with scores and time.
Core App Functionality
Lastly, the main.dart file employs dependency injection for routing and state management, thus ensuring that all parts of your app work in harmony.
Testing
The toolkit comes with one basic smoke test for verifying fundamental functionalities, leaving room for more extensive, tailored testing strategies.
UPDATE: Flutter announced significant updates to the Flutter Casual Games Toolkit in the Flutter 3.16 release. Be sure to check out the new game templates and developer resources that have been added!
In Summary
The Flutter Casual Games Toolkit offers a balanced mix of technical efficiency and practical use. It’s a great tool for casual game development, letting you focus on what’s most important — creating a game that connects with your audience.
Useful resources:
Building your next casual game with Flutter
Tic-Tac-Toe game source code
Announcing the Flutter Casual Games Toolkit
Quick start to building a game in Flutter on YouTube
5. Very Good Flame Game
Complexity: ⭐ ⭐ ️⭐ ️Advanced
Repo: https://github.com/VeryGoodOpenSource/very_good_flame_game
State management: BLoC
Getting started:
dart pub global activate mason_cli
mason add -g very_good_flame_game
mason make very_good_flame_gameWhat’s included:
- Minimal game UI with an example gameplay
- Flame engine setup with example entity and behavior
- Loading screen
- 100% test coverage
Out of the 5 starter apps that I’m covering in my article, this template stands out as different. Unlike the previous ones, it’s not an officially announced Flutter template. Unveiled in November 2022, it was developed by Very Good Ventures — a world-class Flutter app consultancy you’ve likely heard of. In fact, VGV has produced a News Toolkit template for Google, which we’ve already discussed. So, I believe their game template is worth mentioning, even though it’s not a sanctioned Flutter starter app.
Visual Presentation
The app/view folder contains App and AppView StatelessWidgets. App initializes resources and sets up MultiBlocProvider. AppView configures MaterialApp, handling theme, localization, and initial page. It shapes your game’s look and feel.
Modular Gameplay Components
The game/components folder houses modular parts like CounterComponent, a PositionComponent in VeryGoodFlameGame. It displays and updates the game counter using TextComponent, syncing with game state. Components manage game elements and behaviors.
Reactive Audio Management
The game/cubit folder focuses on audio state management through AudioCubit, built on the Cubit library. AudioState tracks volume levels.
Unicorn Entity
The game/entities/unicorn file contains the Unicorn class, a PositionedEntity. It handles the unicorn’s behaviors, size, and animations using TappingBehavior and SpriteAnimation. Methods like resetAnimation and playAnimation manage animation states. The file controls how the unicorn looks, interacts, and animates in the game.
Tap Responses
The game/entities/unicorn/behaviours folder specializes in the unicorn's reactions to user taps via TappingBehavior. It extends TappableBehavior and customizes tap responses—updating the counter, triggering animations, and playing sound.
User Interface
The game/view folder contains GamePage and GameView classes for UI setup. GamePage initializes AudioCubit and serves as the game’s entry point. GameView, a StatefulWidget, handles visuals and audio, including background music and volume. It renders the GameWidget, the core of game visuals. This folder manages the game’s visual presentation and interactivity.
Game Logic Hub
The game/ folder features the VeryGoodFlameGame class — the game’s architecture backbone, adding entities like CounterComponent and Unicorn. It sets global attributes like background color and camera zoom, and manages localization and audio effects.
Auto-Generated Assets
The gen/ folder holds auto-generated code for asset management. It offers easy access to audio, images, and licenses. Using constructs like Assets.audio.background directs you to specific files, reducing errors.
Localization
The l10n/ folder houses localization files and extensions. AppLocalizationsX on BuildContext enables shorthand localization access via context.l10n. It manages text strings in JSON for various UI elements, supporting placeholders and plural forms. For instance, counterText varies based on unicorn taps.
Loading Page
LoadingPage is a StatefulWidget that listens to PreloadCubit state. It navigates to TitlePage when preloading finishes, showing a loading bar and status via _LoadingInternal. _LoadingInternal uses BlocBuilder to react to PreloadCubit and displays an AnimatedProgressBar and dynamic loading message from l10n.
Title Page
TitlePage is a StatelessWidget with a localized AppBar and a body featuring TitleView. TitleView contains an ElevatedButton that, when pressed, navigates to GamePage using Navigator.pushReplacement.
Initial Setup
The bootstrap.dart file handles initial setup — runApp starts the app with the given builder function.
Flavors
The game has flavor support. For example, in main_production.dart, the bootstrap function from bootstrap.dart initializes the app. The App widget from app/app.dart serves as the app's entry point. Other flavor files may follow this pattern but could differ in configurations based on the environment.
Testing
The template offers complete testing support for all its functionalities. This not only verifies that each module operates correctly but also simplifies future code maintenance and updates.
In Summary
The Very Good Flame Game template is not just a basic template; it’s a comprehensive yet very lightweight starter app for game development. It covers everything from visual presentation to game logic, giving you more time to focus on crafting an immersive gaming experience. With Flame, you can build a wide variety of 2d games, including platformers, puzzle games, arcade games, and more.
Useful resources:
Wrapping Up
We have looked at some great Flutter templates today. How do you choose the right one?
Well, the game templates are obviously tailored for game dev needs, so check those out when starting your next game project. If you want in-app purchases and advertisements, News and Casual Games toolkits have you covered. Want to start lightweight and build your own state management approach? Try Skeleton. Are you a fan of the BLoC library and full test coverage? Both News Toolkit and Very Good Flame Game have what you need.
No matter which one you choose, all are great for saving time and launching your next Flutter project faster!
