Empathetech Flutter UI

Build apps for anyone

EFUI is a Flutter library for building truly accessible apps. It simplifies...

• Platform availability
  • Thanks to Flutter, you can use EFUI to create on Android, iOS, Linux, macOS, Windows and Web!
• Responsive design
  • Here's the definition; check out our site to see it in action.
• Screen reader support
  • Empathetech code is manually verified with TalkBack and VoiceOver.
• User customization
  • The only way to be truly accessible to ALL customers is to empower them with the freedom of choice!
    • EFUI provides an elegant UX for full control over an app's appearance.
• Internationalization
  • Empathetech apps have been translated to Spanish and French (so far).
  • EFUI also provides the infrastructure for unlimited future translations.
    • Moral fiber moment: Remember that LLMs are a tool for acceleration. But, there's a lot more to a great car than just acceleration! If your translations are generated: disclose that. EFUI's translations started with A.I. and ended with H.I.
• Cost
  • While we encourage contributions, EFUI is completely free and open source.
  • Open UI can also get you started with a professionally polished, empathetic app in one click*
    • *There's some first time setup. After that, one click per app.

When built with EFUI, your apps can truly reach any audience!
Let's build a better world together, bit x bit.

Table of Contents

• Usage
• Contributing
• License

Usage

Open UI

Is an app generator. It is available everywhere, and can give your idea an accessible, production ready foundation with one click.

   Android (Google Play)   |   Android (.apk)   |   iOS   |   Linux (deb)   |   Linux (rpm)   |   macOS   |   Windows

*Mobile platforms simply save a configuration file that can be used on Desktop. Flutter must be installed (on Desktop) for code generation to work.

Beginner tutorials

If you're new to Flutter: welcome! EFUI is full of doc comments to help you on your path.

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

• First app tutorial (Flutter)
• First app code lab (Flutter)
• Using external packages (Net Ninja)

Integrating EFUI with existing projects

TL;DR

--- Required ---

1. Initialize EzConfig in void main()
2. Use EzAppProvider to build a PlatformApp (from a recommended external library)
   - OR use ezThemeData in any existing provider/app
   - OR use EzConfigs data when building your ThemeData

--- Recommended ---

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

Step 0

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';

Step 1

Initialize EzConfig in void main()

main.dart

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

  final SharedPreferences preferences = await SharedPreferences.getInstance();

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

    preferences: preferences,

    // Your brand colors, custom styling, etc
    defaults: <String, Object>{},
  );
  
  // the rest of your code...

  runApp(const YourApp());
}
//...

How it works

EzConfig gathers the app's theme data, merging your defaults 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

main.dart

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

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

        // Language handlers
        localizationsDelegates: <LocalizationsDelegate<dynamic>>{
          const LocaleNamesLocalizationsDelegate(),
          ...EFUILang.localizationsDelegates,
          ...YourLang.localizationsDelegates,
          YourAppFeedbackLocalizationsDelegate(),
        },

        // Supported languages
        supportedLocales: YourLang.supportedLocales,

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

        title: appTitle,
        routerConfig: router,
      ),
    );
  }
}

How it works

EzAppProvider is a PlatformProvider wrapper that uses ezThemeData by default.

ezThemeData creates a ThemeData from the values in EzConfig.

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

Or, simply integrate EzConfig data into your existing ThemeData.

Step 3

Copy the settings sandbox to your project

Each of the settings screens we use is a callable (and configurable) Widget.

Copy/paste all the sample screens you want and make paths to them in your apps.

Example combo using a go_router...

text_settings.dart

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

  @override
  Widget build(BuildContext context) => OpenUIScaffold(
        title: EFUILang.of(context)!.tsPageTitle,
        showSettings: false,
        body: const EzTextSettings(),
      );
}

main.dart

//...
   GoRoute(
     path: textSettingsPath,
     name: textSettingsPath,
     builder: (_, __) => const TextSettingsScreen(),
   ),
//...

And boom! It's that Ez!

How it works

The sample screens elegantly 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.
• EzRandomButton: A fun (and optional) button for (pseudo)randomizing the settings.
• EzResetButton: A customizable button for resetting groups of preferences.

By default, every base theme setting is exposed. Unique keys provided to EzConfig.defaults can be updated with these Widgets too!

And, If our samples don't fit your vibe, feel free to use the above widgets to build your own settings screen(s).

Step 4

Enjoy!

And, as your app grows, use our library to keep things Ez

• Platform availability: Platform responsive Widgets that will help along the way
• Responsive design: Widgets that aid in building responsive UI/UX
• Screen reader support: Widgets with streamlined Semantics
• User customization: Wrapper Widgets that respond to EzConfig data when the ThemeData doesn't cut it

We hope that wasn't information overload! Good news is: that's everything you need.
Once you're feeling settled, please do explore! The library is organized, commented, and continuously maintained.

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