Empathetech Flutter UI

Build apps for anyone #

EFUI is a holistic foundation for digital accessibility.

EFUI provides a starter kit for every aspect 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
• Screen reader compliance
  • The example app and all custom widgets 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 you to expose any aspect of your app's theme to the user.
    • Users can have full control of theme colors, fonts, styling, spacing, and images.
• Internationalization
  • The example app and all custom widgets have been translated into 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 A.H.I. generated, disclose that. EFUI's translations started with A.H.I. and ended with H.I.
• Responsive design
  • Here's the definition
  • Checkout the demo to see it in action

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

Table of Contents #

• Installation
• Usage
• Demo
• Contributing
• License
• Credits

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 (unaffilliated!) videos you might also find helpful.

• First app tutorial
• First app codelab
• Using external packages

Usage #

TL;DR #

1. a) Add any imports you're missing from the header below to your main.dart and
   b) Initialize EzConfig in your void main() to setup the user customizable ezThemeData
2. Use an EzAppProvider to build your PlatformApp
   OR use ezThemeData in your existing provider/app
3. a) Copy/paste all example app screens and .arbs to your app and
   b) Rename Home.dart to Settings.dart (personal preference) and update your routes
4. Enjoy

Setup #

Step 1 #

In your main.dart add any imports you're missing...

import 'l10n/app_localizations.dart';

import 'package:empathetech_flutter_ui/empathetech_flutter_ui.dart';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:go_router/go_router.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';

...and initialize EzConfig in your void main() Function.

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 all the values for ezThemeData and creates an instance for efficiently getting and setting those values in app.

EzConfig starts with Empathetech's config to make sure every key has a value. Then it merges in your custom data and the user's current preferences. The finalized instance is then used to populate ezThemeData.

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,

        // Supported languages
        supportedLocales: AppLocalizations.supportedLocales + EFUILocalizations.supportedLocales,

        // Language handlers
        localizationsDelegates:
            AppLocalizations.localizationsDelegates + EFUILocalizations.localizationsDelegates,

        title: "Emapathetech Flutter UI",
        routerConfig: _router,
      ),
    );
  }
}

How it works

EzAppProvider is a PlatformProvider wrapper that uses ezThemeData by default, setup for Cupertino and Material.

You are more than welcome to use your own app/app provider with ezThemeData for the same effect. EzAppProvider and Flutter Platform Widgets are recommendations not requirements.

Step 3 #

Copy the settings sandbox!

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

Copy/paste all the screen files, .arb language files, and routes from main.dart (aka 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 and HomeScreen() to something more appropriate, like Settings.dart and SettingsScreen(), create a link to it 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!

• EzThemeModeSwitch: A toggle for switching between light, dark, and system theming.
• EzDominantHandSwitch: A toggle for switching common touch points to benefit lefties.
• 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).
• EzImageSetting: An image uploader for updating app assets.
• EzResetButton: A text button for resetting groups of preferences.

By default, every base theme setting is exposed. Any keys provided to customDefaults can be updated with these EzSettings. If there are any theme values you wish to stay constant, simply remove the paired EzSetting.

Step 4 #

Enjoy!

There's lots of other cool stuff in EFUI, like EzRowCol, EzLayoutSwitch, and EzVideoPlayer! We think EzConfig will hook you in enough to want to explore the rest!

Demo #

From the example #

Platform availability #

Screen reader compliance #

User customization #

Internationalization #

Responsive design #

Checkout the link to our site below. If you're using a monitor, play around with the window size! Using a phone or tablet? Rotate your device!

Live #

• Company site
  • Source code

Contributing #

The vibes! #

If you build something with EFUI, let us know! We'd love to have a third-party live section

Time #

Please reach out to the community contact about becoming a contributor. Emapthetech LLC doesn't tend to run out of ideas, only time! Here are a few current...

Planned features #

• More languages! If you speak English and a currently unsupported language, please reach out!
• More EzWidgets with required and/or preconfigured semantics
• Querying GoogleFonts rather than relying on a predetermined list

Money #

Many thanks for any and all donations! We're happy to have helped!

Paypal #

Venmo #

@empathetech-llc

Cash App #

$empathetech

License #

GNU GPLv3

Credits #

Translations #

Thank you to M Ramirez for verifying EFUI's Spanish translations!

Flutter OSS #

EFUI wouldn't be as awesome as it is without these other awesome community projects...

• Flutter Platform Widgets
• Flutter Colorpicker
• Flutter Local Notifications
• Line Icons
• Flutter Toast

And, of course, all the awesome Flutter (Google) devs.