Dicoding Developer Coaching #53: Flutter | Buat Aplikasimu Mendunia dengan Lokalisasi dan Aksesibilitas

Umumnya, aplikasi yang kita bangun hanya ditujukan secara lokal. Target pasar aplikasi kita hanya sebatas dalam negeri saja. Namun apa jadinya ketika kita ingin kembangkan aplikasi ini dalam skala yang lebih luas? Bagaimana pengguna luar negeri dengan berbagai kondisi pun mampu memakai aplikasimu?

Flutter menyediakan widget dan class yang membantumu dalam membuat aplikasi menyesuaikan target pasar yang kamu inginkan. Dengan bantuan lokalisasi dan aksesibilitas, aplikasimu dapat dipakai oleh orang luar negeri dan berbagai kondisi pengguna. Untuk lebih lengkapnya akan dibahas pada Developer Coaching dengan poin pembahasan seperti berikut:

- Pengantar Lokalisasi dan Aksesibilitas
- Pentingnya Lokalisasi dan Aksesibilitas
- Lokalisasi dan Aksesibilitas pada Flutter

Transcript

1. Buat Aplikasimu Mendunia dengan Lokalisasi dan Aksesibilitas Dicoding Developer Coaching #53 Achmad Ilham Curriculum Developer Dicoding
3. Localization & Accessibility
4. Localization (l10n) Upaya adaptasi keseluruhan elemen aplikasi agar menyesuaikan kebutuhan budaya dan bahasa untuk suatu target pasar.
5. Localization (l10n) Keuntungan: 1. Meningkatkan jumlah pengguna atau unduhan 2. Memberikan nilai lebih terhadap tampilan 3. Meningkatkan pendapatan
6. Localization (l10n) Perhatikan poin berikut: • Penggunaan bahasa lokal • Ukuran teks akan berubah • Hindari penulisan secara hardcode • Hargai budaya negara lain
7. Localization (l10n) • flutter_localizations package (Flutter SDK) • intl package • Language Catalogue
8. Add Localization to Flutter pubspec.yaml dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: <latest_version> flutter: generate: true l10n.yaml arb-dir: lib/l10n template-arb-file: app_id.arb output-localization-file: app_localizations.dart lib/l10n/app_id.arb { "titleApp": "Aplikasi Lokalisasi", "@titleApp": { "description": "Deskripsi mengenai variabel titleApp" }, "helloWorld": "Halo Dunia!", "@helloWorld": { "description": "Deskripsi variabel helloWorld" } }
9. Add Localization to Flutter lib/main.dart import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; return MaterialApp( title: 'Aplikasi Localizations', localizationsDelegates: [ AppLocalizations.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: [ Locale('id', ''), ], home: HomePage(), );
10. Add Localization to Flutter lib/home_page.dart class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(AppLocalizations.of(context)!.titleApp), ), ... ); } }
11. Add Localization to Flutter (iOS) Info.plist <plist version="1.0"> <dict> <key>CFBundleLocalizations</key> <array> <string>id</string> </array> ... </dict> </plist>
12. Referensi : • flutter.dev/go/i18n-user-guide
13. Let’s Code
14. Localization & Accessibility
15. Accessibility (a11y) Upaya memberikan informasi dan akses yang mudah ke semua pengguna, termasuk penyandang disabilitas.
16. Accessibility (a11y) Ada beberapa karakteristik disabilitas yang terbantu dengan adanya aksesibilitas: • Visual • Pendengaran • Mobilitas • Pengetahuan
17. Semantic class Memberikan deskripsi pada widget tertentu agar memiliki makna atau penjelasan. Semantics( label: "Gambar avatar", child: CircleAvatar( backgroundColor: Colors.transparent, child: Image.asset( "assets/dashatar.png", ), radius: 100, ), ), https://api.flutter.dev/flutter/widgets/Semantics-class.html
18. Semantic class https://api.flutter.dev/flutter/widgets/Semantics-class.html • Semantics • MergeSemantics • ExcludeSemantics
19. Debugging Semantic return MaterialApp( showSemanticsDebugger: true, ... );
20. Accessibility (a11y)
21. Let’s Code
22. Dicoding Dicoding Dicoding Dicoding Indonesia Contact us : Contact me : ilham@dicoding.com