🌍Accessibility and Localization

Accessibility and localization are vital for creating inclusive and globally friendly applications. Here’s a deeper dive into these topics in Flutter.

1. Accessibility ♿

Accessibility ensures your app can be used by as many people as possible, including those with disabilities. Flutter has built-in widgets and services to help make your app accessible.

Semantics:

The Semantics widget annotates your widgets with a description used by screen readers.

Semantics(
  label: 'Tap to increment',
  child: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Icon(Icons.add),
  ),
);

Testing Accessibility:

You can use the flutter_semantics_testing package to test the accessibility of your app.

flutter pub add flutter_semantics_testing
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_semantics_testing/flutter_semantics_testing.dart';

void main() {
  testWidgets('Semantics test', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());

    expect(tester, meetsGuideline(labeledTapTargetGuideline));
  });
}

2. Localizations 🌐

Localizations allow your app to provide a localized user experience.

Adding Localizations:

Add the flutter_localizations package to your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

Implementing Localizations:

Create a class for your app's localizations and use the Localizations widget.

class MyAppLocalizations {
  MyAppLocalizations(this.locale);

  final Locale locale;

  static MyAppLocalizations of(BuildContext context) {
    return Localizations.of<MyAppLocalizations>(context, MyAppLocalizations);
  }

  String get title {
    return Intl.message(
      'Hello World',
      name: 'title',
      locale: locale.toString(),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        const LocalizationsDelegateOFLC(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [const Locale('en', ''), const Locale('es', '')],
      home: MyHomePage(),
    );
  }
}

Complete Example Code 📜

Let’s look at a simple localized Flutter app:

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [const Locale('en', ''), const Locale('es', '')],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(MaterialLocalizations.of(context).backButtonTooltip),
      ),
      body: Center(
        child: Text(MaterialLocalizations.of(context).okButtonLabel),
      ),
    );
  }
}

In this example:

  • We include the necessary localizations delegates and specify the supported locales.

  • In MyHomePage, we use the MaterialLocalizations class to access localized strings.

  • This way, the app will display text in the user's preferred language when run.

Assignments 📝

Last updated