Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Dicoding Indonesia

July 27, 2022
Tweet

More Decks by Dicoding Indonesia

Other Decks in Education

Transcript

  1. Buat Aplikasimu Mendunia dengan Lokalisasi dan Aksesibilitas Dicoding Developer Coaching

    #53 Achmad Ilham Curriculum Developer Dicoding
  2. None
  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