Kapatmak için ESC tuşuna basın

Flutter Localizations (l10n) ile Çoklu Dil Desteği Oluşturma

Flutter, günümüzde mobil uygulama geliştirme dünyasında büyük bir popülerlik kazanmış durumda. Geliştiriciler, Flutter’ı kullanarak hızlı ve verimli bir şekilde çapraz platform uygulamaları oluşturabiliyorlar. Ancak, global bir kullanıcı kitlesine hitap etmek isteyen geliştiriciler için uygulamalarında çoklu dil desteği sağlamak kritik bir öneme sahiptir. Bu yazıda, Flutter localizations (l10n) kullanarak nasıl çoklu dil desteği oluşturabileceğinizi adım adım açıklayacağız.

Neden Çoklu Dil Desteği?

Çoklu dil desteği, uygulamanızın dünya genelinde daha geniş bir kullanıcı kitlesine ulaşmasını sağlar. Kullanıcılar, kendi ana dillerinde bir uygulamayı kullanmaktan memnuniyet duyarlar ve bu, kullanıcı deneyimini olumlu yönde etkiler. Ayrıca, çoklu dil desteği, uygulamanızın yerel pazarlarda rekabet avantajı elde etmesine yardımcı olur.

Flutter Localizations Nedir?

Flutter Localizations, uygulamanızın farklı dillerde ve kültürel formatlarda çalışmasını sağlayan bir mekanizmadır. Yerelleştirme (l10n) ve uluslararasılaştırma (i18n) süreçlerini kolaylaştırmak için çeşitli araçlar ve paketler sunar. Bu araçlar sayesinde, uygulamanızın dil ve kültürel formatlarını kolayca yönetebilirsiniz.

Flutter Localizations Kullanımı

Adım 1: Proje Hazırlığı

Yeni bir Flutter projesi oluşturun veya mevcut projenizin pubspec.yaml dosyasına gerekli bağımlılıkları ve flutter bölümünün altına generate: true ekleyin:

pubspec.yaml
dependencies:
  flutter_localizations:
    sdk: flutter
  intl: any

flutter:
  generate: true
Adım 2: Dil Dosyalarını Oluşturma
  • lib/l10n klasörü altında dil dosyalarınızı oluşturun. Örneğin, app_tr.arb ve app_en.arb gibi.
  • Bu dosyalarda dil çevirilerini JSON formatında tanımlayın:
app_tr.arb
{
  "hello": "Merhaba Dünya",
  "@hello": {
    "description": "Geleneksel programcı selamı"
  }
}
app_en.arb
{
  "hello": "Hello World",
  "@hello": {
    "description": "The conventional newborn programmer greeting"
  }
}
Adım 3: Flutter Localizations Paketini Yapılandırma:

main.dart dosyanızda Flutter localizations paketini yapılandırın:

main.dart
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();

  static _MyAppState? of(BuildContext context) =>
      context.findAncestorStateOfType<_MyAppState>();
}

class _MyAppState extends State<MyApp> {
  Locale _locale = const Locale('en');

  void setLocale(Locale value) {
    setState(() {
      _locale = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      locale: _locale,
      supportedLocales: AppLocalizations.supportedLocales,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "hello: ${AppLocalizations.of(context)!.hello}",
          style: const TextStyle(fontSize: 25),
        ),
      ),
    );
  }
}
Adım 4: Dil Dosyalarının Üretilmesi

Proje kök dizininizde l10n.yaml adında bir dosya oluşturun ve aşağıdaki içeriği ekleyin:

l10n.yaml
arb-dir: lib/l10n 
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

Bu yapılandırma, yerelleştirme dosyalarınızın (.arb dosyaları) lib/l10n dizininde olduğunu belirtir ve İngilizce dil dosyasını (app_en.arb) şablon olarak kullanır. Çıktı dosyasının adı app_localizations.dart olacak ve oluşturulacak sınıfın adı AppLocalizations olacaktır.

