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.
Copy 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.
Copy flutter pub add flutter_semantics_testing
Copy 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.
Copy dependencies :
flutter :
sdk : flutter
flutter_localizations :
sdk : flutter
Implementing Localizations:
Create a class for your app's localizations and use the Localizations
widget.
Copy 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:
Copy 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 6 months ago