How to Localization Flutter App to Multi-Languages part 2

In this article video we will learnt how to localization flutter app to multi-languages, demonstrating how we can Localize a Flutter application and Also how To change the Language with RTL or LTR  direction text and image, without Restarting the Application.

Also, this application is persisting the selected used shared_preferences package with button switcher between languages

 Video tutorial

How to Localization Flutter App to Multi-Languages part 1

8-  home page

Create HomePage class StatefulWidget in new file

import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { HomePage({Key key}) : super(key: key); @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { //_changeLanguage @override Widget build(BuildContext context) { // ui of home page return Scaffold( appBar: AppBar( title: Text(), //DropdownButton ), //Drawer //body ); } //ui of _mainPadding widget //ui of _drawerList widget }

We use  getTranslated(context, ''), to get translated text #import_library

8.1-DropdownButton

We add Dropdown Button for manual control with language-switcher #import_library

actions: <Widget>[ Padding( padding: const EdgeInsets.all(8.0), // We add Dropdown Button for manual control with language-switcher child: DropdownButton<Language>( underline: SizedBox(), // ui of icon icon: Icon( Icons.g_translate, color: Colors.white, ), // this function to change the languages selected when clicked onChanged: (Language language) { _changeLanguage(language); }, // to get the items of languages list [flags, code country] from Language class items: Language.languageList() .map<DropdownMenuItem<Language>>( (e) => DropdownMenuItem<Language>( value: e, child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ Text( e.flag, style: TextStyle(fontSize: 30), ), Text(e.name) ], ), ), ) .toList(), ), ), ],

and call _changeLanguage function to change Language code #import_library

void _changeLanguage(Language language) async { Locale _locale = await setLocale(language.languageCode); MyApp.setLocale(context, _locale); }

8.2-Drawer

drawer: Drawer( // to call _drawerList widget child: _drawerList(),),

 this is the ui of _drawerList widget

// ui of _drawerList widget Container _drawerList() { TextStyle _textStyle = TextStyle( color: Colors.white, fontSize: 24, ); return Container( color: Theme.of(context).primaryColor, child: ListView( padding: EdgeInsets.zero, children: <Widget>[ DrawerHeader( child: Container( height: 100, child: CircleAvatar(), ), ), // 1 ListTile( // ui of icon leading: Icon( Icons.info_outline, color: Colors.white, size: 30, ), // to get translated text title: Text( getTranslated(context, 'about_us'), style: _textStyle, ), // Navigating to About Page onTap: () { Navigator.pop(context); Navigator.pushNamed(context, aboutRoute); }, ), // 2 ListTile( // ui of icon leading: Icon( Icons.settings_applications, color: Colors.white, size: 30, ), title: Text( // to get translated text getTranslated(context, 'settings'), style: _textStyle, ), // Navigating to settings Page onTap: () { Navigator.pop(context); Navigator.pushNamed(context, settingsRoute); }, ), ], ), ); }

8.3-body

body: Container( padding: EdgeInsets.all(5), // to call _mainPadding widget child: _mainPadding(context), ),

this the ui of _mainPadding widget

// ui of _mainPadding widget Padding _mainPadding(BuildContext context) { return Padding( padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 0.0), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Container( height: MediaQuery.of(context).size.height / 10, child: Center( // to get translated text child: Text( getTranslated(context, 'header'), textAlign: TextAlign.center, style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, ), ), ), ), SizedBox(height: 12.0), Padding( padding: EdgeInsets.all(4), child: Text( // to get translated text getTranslated(context, "description"), style: TextStyle( fontSize: 16.0, color: Colors.black54, ), ), ), // ui of list in home page Expanded( child: ListView( children: [ Padding( padding: const EdgeInsets.all(4), child: Container( child: Column(children: [ // list 1 ListTile( trailing: Icon(Icons.add), leading: Image.asset( "images/image_one.jpg", height: 70.0, width: 70.0, fit: BoxFit.contain, ), // to get translated text title: Text( getTranslated(context, 'productOneName'), ), subtitle: Text( "\$500", ), ), // list 2 ListTile( trailing: Icon(Icons.add), leading: Image.asset( "images/image_two.jpg", height: 70.0, width: 70.0, fit: BoxFit.contain, ), // to get translated text title: Text( getTranslated(context, "productTwoName"), ), subtitle: Text( "\$500", ), ), // list 3 ListTile( trailing: Icon(Icons.add), leading: Image.asset( "images/image_three.jpg", height: 70.0, width: 70.0, fit: BoxFit.contain, ), // to get translated text title: Text( getTranslated(context, "productThreeName"), ), subtitle: Text( "\$500", ), ), // list 4 ListTile( trailing: Icon(Icons.add), leading: Image.asset( "images/image_four.jpg", height: 70.0, width: 70.0, fit: BoxFit.contain, ), // to get translated text title: Text( getTranslated(context, "productFourName"), ), subtitle: Text( "\$220", ), ), // list 5 ListTile( trailing: Icon(Icons.add), leading: Image.asset( "images/image_five.jpg", height: 70.0, width: 70.0, fit: BoxFit.contain, ), // to get translated text title: Text( getTranslated(context, "productFiveName"), ), subtitle: Text( "\$399", ), ), ])), ), ], ), ), // ui of buttons in home page SizedBox( height: 35.0, // button 1 child: ElevatedButton( onPressed: () {}, // to get translated text child: Text( getTranslated(context, "discoverButtonText"), style: TextStyle(color: Colors.white), ), style: ElevatedButton.styleFrom( primary: Colors.blue, shape: StadiumBorder(), elevation: 2.0, ), ), ), SizedBox(height: 12.0), SizedBox( height: 35.0, // button 2 child: ElevatedButton( onPressed: () {}, // to get translated text child: Text( getTranslated(context, "codeButtonText"), style: TextStyle(color: Colors.white), ), style: ElevatedButton.styleFrom( primary: Colors.blue, shape: StadiumBorder(), elevation: 2.0, ), ), ), ], ), ); }

8-setting page

Create SettingsPage class StatefulWidget in new file #impoet_library

import 'package:flutter/material.dart'; class SettingsPage extends StatefulWidget { SettingsPage({Key key}) : super(key: key); @override _SettingsPageState createState() => _SettingsPageState(); } class _SettingsPageState extends State<SettingsPage> { // function to change Language code void _changeLanguage(Language language) async { Locale _locale = await setLocale(language.languageCode); MyApp.setLocale(context, _locale); } @override Widget build(BuildContext context) { // ui of setting page return Scaffold( appBar: AppBar( title: Text( // to get translated text getTranslated(context, 'settings')), ), body: Container( child: Center( // We add Dropdown Button for manual control with language-switcher child: DropdownButton<Language>( iconSize: 30, hint: Text( // to get translated text getTranslated(context, 'change_language')), // this function to change the languages selected when clicked onChanged: (Language language) { _changeLanguage(language); }, // to get the items of languages list [flags, code country] from Language class items: Language.languageList() .map<DropdownMenuItem<Language>>( (e) => DropdownMenuItem<Language>( value: e, child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ Text( e.flag, style: TextStyle(fontSize: 30), ), Text(e.name) ], ), ), ) .toList(), )), ), ); } }

9-about page

Create AboutPage class StatefulWidget in new file #import_library

import 'package:flutter/material.dart'; class AboutPage extends StatefulWidget { AboutPage({Key key}) : super(key: key); @override _AboutPageState createState() => _AboutPageState(); } class _AboutPageState extends State<AboutPage> { @override Widget build(BuildContext context) { // ui of about page return Scaffold( appBar: AppBar( title: Text( // to get translated text getTranslated(context, 'about_us')), ), body: Container( padding: EdgeInsets.all(20), child: Center( child: Text( // to get translated text getTranslated(context, 'about')), ), ), ); } }

10- CustomRouter class 

Create CustomRouter class in new file to control with navigator between page #import_library

import 'package:flutter/material.dart'; class CustomRouter { static Route<dynamic> generatedRoute(RouteSettings settings) { switch (settings.name) { case homeRoute: return MaterialPageRoute(builder: (_) => HomePage()); case aboutRoute: return MaterialPageRoute(builder: (_) => AboutPage()); default: return MaterialPageRoute(builder: (_) => SettingsPage()); } } } //route_constants

10.1- route_constants

const String homeRoute = "home"; const String aboutRoute = "about"; const String settingsRoute = "settings";

11- set up onGenerateRoute 

In main.dart file set up the route to control with navigatation between pages

onGenerateRoute: CustomRouter.generatedRoute, initialRoute: homeRoute,

How to Localization Flutter App to Multi-Languages part 1