Flutter University
  • πŸ‘‹Welcome to Flutter University
  • Learn Flutter
    • πŸš—Basics
      • 🧺Dart Basics
      • πŸš›Setup & Installation
      • 🐣Hello Flutter
      • πŸŒ‰Widgets
      • ⛸️Basic State Management
      • πŸ‡ΎπŸ‡ΉBasic Layout and Styling
      • 🐝Basic Interactivity
      • πŸ›£οΈNavigation
      • πŸͺ„Working with Assets
    • πŸš…Intermediate
      • 🎯Deeper into Dart
      • ⭐More on State Management
      • πŸ“ƒForm Handling
      • πŸ—ΌNetworking
      • πŸŽ‡Persistence
      • πŸ§™β€β™‚οΈAnimations
      • πŸ§ͺTesting
      • πŸ“¦Package Management
    • ✈️Professional
      • πŸŽ“Advanced Animations
      • 🎨Custom Painters
      • 🐼Continuous Integration/Continuous Deployment (CI/CD)
      • 🎭Performance Profiling
      • πŸ”¬Native Integrations
      • 🌍Accessibility and Localization
      • 🀘Understanding Design Patterns
      • πŸ“šFlutter Architecture
        • The Layer Model
        • Reactive User Interfaces
        • Flutter Widgets
        • The Rendering Process
        • Platform Embedders Overview
        • Integrating with Other Code
        • Support for the Web
  • Tutorials
    • 🌈UI
      • 🏚️Clubhouse Clone
      • πŸ”‰Netflix Clone
    • βš”οΈFull Stack
    • ⛓️Blockchain
    • πŸ€–AI/ML
  • Miscellaneous
    • πŸ–₯️100 Days of Flutter
    • 🎨Join Community
Powered by GitBook
On this page
  • 1. Accessibility β™Ώ
  • Semantics:
  • Testing Accessibility:
  • 2. Localizations 🌐
  • Adding Localizations:
  • Implementing Localizations:
  • Complete Example Code πŸ“œ
  • Assignments πŸ“

Was this helpful?

  1. Learn Flutter
  2. Professional

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 12 months ago

Was this helpful?

✈️
🌍