Flutter. SteamUI — the package to design old-style games

What is steam_ui?

It’s a UI library that gives you widgets styled exactly like the classic Steam user interface from back in the day. You get buttons, text fields, checkboxes, sliders, all that stuff, but with that unmistakable early-2000s gaming platform vibe. The package is still a work in progress according to the author, but it’s already got most of what you’d need for a full app.

If you are a member, please continue; **otherwise, read the full story here.**

Setting it up

Installation is straightforward

flutter pub add steam_ui

Then in our MaterialApp, we apply the Steam theme and are done.

import 'package:steam_ui/steam_ui.dart';
MaterialApp(
  theme: flutterSteamTheme(), //it is a function call
);

That’s it. Now all our widgets can use that retro Steam styling.

Here is an official example:

You can find the code here.

What we get

The package comes with a decent collection of widgets. We’ve got SteamContainerfor those signature beveled boxes, SteamButtonand SteamIconButtonfor clickable elements, SteamTextFieldfor inputs, SteamDropdownfor selections.

There are also progress indicators like SteamMeterand SteamProgressBar, form controls like SteamCheckboxand SteamRadio (with their tile variants), SteamSlider for ranges, and more.

Registration page example

Since the official example doesn’t look good on mobile, I built a typical registration form.

Here are some widget examples with code:

       SteamTextField(
          controller: controller.usernameController,
          label: Text( 'Enter username'),
        ),
...
      SteamCheckboxTile(
        value: controller.agreeToTerms,
        onChanged: controller.toggleTerms,
        label: 'I agree to the Terms of Service',

      ),
...   SteamButton(
        onPressed: controller.isLoading ? null : controller.register,
        child: Text('CREATE ACCOUNT'),
      ),

Easy to use, nothing we don’t expect.

I am not a big player myself. But I have a favorite game from the Tower Defense genre. Unfortunately, the game has only 20 levels, which were completed long ago. So, I want to make the follow-up someday, and maybe I will use this package as the foundation for the design system.

Since the package is still a work in progress, there’s room for improvement. It would be nice to see more complex components like dialogs, bottom sheets, or maybe a navigation drawer styled to match.