empathetech_flutter_ui 4.3.0

Build apps for anyone. EFUI makes building user accessible and customizable apps Ez. So everyone can enjoy your great idea!

Empathetech Flutter UI

Build apps for anyone

EFUI is a holistic foundation for digital accessibility.

EFUI provides a starter kit for 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
• Screen reader compliance
  • 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 you to expose any piece of your app's theme to the user.
    • Users can have full control of theme colors, fonts, styling, spacing, and images.
• 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.
• 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()
2. Use an EzAppProvider to build your PlatformApp
   OR use ezThemeData in your existing provider/app
   OR use EzConfig.instance data to build your theme
3. Migrate all example app screens to your project
4. Enjoy

Setup

Step 1

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

import 'utils/utils.dart';
import 'screens/screens.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 theme data for our apps. It starts with Empathetech's config to make sure every key has a value, then it merges in your customDefaults and the user's saved preferences.

Once complete, EzConfig stores the gathered data in a globally accessible finalized instance.

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: Lang.supportedLocales + EFUILang.supportedLocales,

        // Language handlers
        localizationsDelegates:
            Lang.localizationsDelegates + EFUILang.localizationsDelegates,

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

How it works

EzAppProvider is a PlatformProvider wrapper that uses ezThemeData by default.

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

Or, with quite a bit more effort, you can even build your own fully custom base theme with EzConfig.instance data.

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 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!

• 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 Widgets. If there are any theme values you wish to stay constant, simply remove the paired setting Widget.

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! Check out the...

• Responsive Widgets: Widgets that aid in building responsive UI/UXs
• Accessibility Widgets: Widgets with streamlined semantics and/or Widgets that adapt to accessibilty flags, like EzDominantHandSwitch

and even extension packages, like efui_video_player!

But, this should be plenty to get you started (and avoid overload). Once you're feeling settled, the code has been organized to aid in exploration!

Demo

From the example

Platform availability

Android	iOS

Linux	MacOS	Windows

Web

Screen reader compliance

User customization

Internationalization

Screen reader semantics are also internationalized!

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

Cash App

Patreon

Buy Me a Coffee

Ko-fi

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

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