Swiss Army Component

Every time a mobile developer starts a new Flutter app, they end up writing the exact same code from scratch: phone number fields with country flags, 6-digit SMS login boxes, light and dark themes, and form error checkers. Beyond the visual components, installing packages and setting them up usually requires digging through documentation, editing configuration files by hand, and troubleshooting dependency errors.

To fix this, I built and published Swiss Army Component an open-source Flutter UI library and developer toolkit available on pub.dev, along with its own command-line tool called sac.

Here is an understanding of what was broken, how I fixed it, and the results.

§Setting Up New Apps with One Command (sac)

Adding a UI library to a Flutter app usually means opening pubspec.yaml, finding the right version numbers, pasting them in without messing up indentation, and checking whether your Flutter version is supported. When developers make mistakes during setup, the app fails to build.

To make setup fast and error-free:

• ›I built a command-line tool called sac that developers can run right in their terminal.
• ›I made sac install automatically read the project files and add the right package dependencies safely without touching anything else.
• ›I built sac doctor to scan the developer's computer, check their Flutter setup, and confirm that everything is ready before they run the app.
• ›I added sac examples so engineers can view and copy ready-made code snippets directly in their terminal without leaving their editor.

Because of this, getting started takes seconds instead of half an hour of manual configuration.

§Making Light and Dark Modes Easy to Switch

Most UI packages give you hardcoded colors that look good in light mode but break or look washed out as soon as a user turns on dark mode. Re-styling every single button, text field, and card by hand takes days of repetitive work.

To give developers complete control over colors:

• ›I designed an easy theme configuration system with over 50 clear styling settings.
• ›I separated shared traits (like rounded corners and font sizes) from mode-specific colors, so changing a background color in dark mode never breaks your light mode layout.
• ›I created one-line theme builders (SACTheme.light() and SACTheme.dark()) that automatically apply the right colors to cards, dialogs, bottom sheets, and navigation bars.

This lets developers give their apps a polished look in both light and dark modes in minutes instead of days.

§Phone Numbers and One-Time Codes That Just Work

Login screens are where users drop off the most. If a phone number box doesn't recognize their country code, or if typing an extra "0" at the start makes the SMS fail, the user gets stuck and uninstalls the app.

To make mobile sign-ins reliable:

• ›I built a phone input field with built-in country flags and international dial codes that updates automatically as the user types.
• ›I added automatic zero-stripping so if someone enters 080... instead of +234 80..., the app cleans it up instantly before sending the verification text.
• ›I built a smooth 6-digit OTP passcode box with automatic keyboard handling and clear cursor indicators so typing one-time codes feels fast and natural.
• ›I added ready-to-use Google and Apple sign-in buttons that follow official brand guidelines.

This prevents failed login attempts and helps users get through sign-up without confusion.

§Stopping Form Errors Before They Reach the Server

When users fill out forms, sending bad data (like a broken email address or a weak password) to the backend wastes server resources and forces the user to wait for a slow error message to return.

To catch mistakes immediately on the phone:

• ›I built a reusable validation toolkit that checks emails, passwords, names, and phone numbers in real time as the user types.
• ›I created clear error messages that explain exactly what needs fixing before the submit button is tapped.
• ›I added short helper functions for spacing so developers don't have to write long, messy layout code just to add space between form fields.

This keeps user forms clean, reduces unnecessary server traffic, and gives people instant visual feedback.

§Reliable App Bars and Headers Out of the Box

Flutter's default app bar requires a lot of repetitive code if you want gradients, collapsible search bars, or tabs. Developers often copy and paste custom app bar code across screens, which makes fixing header bugs difficult.

To make top headers simple:

• ›I built a custom app bar widget that supports smooth gradient backgrounds and back buttons with a single line of code.
• ›I created a search header that automatically waits for the user to finish typing before filtering results, keeping the screen fast and responsive.
• ›I built a collapsible sliver header that shrinks smoothly as the user scrolls down long lists.

This means any screen can have a custom, branded header without writing custom scroll physics from scratch.

§Writing Clean Code That Passes Every Check

Publishing an open-source package means developers around the world depend on it in production. If a package has warnings, slow performance, or broken updates, teams will not trust it.

To keep the library dependable:

• ›I strictly enforced Flutter's highest code quality rules, keeping the entire codebase at zero analyzer warnings.
• ›I set up automated release tracking so every new version has clear notes explaining what was added or improved.
• ›I published a full working example app that shows every component in action, making it easy for any engineer to test components before using them.

Because of this, developers can drop the package into their production apps with confidence that it will stay stable and maintainable.