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
   

   View Slide

2. View Slide

3. Localization & Accessibility
   

   View Slide

4. Localization (l10n)
   Upaya adaptasi keseluruhan elemen aplikasi
   agar menyesuaikan kebutuhan budaya dan
   bahasa untuk suatu target pasar.
   

   View Slide

5. Localization (l10n)
   Keuntungan:
   1. Meningkatkan jumlah pengguna atau
   unduhan
   2. Memberikan nilai lebih terhadap tampilan
   3. Meningkatkan pendapatan
   

   View Slide

6. Localization (l10n)
   Perhatikan poin berikut:
   ● Penggunaan bahasa lokal
   ● Ukuran teks akan berubah
   ● Hindari penulisan secara hardcode
   ● Hargai budaya negara lain
   

   View Slide

7. Localization (l10n)
   ● flutter_localizations package (Flutter
   SDK)
   ● intl package
   ● Language Catalogue
   

   View Slide

8. Add Localization to Flutter
   pubspec.yaml
   dependencies:
   flutter:
   sdk: flutter
   flutter_localizations:
   sdk: flutter
   intl:
   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"
   }
   }
   

   View Slide

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(),
   );
   

   View Slide

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),
    ),
    ...
    );
    }
    }
    

    View Slide

11. Add Localization to Flutter (iOS)
    Info.plist
    
    
    CFBundleLocalizations
    
    id
    
    ...
    
    
    

    View Slide

12. Referensi :
    ● flutter.dev/go/i18n-user-guide
    

    View Slide

13. Let’s Code
    

    View Slide

14. Localization & Accessibility
    

    View Slide

15. Accessibility (a11y)
    Upaya memberikan informasi dan akses yang
    mudah ke semua pengguna, termasuk
    penyandang disabilitas.
    

    View Slide

16. Accessibility (a11y)
    Ada beberapa karakteristik disabilitas yang
    terbantu dengan adanya aksesibilitas:
    ● Visual
    ● Pendengaran
    ● Mobilitas
    ● Pengetahuan
    

    View Slide

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
    

    View Slide

18. Semantic class
    https://api.flutter.dev/flutter/widgets/Semantics-class.html
    ● Semantics
    ● MergeSemantics
    ● ExcludeSemantics
    

    View Slide

19. Debugging
    Semantic
    return MaterialApp(
    showSemanticsDebugger: true,
    ...
    );
    

    View Slide

20. Accessibility (a11y)
    

    View Slide

21. Let’s Code
    

    View Slide

22. Dicoding
    Dicoding
    Dicoding
    Dicoding Indonesia
    Contact us :
    Contact me :
    ilham@dicoding.com
    

    View Slide