Empathetech Flutter UI

Build apps for anyone #

EFUI is a starter kit for building apps with a strong foundation in every pillar of digital accessibility:

Platform availability
- Thanks to Flutter, EFUI is fully cross platform! EFUI can build apps for Android, iOS, Linux, MacOS, Windows and Web!
  - Thanks to integration with Flutter Platform Widgets, apps built with EFUI will gracefully adapt to Cupertino (Apple) and Material (Android and beyond) styling
Responsive design
- Here's the definition
- Checkout the demo to see it in action
Screen reader support
- All custom Widgets and the example app have been manually verified with TalkBack and VoiceOver
User customization
- The only way to be truly accessible for ALL customers is to empower them with the freedom of choice.
  - EFUI enables developers to expose full control over theme colors, fonts, styling, spacing, and images to their users.
Internationalization
- All of EFUI's external text has been translated to Spanish. With the infrastructure for internationalization laid out, the only work left are the translations themselves.
  - Moral fiber moment: Remember that LLMs are a tool for acceleration. But, there's a lot more to winning a race than acceleration. If your translations are generated, disclose that. EFUI's translations started with A.H.I. and ended with H.I.

When built with EFUI, apps can truly reach any audience. Let's make the internet a more accessible place together!

Installation #

In your app's base directory, run

flutter pub add empathetech_flutter_ui

And add the following import to any files that use EFUI's library

import 'package:empathetech_flutter_ui/empathetech_flutter_ui.dart';

Beginner tutorials #

If you're new to Flutter: welcome! The example app is full of comments to help you on your path.

Here are some (unaffiliated) videos you might also find helpful.

Usage #

TL;DR #

--- Required ---

Initialize EzConfig in void main()
Use EzAppProvider to build a PlatformApp
- OR use ezThemeData in any existing provider/app
- OR use EzConfig to build a custom ThemeData

--- Recommended ---

Copy all example app settings screens to your project
Enjoy

Setup #

Step 1 #

Initialize EzConfig in void main()

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final SharedPreferences prefs = await SharedPreferences.getInstance();

  EzConfig(
    // Paths to any locally stored images the app uses
    assetPaths: {},

    preferences: prefs,

    // Your brand colors, custom styling, etc
    customDefaults: {},
  );
  
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);

  runApp(const EFUIExample());
}

How it works

EzConfig gathers and stores the app's theme data.

EzConfig starts with Empathetech's config, then merges in your customDefaults, and the user's saved preferences.

Once gathered, EzConfig stores the data in a Singleton instance for efficient access. EzConfig has a series of getter and setter methods for safe interactions with the theme data.

Step 2 #

In main.dart, use an EzAppProvider to build your PlatformApp

class EFUIExample extends StatelessWidget {
  final Key? key;

  const EFUIExample({this.key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return EzAppProvider(
      app: PlatformApp.router(
        debugShowCheckedModeBanner: false,

        // Language handlers
        localizationsDelegates: {
          LocaleNamesLocalizationsDelegate(),
          ...EFUILang.localizationsDelegates,
        },

        // Supported languages
        supportedLocales: EFUILang.supportedLocales,

        // Current language
        locale: EzConfig.getLocale(),

        title: efuiL,
        routerConfig: _router,
      ),
    );
  }
}

How it works

EzAppProvider is a PlatformProvider wrapper that uses ezThemeData by default.

ezThemeData sets up the dynamic color scheme, a readable text theme, and updates some touch points to be higher contrast by default.

You are more than welcome to use your own app/app provider with ezThemeData for the same effect.

Or, you can even build your own fully custom base theme with EzConfig data.

Step 3 #

Copy the settings sandbox!

The example app is built to be a drop-in solution for your apps' settings.

Copy/paste all the screen files and routes from main.dart (below)

// Initialize a path based router for web-enabled apps
// Or any other app that requires deep linking
// https://docs.flutter.dev/ui/navigation/deep-linking
final GoRouter _router = GoRouter(
  initialLocation: homeRoute,
  routes: <RouteBase>[
    GoRoute(
      name: homeRoute,
      path: homeRoute,
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          name: styleSettingsRoute,
          path: styleSettingsRoute,
          builder: (BuildContext context, GoRouterState state) {
            return const StyleSettingsScreen();
          },
        ),
        GoRoute(
          name: colorSettingsRoute,
          path: colorSettingsRoute,
          builder: (BuildContext context, GoRouterState state) {
            return const ColorSettingsScreen();
          },
        ),
        GoRoute(
          name: imageSettingsRoute,
          path: imageSettingsRoute,
          builder: (BuildContext context, GoRouterState state) {
            return const ImageSettingsScreen();
          },
        ),
      ],
    ),
  ],
);

Rename the (just copied) Home.dart file and HomeScreen() class to something more appropriate; like Settings.dart and SettingsScreen(). Then, create a link to SettingsScreen in your app, and, boom!

It's that Ez!

How it works

The example app's screens neatly organize all the custom Widgets that enable EFUI's user customization!

EzDominantHandSwitch: A toggle for switching common touch points to benefit lefties.
EzThemeModeSwitch: A toggle for switching between light, dark, and system theming.
EzLocaleSetting: A menu for updating the app's language.
EzImageSetting: An image uploader for updating app assets.
EzColorSetting: A color picker for updating theme colors.
EzFontSetting: A list of available Google Fonts for the app to use.
EzSliderSetting: A versatile slider Widget, with a live preview, for updating numerical theme values (spacing, sizing, etc).
EzResetButton: A text button for resetting groups of preferences.