An Easy Localization (with Customizing), with Dynamic Theme!

Quds Interactive

An easy localization (with customizing), with dynamic theme!

Why Quds Interactive?

Every app today should considers two factors:

  • User language.
  • Device brightness mode.

This library introduce a simple way to control those factors with saving, restoring preferences.

How to use?


void main() async{
   await QudsInteractiveApp.initialize(
      supportedLanguageCodes: ['en', 'ar_ps', 'fr'],);

     // Then run your app


Wrapping the app in QudsInteractiveApp

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return QudsInteractiveApp(
          builder: (c) => MyHomePage(title: 'Test Translation'.tr),
  • QudsInteractiveApp used to apply the changes to the app.


  • To Translate
Text('hi_message'.tr); // <- Translate to the default selected language.
  • Translated (Widget) To translate to custome lang (Not the default)
Translated(langCode:'ar', child:CustomWidget() );

class CustomWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    var lang = QudsTranslated.of(context);
    return Text(lang.translate('hi_message'));

How to support additional translations?

In initializing, you can add more specific translations,

      await QudsInteractiveApp.initialize(
      supportedLanguageCodes: ['en', 'ar_ps', 'fr'],
      additionalDictionaries: {'ar': arabicSupport, 'en': englishSupport});


var arabicSupport = {
  'app_title': 'عنوان التطبيق',
  'Test Translation': 'تجربة الترجمة',
  'hi_message': 'أهلًا أخي'


var englishSupport = {
    'app_title': 'App title',
     'hi_message': 'Hi Bro!'

How to change the selected language and theme?

By default the default language will be the device language, and the brightness will have the default device option. To change the translation:

QudsTranslation.setLanguage('en', onChanged:(){
// To save the lang
// QudsInteractiveApp.appController.saveStateInSharedPreferences();

To toggle the theme:


The package provides simple ui to change the current language and theme:

    // To change the translation

    // To change the theme

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add quds_interactive

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

  quds_interactive: ^0.0.5+1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:quds_interactive/quds_interactive.dart'; 


import 'package:example/translations/en.dart';
import 'package:example/ui/main_app_lang.dart';
import 'package:example/ui/main_drawer.dart';
import 'package:flutter/material.dart';
import 'package:quds_interactive/quds_interactive.dart';
import 'package:quds_ui_kit/quds_ui_kit.dart';
import 'translations/ar.dart';
import 'ui/translated_as_required.dart';

void main() async {
  await QudsInteractiveApp.initialize(
    supportedLanguageCodes: ['en', 'ar_ps', 'fr', 'es'],
    additionalDictionaries: {'ar': arabicSupport, 'en': englishSupport},
    customFonts: {'ar': 'Cairo'},
    // defaultFont: 'Cairo'


class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return QudsInteractiveApp(
      debugShowCheckedModeBanner: false,
      builder: (c) => MyHomePage(title: 'Test Translation'.tr),

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: const MainDrawer(),
        appBar: AppBar(
          actions: [
                onPressed: () => Navigator.push(
                        zoomType: ZoomType.Out,
                        builder: (c) => MyHomePage(title: 'Another Page'))),
                icon: Icon(Icons.arrow_forward_rounded))
          title: Text(widget.title),
        body: SingleChildScrollView(
            child: Container(
          child: Column(
            children: <Widget>[
                height: 50,
                'Current Language'.tr,
                currentLanguage?.langName ?? '',
                style: Theme.of(context).textTheme.headline4,
                height: 30,
              QudsTranslated(langCode: 'en', child: TranslatedAsRequired()),
              QudsTranslated(langCode: 'ar', child: TranslatedAsRequired()),
        floatingActionButton: _buildFloatingButton());

  Widget _buildFloatingButton() =>
      Row(mainAxisAlignment: MainAxisAlignment.end, children: [
          heroTag: 'btn1',
          onPressed: () => QudsTranslation.showLanguagesSelectionBorderSheet(
              withCountryName: true,
              withFlagImage: false),
          tooltip: 'Change Language'.tr,
          child: Icon(Icons.language),
          width: 10,
          heroTag: 'btn2',
          onPressed: () => QudsTheme.showThemesSelectionBorderSheet(
          tooltip: 'Toggle Theme'.tr,
          child: QudsAnimatedCombinedIcons(
            startIcon: Icons.brightness_5_outlined,
            endIcon: Icons.brightness_3_rounded,
            showStartIcon: !QudsTheme.provider.isDark.value,
          width: 10,
            onPressed: () => showDatePicker(
                context: context,
                initialDate: DateTime(2000),
                firstDate: DateTime(1990),
            child: Text('Date'.tr))

Download Details:

Author: MohammedAsaadAsaad

Source Code:


What is GEEK

Buddha Community

An Easy Localization (with Customizing), with Dynamic Theme!
Servo Node

Servo Node


Beginner’s Guide To Use WordPress Theme Customizer (Ultimate Guide 2021) › Servo Node

This tutorial or guide to use WordPress Theme Customizer is for those who’s a newbie to WordPress and just finished installing WordPress for his website. Selecting a suitable theme for your brand and requirement, is the very first step to create an attractive website. But even after the theme is selected, how further customization and website designing should be performed? Here what the WordPress Theme Customizer and its usage can be helpful.

What is WordPress Theme Customizer?
WordPress Theme Customizer is WordPress in-built feature that allows users to design and style their WordPress website. Also, it offers to preview any changes before publishing the design changes to front end. So, no matters you have selected the best theme for your brand, you need to do some refinements as well to meet your proper purposes. And in order to do so, you should aware of how to use WordPress theme customizer.

Where to locate WordPress Theme Customizer in Dashboard?
WordPress website offers a standard theme customizer as it comes as a built-in feature. In order to access it, users can log-in to WordPress dashboard with admin (Administrator) account. Once logged in, navigate to Appearance > Customize, which can be located in the left hand sidebar of dashboard. Once you click Customize, it will open WordPress theme customizer with current active theme.

WordPress Theme Customizer Options Explained:
Typography: Used for changing font settings and typography styles
Site Identity: Here, users can assign a site title, tagline, and upload site logo, icon, and so on.
Colors: Used for changing color preferences like background color, link color, etc.
Header Image: Under this section, user can set a header image.
Background Image: Allows to set a background image for WordPress website.
Menus: This section is used for creating new site menus, assigning its positions, and many more.
Widgets: Under this section, users can add different widgets in sidebar, footer, homepage, etc
Homepage Settings: Mostly, this section is used for assigning homepage as either a static page or blog page.
Theme Settings: This section is dependent on certain themes, allows more additional features offered by Theme authors.
Additional CSS: Custom or additional CSS can be assigned here. If you are expert to deal with CSS, HTML, and core designing skills, this section can be very helpful.

How To Use WordPress Theme Customizer?
After looking through various available features under theme customizer in WordPress, obviously there’s many thing you can customize within your website or blog. So let;s learn each above discussed options one by one.

1: Changing Default Website Fonts (Typography)
2: Site Title, Logo, and Favicon Customization (Site Identity)
3: Website Color Scheme Customization (Colors)
4: Header Image Customization (Header Image)
5: Customizing Background Image
6: Customizing Navigation Menus
7: Customizing WordPress Widgets
8: Customizing Homepage Settings
9: Customizing Theme Settings
10: Customizing Additional CSS

Need More Customizations In WordPress site?
The standard customizer settings is all here discussed in this article, but in case if you need more modifications which are not here specified, you can do so using WordPress Plugin. You can easily search and find more customization plugins which can add more tweaking options to your WordPress blog easily.

#customize wordpress theme #wordpress theme customizer #how to use wordpress theme customizer

Localization - Laravel Localization Example

In this example i will show you localization - laravel localization example.

Laravel’s localization features provide a convenient way to retrieve text in different languages, allowing you to easily support multiple languages within your application. So here i will show you how to create localization or laravel dynamic language.

Read More : Localization - Laravel Localization Example

Read Also : How To Integrate Paypal Payment Gateway In Laravel

#localization - laravel localization example #localization tutorial #localization #laravel multi languag #laravel documentation #laravel localization

Fynzo Survey

Fynzo Survey


Fynzo Customer Feedback Software For Cafes, Hotels, Saloons, Spa!

Customer Feedback Tool | Fynzo online customer feedback comes with Android, iOS app. Collect feedback from your customers with tablets or send them feedback links.

Visit page for more information:


#customer feedback system #powerful customer feedback system #free customer feedback tools #automated customer feedback system #customer feedback tools #customer rating system

Bhakti Rane


Alerts4Dynamics - Alerts / Notifications Management in Dynamics 365 CRM

Alerts4Dynamics is productivity app for Dynamics 365 CRM that helps to create, schedule, manage and track alerts. It helps to notify and pass relevant information to target audience right within Dynamics 365 CRM. These notifications can be created and displayed indefinitely or for a defined scheduled period. Notification button is available on all entities and can be accessed from anywhere in the CRM.
• Create Announcement and Rule Based/Record Based alerts.
• Alerts can be sent as Pop-ups, Form Notifications or Email to target Dynamics 365 CRM users.
• Categorize alerts as Information, Warning or Critical.
• Track log of read/dismissed alerts by users.
• Define process start date from when the notifications will start getting created and process end date when creation of new notifications will stop. Also, add the display end date for notification.

#dynamics 365 pop-up alert #dynamics 365 email alerts #dynamics 365 bulk alerts #dynamics crm pop-up alert #dynamics 365 notifications #dynamics crm alert

Mark Anderson

Mark Anderson


Local Bitcoin Clone launch a trending business in crypto platform

The Blockchain App Factory offers a Local Bitcoin clone platform for its client with an impressive outcome that lures many users quickly. It allows the traders to buy and sell cryptocurrency for paying a particular party. This platform comes with peer-to-peer (P2P) with escrow for secure transactions, which helps in gaining trust and comfort with the feedback mechanism.

#local bitcoin clone script #buy & sell bitcoins with local currency #local bitcoin clone #best local bitcoin clone #local bitcoin exchange script #local bitcoin clone scripts