Guides
From copying your first screen to wiring it to a real backend.
Start here
Getting started: add your first screen
How to get a screen from fluttertemplates.dev into your Flutter project, show it, and connect it to your own code. Written for developers who are new to Flutter.
Using the CLI
Find screens from the terminal, copy them into your project with their packages, and give AI coding agents access to the library through the MCP server.
Look and layout
Theme any screen with your brand
Make library screens match your brand from one file. Color schemes, light and dark, fonts, component shapes, custom tokens, and how to fix hard-coded colors.
Make a screen responsive for tablet and web
Take phone-first library screens to tablet and desktop. Breakpoints, a bottom bar that becomes a rail, grids that fit any width, two-pane layouts, and web behaviour.
Auth
Supabase email login wired to a login screen
Connect the Login Screen to Supabase Auth. Email sign-in, sign-up with confirmation, password reset by deep link, session persistence, and error handling.
Firebase Authentication wired to a sign-in screen
Connect the Sign In Form to Firebase Auth. Email sign-in and sign-up, email verification, password reset, a working Remember me on web, and current error codes.
go_router auth guards and deep links
Protect routes with go_router, send people back to the page they asked for after sign-in, handle the cold-start auth check, and set up deep links on Android, iOS, and web.
State
Riverpod with a real form: validation, loading, errors
Turn the Sign Up screen into a working form with Riverpod 3. Field validation, a loading state, double-submit protection, and server errors shown on the right field.
Bloc for the same form
Build the Sign Up screen with flutter_bloc. Typed events and states, dropped double submits, server errors on the right field, and tests with bloc_test.