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

    View full-size slide

  2. Localization & Accessibility

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. Add Localization to Flutter (iOS)
    Info.plist


    CFBundleLocalizations

    id

    ...


    View full-size slide

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

    View full-size slide

  12. Let’s Code

    View full-size slide

  13. Localization & Accessibility

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Accessibility (a11y)

    View full-size slide

  20. Let’s Code

    View full-size slide

  21. Dicoding
    Dicoding
    Dicoding
    Dicoding Indonesia
    Contact us :
    Contact me :
    [email protected]

    View full-size slide