
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:
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
veapp_en.arb
gibi.
- Bu dosyalarda dil çevirilerini JSON formatında tanımlayın:
{
"hello": "Merhaba Dünya",
"@hello": {
"description": "Geleneksel programcı selamı"
}
}
{
"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:
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:
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:
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:
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:
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.
Bir yanıt yazın