Empathetech Flutter UI

Build apps for anyone

EFUI is a starter kit for building Flutter apps with a solid foundation in every aspect of digital accessibility:

• Platform availability
  • Thanks to Flutter, EFUI is fully cross platform! You can use EFUI to create on Android, iOS, Linux, MacOS, Windows and Web!
    • Thanks to integration with Flutter Platform Widgets, apps built with EFUI will gracefully adapt to Cupertino (Apple) 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 exposes every aspect of an app's theme to be controlled by the user.
• Internationalization
  • All of EFUI's external text has been translated to Spanish and French. Alongside the infrastructure for unlimited future translations.
    • 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, your apps can truly reach any audience. Let's make the internet a better place together!

Table of Contents

• Installation
• Usage
• Demo
• Contributing
• License

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! EFUI is full of comments to help you on your path.

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

• First app tutorial
• First app code lab
• Using external packages

Usage

TL;DR

--- Required ---

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

--- Recommended ---

1. Copy the settings sandbox to your project
2. Enjoy

Setup

Step 1

Initialize EzConfig in void main()

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

  final SharedPreferences prefs = await SharedPreferences.getInstance();

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

    preferences: prefs,

    // Your brand colors, custom styling, etc
    defaults: empathetechConfig, // is an optional starter
  );
  
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);

  runApp(const YourApp());
}

How it works

EzConfig gathers and stores the app's theme data, merging your customDefaults with 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

Use EzAppProvider to build a PlatformApp

class YourApp extends StatelessWidget {
  const YourApp({super.key});

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

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

        // Supported languages
        supportedLocales: EFUILang.supportedLocales,ß

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

        title: yourAppTitle,
        routerConfig: yourAppRouter,
      ),
    );
  }
}

How it works

EzAppProvider is a PlatformProvider wrapper that uses ezThemeData by default.

ezThemeData sets up the dynamic color scheme and 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 to your project

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

Copy/paste all the screen files and make paths to them in your apps' routes.

Example GoRouter setup...

/// A path based router for web-enabled apps
final GoRouter _yourAppRouter = GoRouter(
  initialLocation: homePath,
  routes: <RouteBase>[
    GoRoute(
      path: homePath,
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: routes:<RouteBase>[
        /// ...all of your pre/soon to be existing Routes
        GoRoute(
          path: settingsRoute,
          builder: (BuildContext context, GoRouterState state) {
            return const SettingsHomeScreen();
          },
          routes:<RouteBase>[
            GoRoute(
              path: textSettingsPath,
              builder: (BuildContext context, GoRouterState state) {
                return const TextSettingsScreen();
              },
            ),
            GoRoute(
              path: layoutSettingsPath,
              builder: (BuildContext context, GoRouterState state) {
                return const LayoutSettingsScreen();
              },
            ),
            GoRoute(
              path: colorSettingsPath,
              builder: (BuildContext context, GoRouterState state) {
                return const ColorSettingsScreen();
              },
            ),
            GoRoute(
              path: imageSettingsPath,
              builder: (BuildContext context, GoRouterState state) {
                return const ImageSettingsScreen();
              },
            ),
          ],
        ),
      ],
    ),
  ],
);

And boom!

It's that Ez!

NOTE: The above code snippet assumes you renamed the (just copied) Home.dart file and HomeScreen() class to Settings.dart and SettingsHomeScreen()

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 menu for selecting the app's theme: light, dark, system.
• EzLocaleSetting: A menu for updating the app's language. EFUI currently supports English, Spanish, and French.
• TextSettings: A collection of custom Widgets for controlling the app's TextStyles.
• EzLayoutSetting: A dynamic slider Widget, with live previews, for updating the app's layout: margin, padding, and spacing.
• EzColorSetting: A color picker for updating each entry in the app's ColorScheme.
• EzImageSetting: An image picker for updating app assets.
• EzResetButton: A customizable button for resetting groups of preferences.

By default, every base theme setting is exposed. Additional keys provided to customDefaults can be updated with these Widgets as well!

If there are any theme values you wish to stay constant, simply remove the paired setting Widget(s).

Step 4

Enjoy!

The pillars of platform availability and user customization are "set it and forget it"; bar any external libraries that break things.

But, as you grow your apps, the other pillars require continuous development.

Thankfully, EFUI's got you covered there too!

• Responsive design: Widgets that aid in building responsive UI/UX
• Screen reader support: Widgets with streamlined semantics

At the risk of information overload, that should be plenty to get you started. Once you're feeling settled, the repo has been organized to aid in exploration!

Demo

Android

iOS

Desktop

Web

Contributing

The vibes!

If you build something with EFUI, let us know!

Time

Please reach out to the community contact about becoming a contributor. There's never a shortage of ideas, only time!

Translations

If you speak English and a currently unsupported language, please reach out! The more the merrier.

OR: If you speak English and a currently supported language, and see something wrong, please reach out! It takes a village.

Money

Many thanks for any and all donations!

GoFundMe

Patreon

Buy Me a Coffee

Ko-fi

Paypal

Venmo

Cash App

License

GNU GPLv3