Uygulamayı yeniden başlattığınızda otomatik olarak AppLocalizations sınıfı oluşacaktır. Yine de aşağıdaki komutu çalıştırarak otomatik olarak oluşturulmasını sağlayabiliriz:

Dart
flutter pub get

Sınıfları kontrol etmek için bu .dart_tool/flutter_gen/gen_l10n dizine bakabiliriz:

  • .dart_tool/flutter_gen/gen_l10n/app_localizations.dart
  • .dart_tool/flutter_gen/gen_l10n/app_localizations_en.dart
  • .dart_tool/flutter_gen/gen_l10n/app_localizations_tr.dart
Adım 5: Uygulama İçerisinde Dil Değişimi:

Kullanıcıların uygulama içinden dil değiştirmesini sağlamak şu şekilde bir widget kullanabiliriz:

Dart
class LanguageSelector extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DropdownButton<Locale>(
      value: Localizations.localeOf(context),
      onChanged: (Locale? newLocale) {
        MyApp.of(context)?.setLocale(newLocale!);
      },
      items: AppLocalizations.supportedLocales.map((Locale locale) {
        return DropdownMenuItem<Locale>(
          value: locale,
          child: Text(locale.toString()),
        );
      }).toList(),
    );
  }
}

Uygulamanın tam kod hali şu şekilde olacaktır:

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();

  static _MyAppState? of(BuildContext context) =>
      context.findAncestorStateOfType<_MyAppState>();
}

class _MyAppState extends State<MyApp> {
  Locale _locale = const Locale('en');

  void setLocale(Locale value) {
    setState(() {
      _locale = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      locale: _locale,
      supportedLocales: AppLocalizations.supportedLocales,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "hello: ${AppLocalizations.of(context)!.hello}",
              style: const TextStyle(fontSize: 25)
            ),
            const Padding(padding: EdgeInsets.all(20)),
            const Text("Please select your language."),
            LanguageSelector(),
          ],
        ),
      ),
    );
  }
}

class LanguageSelector extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DropdownButton<Locale>(
      value: Localizations.localeOf(context),
      onChanged: (Locale? newLocale) {
        MyApp.of(context)?.setLocale(newLocale!);
      },
      items: AppLocalizations.supportedLocales.map((Locale locale) {
        return DropdownMenuItem<Locale>(
          value: locale,
          child: Text(locale.toString()),
        );
      }).toList(),
    );
  }
}
Uygulama Görüntüleri

Sonuç

Flutter localizations (l10n) ile çoklu dil desteği sağlamak, uygulamanızın erişilebilirliğini ve kullanıcı deneyimini artırır. Bu rehberi takip ederek, uygulamanızda kolayca çoklu dil desteği oluşturabilirsiniz. Flutter’ın sağladığı güçlü araçlar ve paketler sayesinde, yerelleştirme süreci daha önce hiç olmadığı kadar kolay ve etkili bir hale gelmiştir.

Uygulamanızın global pazarda rekabet gücünü artırmak ve kullanıcılarınızın memnuniyetini sağlamak için çoklu dil desteğini ihmal etmeyin. Yukarıdaki adımları izleyerek, Flutter ile dünya çapında kullanıcı dostu uygulamalar geliştirebilirsiniz. Çoklu dil desteği sağlamak, uygulamanızın hem kullanıcı memnuniyetini hem de erişilebilirliğini büyük ölçüde artıracaktır.

Bayram Alaçam

Merhaba, Ben Bayram Bursa'da yaşıyorum. Geniş Bir deneyime sahip olmakla birlikte, özellikle Javascript alanında uzmanlaştım ve bu alandaki tüm detaylarla ilgileniyorum. Mobil uygulama geliştirme konusunda da derin bir ilgi ve yetenek setine sahibim. Backend, veritabanı yönetimi ve DevOps konularında da deneyimliyim ve her projede güvenilir, ölçeklenebilir çözümler sunabilirim.Yeni teknolojileri öğrenmek benim için bir tutku. Hızla değişen teknoloji dünyasında güncel kalmak ve son trendleri takip etmek benim için önemli bir prensiptir

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir