Flutter localization example

Overview

๐Ÿ“Œ  Showcase



๐Ÿ“Œ  Installation

โœ”๏ธ  ํŒจํ‚ค์ง€ ์ถ”๊ฐ€ & ๋””๋ ‰ํ† ๋ฆฌ ์„ ์–ธ (pubspec.yaml)

dependencies:
  easy_localization: ^3.0.0 # ํ˜„์ง€ํ™”
  flutter_phoenix: ^1.0.0  # ์•ฑ ์žฌ์‹œ์ž‘

flutter:
  assets:
   - assets/langs/
  

โœ”๏ธ ํด๋”์™€ ๋ฒˆ์—ญ ํŒŒ์ผ ์ถ”๊ฐ€

assets
โ””โ”€โ”€ langs
    โ”œโ”€โ”€ ko.json                  
    โ””โ”€โ”€ en.json
  • ๊ตญ๊ฐ€ ์ฝ”๋“œ์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋‚˜, ๋””๋ฐ”์ด์Šค์˜ locale ์ •๋ณด์— ๋”ฐ๋ผ ์ธ์‹์„ ํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒฝ์šฐ๋„ ๋ฐœ์ƒ ํ•˜๋ฏ€๋กœ ๋ณธ ์˜ˆ์ œ์—์„œ๋Š” ์–ธ์–ด ์ฝ”๋“œ๋งŒ ์‚ฌ์šฉ
    • ko : ํ•œ๊ตญ์–ด
    • en : ์˜์–ด
    • locale : ์–ธ์–ด ์ฝ”๋“œ + ๊ตญ๊ฐ€ ์ฝ”๋“œ
      • ex) ๋””๋ฐ”์ด์Šค์˜ ์–ธ์–ด๋Š” ์˜์–ด, ์ง€์—ญ์€ ๋Œ€ํ•œ๋ฏผ๊ตญ์ผ๊ฒฝ์šฐ โ†’ en_KR
        • ๋ฒˆ์—ญ ํŒŒ์ผ์„ ko_KR๋กœ ์ถ”๊ฐ€ํ• ๊ฒฝ์šฐ ์–ธ์–ด ์ฝ”๋“œ๊ฐ€ ๋งž์ง€ ์•Š์œผ๋ฏ€๋กœ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์„ค์ •๋จ

โœ”๏ธ iOS

  • ios/Runner/Info.plist ํŒŒ์ผ์— ์ง€์›๋˜๋Š” locale ์ •๋ณด ์ถ”๊ฐ€
<key>CFBundleLocalizations</key>
<array>
   <string>en</string>
   <string>ko</string>
</array>


๐Ÿ“Œ   Example

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter_phoenix/flutter_phoenix.dart';
import 'package:localization_example/screens/home_screen.dart';
import 'package:localization_example/widgets/language_button.dart';

import 'constants.dart';

void main() async {
  // main ๋ฉ”์„œ๋“œ์—์„œ ๋น„๋™๊ธฐ ๋ฉ”์„œ๋“œ ์‚ฌ์šฉ์‹œ ๋ฐ˜๋“œ์‹œ ์ถ”๊ฐ€
  WidgetsFlutterBinding.ensureInitialized();
  // ํŒจํ‚ค์ง€ ์ดˆ๊ธฐํ™”
  await EasyLocalization.ensureInitialized();
  runApp(
    Phoenix(
      child: EasyLocalization(
        supportedLocales: const [en, ko], // ์ง€์›ํ•˜๋Š” ์–ธ์–ด ๋ฆฌ์ŠคํŠธ
        path: 'assets/langs', // ์–ธ์–ด ํŒŒ์ผ์ด ์žˆ๋Š” ๊ฒฝ๋กœ
        fallbackLocale: en, // ๊ธฐ๋ณธ๊ฐ’ 
        child: const MyApp(), 
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // ๊ธฐ๊ธฐ์˜ ์–ธ์–ด ์„ค์ •์ด ํ•œ๊ตญ์–ด์ผ๊ฒฝ์šฐ ko, ์˜์–ด์ผ ๊ฒฝ์šฐ en, ๊ทธ ์™ธ์ผ๊ฒฝ์šฐ ๊ธฐ๋ณธ๊ฐ’์ธ en ์ถœ๋ ฅ
    debugPrint('Locale : ${context.locale}');
    return Scaffold(
      appBar: AppBar(
        title: const Text('appBar').tr(),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            LanguageButton(
              text: 'ํ•œ๊ตญ์–ด',
              locale: ko,
            ),
            SizedBox(height: 12),
            LanguageButton(
              text: 'English',
              locale: en,
            ),
          ],
        ),
      ),
    );
  }
}

class LanguageButton extends StatelessWidget {
  const LanguageButton({
    Key? key,
    required this.text,
    required this.locale,
  }) : super(key: key);

  final String text;
  final Locale locale;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () async{
        await context.setLocale(locale);
        await EasyLocalization.ensureInitialized();
        Phoenix.rebirth(context);
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: const BorderRadius.all(Radius.circular(4)),
        ),
        child: Text(text),
      ),
    );
  }
}

โœ”๏ธ  locale ๋ณ€๊ฒฝ

await context.setLocale(locale);

โœ”๏ธ  ๋ฒˆ์—ญ (tr())

  • ../en.json
{
  "appBar" : "Localization Example"
}
  • ../ko.json
{
  "appBar" : "Localization ์˜ˆ์ œ"
}
// en : Localization Example
// ko : Localization ์˜ˆ์ œ
const Text('appBar').tr(),

โœ”๏ธ  ์•ฑ ์žฌ์‹œ์ž‘

Phoenix.rebirth(context);
You might also like...

The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.

The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.

coolicons This flutter package allows you to use the Coolicons icon pack. ๐ŸŽ– Installation In the dependencies: section of your pubspec.yaml, add the f

Oct 22, 2022

An extension to the Flutter SDK for building Flutter applications for Tizen devices.

An extension to the Flutter SDK for building Flutter applications for Tizen devices.

Flutter for Tizen An extension to the Flutter SDK for building Flutter applications for Tizen devices. Flutter and the related logo are trademarks of

Dec 16, 2022

Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

Jan 4, 2023

AOP for Flutter(Dart)

AOP for Flutter(Dart)

AspectD Salute to AspectJ. AspectD is an AOP(aspect oriented programming) framework for dart. Like other traditional aop framework, AspectD provides c

Jan 7, 2023

Starter project and code generator for Flutter/Redux

Starter project and code generator for Flutter/Redux

Flutter Redux Starter/Code Generator Videos Short video ~ 1 minute Long video ~ 10 minutes We're using this approach to develop the Flutter app for In

Dec 12, 2022

Environment specific config generator for Dart and Flutter applications during CI/CD builds

Environment Config Generator Environment specific config generator. Allows to specify env configuration during CI/CD build. Primarily created to simpl

Dec 2, 2022

Converts SVG icons to OTF font and generates Flutter-compatible class. Provides an API and a CLI tool.

Fontify The Fontify package provides an easy way to convert SVG icons to OpenType font and generate Flutter-compatible class that contains identifiers

Oct 28, 2022

The Flutter code generator for your assets, fonts, colors, โ€ฆ โ€” Get rid of all String-based APIs.

The Flutter code generator for your assets, fonts, colors, โ€ฆ โ€” Get rid of all String-based APIs.

The Flutter code generator for your assets, fonts, colors, โ€ฆ โ€” Get rid of all String-based APIs. Inspired by SwiftGen. Motivation Using asset path str

Jan 6, 2023

๐Ÿš€The Flutter dart code generator from zeplin. ex) Container, Text, Color, TextStyle, ... - Save your time.

๐Ÿš€The Flutter dart code generator from zeplin. ex) Container, Text, Color, TextStyle, ... - Save your time.

Flutter Gen Zeplin Extension ๐Ÿš€ The Flutter dart code generator from zeplin. ex) Container, Text, Color, TextStyle, ... - Save your time. โฌ‡ 1.1k Getti

Oct 12, 2022
Owner
Mincheol Shin
Mincheol Shin
Queen support for localization in flutter

Nations ?? Features translation without context ?? custom configuration value not found builder fallback locale supported locales fall back to base be

Ahmed Masoud 10 Jun 22, 2022
An example todo list back end project that uses gRPC for client-server communication and Firestore for data storage

An example todo list back end project that uses gRPC for client-server communication and Firestore for data storage

Lucas Coelho 2 Apr 18, 2022
Flutter Version Management: A simple CLI to manage Flutter SDK versions.

fvm Flutter Version Management: A simple cli to manage Flutter SDK versions. FVM helps with the need for a consistent app builds by allowing to refere

Leo Farias 3.2k Jan 8, 2023
A flutter utility to easily create flavors in your flutter application

Flutter Flavorizr A flutter utility to easily create flavors in your flutter application Getting Started Let's start by setting up our environment in

Angelo Cassano 268 Jan 1, 2023
๐Ÿ”ฅFlutterFire is a set of Flutter plugins that enable Flutter apps to use Firebase services.

FlutterFire is a set of Flutter plugins that enable Flutter apps to use Firebase services. You can follow an example that shows how to use these plugins in the Firebase for Flutter codelab.

null 7.4k Jan 2, 2023
Ecosistema de paquetes para Dart y Flutter desarrollados y mantenidos por la comunidad de Flutter Cuba relacionados con la tienda cubana de aplicaciones para dispositivos Android llamada Apklis.

Ecosistema de paquetes para Dart y Flutter desarrollados y mantenidos por la comunidad de Flutter Cuba relacionados con la tienda cubana de aplicacion

Flutter Cuba 12 Oct 24, 2022
UME is an in-app debug kits platform for Flutter. Produced by Flutter Infra team of ByteDance

flutter_ume English Flutter ๅบ”็”จๅ†…่ฐƒ่ฏ•ๅทฅๅ…ทๅนณๅฐ ๅฝ“ๅ‰็‰ˆๆœฌๅ†…็ฝฎ 10 ไธชๆ’ไปถ๏ผŒ ๅผ€ๅ‘่€…ๅฏไปฅๅˆ›ๅปบ่‡ชๅทฑ็š„ๆ’ไปถ๏ผŒๅนถ้›†ๆˆ่ฟ› UME ๅนณๅฐใ€‚ ่ฏฆ่งๆœฌๆ–‡ไธบ UME ๅผ€ๅ‘ๆ’ไปถ้ƒจๅˆ†ใ€‚ flutter_ume ๅฟซ้€ŸๆŽฅๅ…ฅ ็‰นๅˆซ่ฏดๆ˜Ž ๅŠŸ่ƒฝไป‹็ป ไธบ UME ๅผ€ๅ‘ๆ’ไปถ ็‰ˆๆœฌ่ฏดๆ˜Ž ๅ…ผๅฎนๆ€ง ๅ•ๆต‹่ฆ†็›–็Ž‡

Bytedance Inc. 1.8k Dec 30, 2022
An android application built using Flutter that computes the Body Mass Index of person and suggestion to carry ,by taking Inputs (Weight, Height, and Age), Built using Flutter

BMI Calculator ?? Our Goal The objective of this tutorial is to look at how we can customise Flutter Widgets to achieve our own beautiful user interfa

dev_allauddin 7 Nov 2, 2022