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 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 :
    [email protected]

    View Slide