Home Blog

PageView In Flutter with dot indicator

0
Flutter Pageview with dot indicator

Hi Guy’s Welcome to Proto Coders Point, In this flutter article let’s check out how to use PageView widget in flutter.

Example on PageView Widget you will see in this article:-

  1. Simple 3 Pageview.
  2. PageView with dots indicator.

Before going into flutter code, let’s explore more about flutter pageview widget.

What is Flutter PageView? Where & How to use it

A page-by-page scrollable list is build by using flutter pageview widget. It been widely used to create a beautiful carousel or slideshow UI, Which you may have observed in many applications.

Pageview Constructor

PageView({
   Key? key, 
   Axis scrollDirection = Axis.horizontal, 
   bool reverse = false, 
   PageController? controller, 
   ScrollPhysics? physics, 
   bool pageSnapping = true, 
   ValueChanged<int>? onPageChanged, 
   List<Widget> children = const <Widget>[], 
   DragStartBehavior dragStartBehavior = DragStartBehavior.start, 
   bool allowImplicitScrolling = false, String? restorationId, 
   Clip clipBehavior = Clip.hardEdge, 
   ScrollBehavior? scrollBehavior, 
   bool padEnds = true
})

Dymanically page views building use below constructor, useful when you load content to be shown into PageView from server.

PageView.builder({
  Key? key, 
  Axis scrollDirection = Axis.horizontal, 
  bool reverse = false, 
  PageController? controller, 
  ScrollPhysics? physics, 
  bool pageSnapping = true, 
  ValueChanged<int>? onPageChanged, 
  required IndexedWidgetBuilder itemBuilder, 
  ChildIndexGetter? findChildIndexCallback, 
  int? itemCount, 
  DragStartBehavior dragStartBehavior = DragStartBehavior.start, 
  bool allowImplicitScrolling = false, 
  String? restorationId, 
  Clip clipBehavior = Clip.hardEdge, 
  ScrollBehavior? scrollBehavior, 
  bool padEnds = true
})

Flutter PageView Example’s

Let’s implement it in below code

Example 1: Simple PageView Flutter Example

In this Example, I will create 3 separate dart file (page1, page2, page3) in lib directory of my flutter project. This 3 pages will be shown in main.dart page by using PageView Widget.

My Project Structure

page1.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      body: Center(
        child: Text('Page1',style: TextStyle(fontSize: 30),),
      ),
    );
  }
}

Similarly create 2 more pages and design it as per your UI.

main.dart – Complete Code with Explanations

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'page1.dart';
import 'page2.dart';
import 'page3.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Initializing a Controller fore PageView
  final PageController _pageViewController = PageController(initialPage: 0); // set the initial page you want to show
  
  
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _pageViewController.dispose();  // dispose the PageController
  }
  
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //use pageview widget to show pages when user slides
      body: PageView(
        controller: _pageViewController,
        children: [
          Page1(),Page2(),Page3()   
        ],
      ) ,
    );
  }
}


Example 2 – Pageview with indicator flutter example

Show a Page Slider active page dots, basically show a dots at bottom.

In Below Example, as I said will have dots indicator, which indicate which is the current active page, The App user can simply swipe left, right to switch between pages and also taps on the dot indicator to switch between pages.

Below code output:

flutter pageview with indicator
Pageview with dot indicator

Complete Source Code – main.dart

import 'package:flutter/material.dart';
import 'page1.dart';
import 'page2.dart';
import 'page3.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Initializing a Controller fore PageView
  final PageController _pageViewController = PageController(initialPage: 0); // set the initial page you want to show

  int _activePage = 0;  // will hold current active page index value

  //Create a List Holding all the Pages
  final List<Widget> _Pages = [
    Page1(),
    Page2(),
    Page3()
  ];

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _pageViewController.dispose();  // dispose the PageController
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
    // will make use of Stack Widget, so that One Widget can we placed on top
      body: Stack(
        children: [
          PageView.builder(
            controller: _pageViewController,
            onPageChanged: (int index){
              setState(() {
                _activePage = index;
              });
            },
            itemCount: _Pages.length,
              itemBuilder: (BuildContext context, int index){
                return _Pages[index];
              }
          ),
          //creating dots at bottom
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: 40,
              child: Container(
                color: Colors.black12,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: List<Widget>.generate(
                      _Pages.length,
                          (index) => Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 8),
                        child: InkWell(
                          onTap: () {
                            _pageViewController.animateToPage(index,
                                duration: const Duration(milliseconds: 300),
                                curve: Curves.easeIn);
                          },
                          child: CircleAvatar(
                            radius: 5,
                            // check if a dot is connected to the current page
                            // if true, give it a different color
                            backgroundColor: _activePage == index
                                ? Colors.greenAccent
                                : Colors.white30,
                          ),
                        ),
                      )),
                ),
              ),
          ),
        ],
      ),
    );
  }
}

Flutter display digits in Currency Format

0
flutter currency format

Hi Guy’s Welcome to Proto Coders Point. In this Flutter Tutorial, let’s learn how to format number in currency format in flutter dart.

Example:

$ 10,000.00 , ₹ 10,000.00

To display digit in flutter currency format, will make use of dart offlicial package intl using this flutter intl package we can make user NumberFormat class to format number to currency in flutter.

Let’s get started

Adding/installing intl dependencies in flutter project

Open pubspec.yaml file

In pubspec.yaml file under dependencies section add intl as follow:

dependencies:
  intl: ^0.17.0

Now, hitp pub get button or enter below command to download the intl package

flutter pub get

Import it to use intl

Then, To use intl package for currency number format you need to import it where reqiured:

import 'package:intl/intl.dart';

Video Tutorial


Intl NumberFormat Currency- flutter

NumberFormat in flutter dart

1. Simple Currency digit format

To show currency symbol ($, ₹, đ, €, ¥… etc) at the start of number use below code:

Syntax

NumberFormat.simpleCurrency({
  String? locale, 
  String? name, 
  int? decimalDigits
}).format(number);

Example:

NumberFormat.simpleCurrency(locale: 'hi-IN').format(10000);
flutter currency format

2. compact simple Currency

If you want to display currency in compact representation something like this ($100K, $3M) use below constructor.

NumberFormat.compactSimpleCurrency({
  String? locale, 
  String? name, 
  int? decimalDigits
}).format(number)

Example:

NumberFormat.compactSimpleCurrency(locale: 'en-US').format(10000)
flutter currency format

List of locale codes With Country name

var LANGUAGE_BY_LOCALE = {
    af_NA: "Afrikaans (Namibia)",
    af_ZA: "Afrikaans (South Africa)",
    af: "Afrikaans",
    ak_GH: "Akan (Ghana)",
    ak: "Akan",
    sq_AL: "Albanian (Albania)",
    sq: "Albanian",
    am_ET: "Amharic (Ethiopia)",
    am: "Amharic",
    ar_DZ: "Arabic (Algeria)",
    ar_BH: "Arabic (Bahrain)",
    ar_EG: "Arabic (Egypt)",
    ar_IQ: "Arabic (Iraq)",
    ar_JO: "Arabic (Jordan)",
    ar_KW: "Arabic (Kuwait)",
    ar_LB: "Arabic (Lebanon)",
    ar_LY: "Arabic (Libya)",
    ar_MA: "Arabic (Morocco)",
    ar_OM: "Arabic (Oman)",
    ar_QA: "Arabic (Qatar)",
    ar_SA: "Arabic (Saudi Arabia)",
    ar_SD: "Arabic (Sudan)",
    ar_SY: "Arabic (Syria)",
    ar_TN: "Arabic (Tunisia)",
    ar_AE: "Arabic (United Arab Emirates)",
    ar_YE: "Arabic (Yemen)",
    ar: "Arabic",
    hy_AM: "Armenian (Armenia)",
    hy: "Armenian",
    as_IN: "Assamese (India)",
    as: "Assamese",
    asa_TZ: "Asu (Tanzania)",
    asa: "Asu",
    az_Cyrl: "Azerbaijani (Cyrillic)",
    az_Cyrl_AZ: "Azerbaijani (Cyrillic, Azerbaijan)",
    az_Latn: "Azerbaijani (Latin)",
    az_Latn_AZ: "Azerbaijani (Latin, Azerbaijan)",
    az: "Azerbaijani",
    bm_ML: "Bambara (Mali)",
    bm: "Bambara",
    eu_ES: "Basque (Spain)",
    eu: "Basque",
    be_BY: "Belarusian (Belarus)",
    be: "Belarusian",
    bem_ZM: "Bemba (Zambia)",
    bem: "Bemba",
    bez_TZ: "Bena (Tanzania)",
    bez: "Bena",
    bn_BD: "Bengali (Bangladesh)",
    bn_IN: "Bengali (India)",
    bn: "Bengali",
    bs_BA: "Bosnian (Bosnia and Herzegovina)",
    bs: "Bosnian",
    bg_BG: "Bulgarian (Bulgaria)",
    bg: "Bulgarian",
    my_MM: "Burmese (Myanmar [Burma])",
    my: "Burmese",
    yue_Hant_HK: "Cantonese (Traditional, Hong Kong SAR China)",
    ca_ES: "Catalan (Spain)",
    ca: "Catalan",
    tzm_Latn: "Central Morocco Tamazight (Latin)",
    tzm_Latn_MA: "Central Morocco Tamazight (Latin, Morocco)",
    tzm: "Central Morocco Tamazight",
    chr_US: "Cherokee (United States)",
    chr: "Cherokee",
    cgg_UG: "Chiga (Uganda)",
    cgg: "Chiga",
    zh_Hans: "Chinese (Simplified Han)",
    zh_Hans_CN: "Chinese (Simplified Han, China)",
    zh_Hans_HK: "Chinese (Simplified Han, Hong Kong SAR China)",
    zh_Hans_MO: "Chinese (Simplified Han, Macau SAR China)",
    zh_Hans_SG: "Chinese (Simplified Han, Singapore)",
    zh_Hant: "Chinese (Traditional Han)",
    zh_Hant_HK: "Chinese (Traditional Han, Hong Kong SAR China)",
    zh_Hant_MO: "Chinese (Traditional Han, Macau SAR China)",
    zh_Hant_TW: "Chinese (Traditional Han, Taiwan)",
    zh: "Chinese",
    kw_GB: "Cornish (United Kingdom)",
    kw: "Cornish",
    hr_HR: "Croatian (Croatia)",
    hr: "Croatian",
    cs_CZ: "Czech (Czech Republic)",
    cs: "Czech",
    da_DK: "Danish (Denmark)",
    da: "Danish",
    nl_BE: "Dutch (Belgium)",
    nl_NL: "Dutch (Netherlands)",
    nl: "Dutch",
    ebu_KE: "Embu (Kenya)",
    ebu: "Embu",
    en_AS: "English (American Samoa)",
    en_AU: "English (Australia)",
    en_BE: "English (Belgium)",
    en_BZ: "English (Belize)",
    en_BW: "English (Botswana)",
    en_CA: "English (Canada)",
    en_GU: "English (Guam)",
    en_HK: "English (Hong Kong SAR China)",
    en_IN: "English (India)",
    en_IE: "English (Ireland)",
    en_IL: "English (Israel)",
    en_JM: "English (Jamaica)",
    en_MT: "English (Malta)",
    en_MH: "English (Marshall Islands)",
    en_MU: "English (Mauritius)",
    en_NA: "English (Namibia)",
    en_NZ: "English (New Zealand)",
    en_MP: "English (Northern Mariana Islands)",
    en_PK: "English (Pakistan)",
    en_PH: "English (Philippines)",
    en_SG: "English (Singapore)",
    en_ZA: "English (South Africa)",
    en_TT: "English (Trinidad and Tobago)",
    en_UM: "English (U.S. Minor Outlying Islands)",
    en_VI: "English (U.S. Virgin Islands)",
    en_GB: "English (United Kingdom)",
    en_US: "English (United States)",
    en_ZW: "English (Zimbabwe)",
    en: "English",
    eo: "Esperanto",
    et_EE: "Estonian (Estonia)",
    et: "Estonian",
    ee_GH: "Ewe (Ghana)",
    ee_TG: "Ewe (Togo)",
    ee: "Ewe",
    fo_FO: "Faroese (Faroe Islands)",
    fo: "Faroese",
    fil_PH: "Filipino (Philippines)",
    fil: "Filipino",
    fi_FI: "Finnish (Finland)",
    fi: "Finnish",
    fr_BE: "French (Belgium)",
    fr_BJ: "French (Benin)",
    fr_BF: "French (Burkina Faso)",
    fr_BI: "French (Burundi)",
    fr_CM: "French (Cameroon)",
    fr_CA: "French (Canada)",
    fr_CF: "French (Central African Republic)",
    fr_TD: "French (Chad)",
    fr_KM: "French (Comoros)",
    fr_CG: "French (Congo - Brazzaville)",
    fr_CD: "French (Congo - Kinshasa)",
    fr_CI: "French (Côte d’Ivoire)",
    fr_DJ: "French (Djibouti)",
    fr_GQ: "French (Equatorial Guinea)",
    fr_FR: "French (France)",
    fr_GA: "French (Gabon)",
    fr_GP: "French (Guadeloupe)",
    fr_GN: "French (Guinea)",
    fr_LU: "French (Luxembourg)",
    fr_MG: "French (Madagascar)",
    fr_ML: "French (Mali)",
    fr_MQ: "French (Martinique)",
    fr_MC: "French (Monaco)",
    fr_NE: "French (Niger)",
    fr_RW: "French (Rwanda)",
    fr_RE: "French (Réunion)",
    fr_BL: "French (Saint Barthélemy)",
    fr_MF: "French (Saint Martin)",
    fr_SN: "French (Senegal)",
    fr_CH: "French (Switzerland)",
    fr_TG: "French (Togo)",
    fr: "French",
    ff_SN: "Fulah (Senegal)",
    ff: "Fulah",
    gl_ES: "Galician (Spain)",
    gl: "Galician",
    lg_UG: "Ganda (Uganda)",
    lg: "Ganda",
    ka_GE: "Georgian (Georgia)",
    ka: "Georgian",
    de_AT: "German (Austria)",
    de_BE: "German (Belgium)",
    de_DE: "German (Germany)",
    de_LI: "German (Liechtenstein)",
    de_LU: "German (Luxembourg)",
    de_CH: "German (Switzerland)",
    de: "German",
    el_CY: "Greek (Cyprus)",
    el_GR: "Greek (Greece)",
    el: "Greek",
    gu_IN: "Gujarati (India)",
    gu: "Gujarati",
    guz_KE: "Gusii (Kenya)",
    guz: "Gusii",
    ha_Latn: "Hausa (Latin)",
    ha_Latn_GH: "Hausa (Latin, Ghana)",
    ha_Latn_NE: "Hausa (Latin, Niger)",
    ha_Latn_NG: "Hausa (Latin, Nigeria)",
    ha: "Hausa",
    haw_US: "Hawaiian (United States)",
    haw: "Hawaiian",
    he_IL: "Hebrew (Israel)",
    he: "Hebrew",
    hi_IN: "Hindi (India)",
    hi: "Hindi",
    hu_HU: "Hungarian (Hungary)",
    hu: "Hungarian",
    is_IS: "Icelandic (Iceland)",
    is: "Icelandic",
    ig_NG: "Igbo (Nigeria)",
    ig: "Igbo",
    id_ID: "Indonesian (Indonesia)",
    id: "Indonesian",
    ga_IE: "Irish (Ireland)",
    ga: "Irish",
    it_IT: "Italian (Italy)",
    it_CH: "Italian (Switzerland)",
    it: "Italian",
    ja_JP: "Japanese (Japan)",
    ja: "Japanese",
    kea_CV: "Kabuverdianu (Cape Verde)",
    kea: "Kabuverdianu",
    kab_DZ: "Kabyle (Algeria)",
    kab: "Kabyle",
    kl_GL: "Kalaallisut (Greenland)",
    kl: "Kalaallisut",
    kln_KE: "Kalenjin (Kenya)",
    kln: "Kalenjin",
    kam_KE: "Kamba (Kenya)",
    kam: "Kamba",
    kn_IN: "Kannada (India)",
    kn: "Kannada",
    kk_Cyrl: "Kazakh (Cyrillic)",
    kk_Cyrl_KZ: "Kazakh (Cyrillic, Kazakhstan)",
    kk: "Kazakh",
    km_KH: "Khmer (Cambodia)",
    km: "Khmer",
    ki_KE: "Kikuyu (Kenya)",
    ki: "Kikuyu",
    rw_RW: "Kinyarwanda (Rwanda)",
    rw: "Kinyarwanda",
    kok_IN: "Konkani (India)",
    kok: "Konkani",
    ko_KR: "Korean (South Korea)",
    ko: "Korean",
    khq_ML: "Koyra Chiini (Mali)",
    khq: "Koyra Chiini",
    ses_ML: "Koyraboro Senni (Mali)",
    ses: "Koyraboro Senni",
    lag_TZ: "Langi (Tanzania)",
    lag: "Langi",
    lv_LV: "Latvian (Latvia)",
    lv: "Latvian",
    lt_LT: "Lithuanian (Lithuania)",
    lt: "Lithuanian",
    luo_KE: "Luo (Kenya)",
    luo: "Luo",
    luy_KE: "Luyia (Kenya)",
    luy: "Luyia",
    mk_MK: "Macedonian (Macedonia)",
    mk: "Macedonian",
    jmc_TZ: "Machame (Tanzania)",
    jmc: "Machame",
    kde_TZ: "Makonde (Tanzania)",
    kde: "Makonde",
    mg_MG: "Malagasy (Madagascar)",
    mg: "Malagasy",
    ms_BN: "Malay (Brunei)",
    ms_MY: "Malay (Malaysia)",
    ms: "Malay",
    ml_IN: "Malayalam (India)",
    ml: "Malayalam",
    mt_MT: "Maltese (Malta)",
    mt: "Maltese",
    gv_GB: "Manx (United Kingdom)",
    gv: "Manx",
    mr_IN: "Marathi (India)",
    mr: "Marathi",
    mas_KE: "Masai (Kenya)",
    mas_TZ: "Masai (Tanzania)",
    mas: "Masai",
    mer_KE: "Meru (Kenya)",
    mer: "Meru",
    mfe_MU: "Morisyen (Mauritius)",
    mfe: "Morisyen",
    naq_NA: "Nama (Namibia)",
    naq: "Nama",
    ne_IN: "Nepali (India)",
    ne_NP: "Nepali (Nepal)",
    ne: "Nepali",
    nd_ZW: "North Ndebele (Zimbabwe)",
    nd: "North Ndebele",
    nb_NO: "Norwegian Bokmål (Norway)",
    nb: "Norwegian Bokmål",
    nn_NO: "Norwegian Nynorsk (Norway)",
    nn: "Norwegian Nynorsk",
    nyn_UG: "Nyankole (Uganda)",
    nyn: "Nyankole",
    or_IN: "Oriya (India)",
    or: "Oriya",
    om_ET: "Oromo (Ethiopia)",
    om_KE: "Oromo (Kenya)",
    om: "Oromo",
    ps_AF: "Pashto (Afghanistan)",
    ps: "Pashto",
    fa_AF: "Persian (Afghanistan)",
    fa_IR: "Persian (Iran)",
    fa: "Persian",
    pl_PL: "Polish (Poland)",
    pl: "Polish",
    pt_BR: "Portuguese (Brazil)",
    pt_GW: "Portuguese (Guinea-Bissau)",
    pt_MZ: "Portuguese (Mozambique)",
    pt_PT: "Portuguese (Portugal)",
    pt: "Portuguese",
    pa_Arab: "Punjabi (Arabic)",
    pa_Arab_PK: "Punjabi (Arabic, Pakistan)",
    pa_Guru: "Punjabi (Gurmukhi)",
    pa_Guru_IN: "Punjabi (Gurmukhi, India)",
    pa: "Punjabi",
    ro_MD: "Romanian (Moldova)",
    ro_RO: "Romanian (Romania)",
    ro: "Romanian",
    rm_CH: "Romansh (Switzerland)",
    rm: "Romansh",
    rof_TZ: "Rombo (Tanzania)",
    rof: "Rombo",
    ru_MD: "Russian (Moldova)",
    ru_RU: "Russian (Russia)",
    ru_UA: "Russian (Ukraine)",
    ru: "Russian",
    rwk_TZ: "Rwa (Tanzania)",
    rwk: "Rwa",
    saq_KE: "Samburu (Kenya)",
    saq: "Samburu",
    sg_CF: "Sango (Central African Republic)",
    sg: "Sango",
    seh_MZ: "Sena (Mozambique)",
    seh: "Sena",
    sr_Cyrl: "Serbian (Cyrillic)",
    sr_Cyrl_BA: "Serbian (Cyrillic, Bosnia and Herzegovina)",
    sr_Cyrl_ME: "Serbian (Cyrillic, Montenegro)",
    sr_Cyrl_RS: "Serbian (Cyrillic, Serbia)",
    sr_Latn: "Serbian (Latin)",
    sr_Latn_BA: "Serbian (Latin, Bosnia and Herzegovina)",
    sr_Latn_ME: "Serbian (Latin, Montenegro)",
    sr_Latn_RS: "Serbian (Latin, Serbia)",
    sr: "Serbian",
    sn_ZW: "Shona (Zimbabwe)",
    sn: "Shona",
    ii_CN: "Sichuan Yi (China)",
    ii: "Sichuan Yi",
    si_LK: "Sinhala (Sri Lanka)",
    si: "Sinhala",
    sk_SK: "Slovak (Slovakia)",
    sk: "Slovak",
    sl_SI: "Slovenian (Slovenia)",
    sl: "Slovenian",
    xog_UG: "Soga (Uganda)",
    xog: "Soga",
    so_DJ: "Somali (Djibouti)",
    so_ET: "Somali (Ethiopia)",
    so_KE: "Somali (Kenya)",
    so_SO: "Somali (Somalia)",
    so: "Somali",
    es_AR: "Spanish (Argentina)",
    es_BO: "Spanish (Bolivia)",
    es_CL: "Spanish (Chile)",
    es_CO: "Spanish (Colombia)",
    es_CR: "Spanish (Costa Rica)",
    es_DO: "Spanish (Dominican Republic)",
    es_EC: "Spanish (Ecuador)",
    es_SV: "Spanish (El Salvador)",
    es_GQ: "Spanish (Equatorial Guinea)",
    es_GT: "Spanish (Guatemala)",
    es_HN: "Spanish (Honduras)",
    es_419: "Spanish (Latin America)",
    es_MX: "Spanish (Mexico)",
    es_NI: "Spanish (Nicaragua)",
    es_PA: "Spanish (Panama)",
    es_PY: "Spanish (Paraguay)",
    es_PE: "Spanish (Peru)",
    es_PR: "Spanish (Puerto Rico)",
    es_ES: "Spanish (Spain)",
    es_US: "Spanish (United States)",
    es_UY: "Spanish (Uruguay)",
    es_VE: "Spanish (Venezuela)",
    es: "Spanish",
    sw_KE: "Swahili (Kenya)",
    sw_TZ: "Swahili (Tanzania)",
    sw: "Swahili",
    sv_FI: "Swedish (Finland)",
    sv_SE: "Swedish (Sweden)",
    sv: "Swedish",
    gsw_CH: "Swiss German (Switzerland)",
    gsw: "Swiss German",
    shi_Latn: "Tachelhit (Latin)",
    shi_Latn_MA: "Tachelhit (Latin, Morocco)",
    shi_Tfng: "Tachelhit (Tifinagh)",
    shi_Tfng_MA: "Tachelhit (Tifinagh, Morocco)",
    shi: "Tachelhit",
    dav_KE: "Taita (Kenya)",
    dav: "Taita",
    ta_IN: "Tamil (India)",
    ta_LK: "Tamil (Sri Lanka)",
    ta: "Tamil",
    te_IN: "Telugu (India)",
    te: "Telugu",
    teo_KE: "Teso (Kenya)",
    teo_UG: "Teso (Uganda)",
    teo: "Teso",
    th_TH: "Thai (Thailand)",
    th: "Thai",
    bo_CN: "Tibetan (China)",
    bo_IN: "Tibetan (India)",
    bo: "Tibetan",
    ti_ER: "Tigrinya (Eritrea)",
    ti_ET: "Tigrinya (Ethiopia)",
    ti: "Tigrinya",
    to_TO: "Tonga (Tonga)",
    to: "Tonga",
    tr_TR: "Turkish (Turkey)",
    tr: "Turkish",
    uk_UA: "Ukrainian (Ukraine)",
    uk: "Ukrainian",
    ur_IN: "Urdu (India)",
    ur_PK: "Urdu (Pakistan)",
    ur: "Urdu",
    uz_Arab: "Uzbek (Arabic)",
    uz_Arab_AF: "Uzbek (Arabic, Afghanistan)",
    uz_Cyrl: "Uzbek (Cyrillic)",
    uz_Cyrl_UZ: "Uzbek (Cyrillic, Uzbekistan)",
    uz_Latn: "Uzbek (Latin)",
    uz_Latn_UZ: "Uzbek (Latin, Uzbekistan)",
    uz: "Uzbek",
    vi_VN: "Vietnamese (Vietnam)",
    vi: "Vietnamese",
    vun_TZ: "Vunjo (Tanzania)",
    vun: "Vunjo",
    cy_GB: "Welsh (United Kingdom)",
    cy: "Welsh",
    yo_NG: "Yoruba (Nigeria)",
    yo: "Yoruba",
    zu_ZA: "Zulu (South Africa)",
    zu: "Zulu"
}

Similar Article

How to add commas to number – Digit Grouping Number format

How to Format date in Dart language

How to round up number in dart language

Different ways to reverse a string in Python

0
how to reverse a string in python

Hi Guys, Welcome to Proto Coders Point, In this quick code snippet article, let’s learn different way to reverse a string in python with & without using python inbuild methods.

Different ways to reverse a string in python language

Let’s get Started

Example 1: Reverse a string in using for loop

Below example reverse a string without using inbuilt function in python

str = "ebutuoY no tnioP sredoC otorP ebircsbuS"
st =""
for i in str:
    st = i + st
print(st)
reverse a string in python using for loop
#Output:-

Example 2: Reverse string in Python using an slice

We can easily reverse a string by using python operator called extended slice operator.

Basically slice operator in python accepts 3 parameters (start, stop & step), In below example for start & stop index we pass no value, which will by default start index from 0 and end with n-1, then in step parameter we pass -1, which means string be been slice and traverse from end of given string, up to the 1st index position and thus we have a reversed string.

def rev(s):
    s = s[::-1]
    return s
 
s = "Proto Coders Point"
print("The original string : ",s)

print("The reversed string : ",rev(s))


python reverse string using slice
slice to reverse string in python

Example 3:  python code to reverse a string using join & reversed function

Here we are using python reversed function that is an inbuild method using which we can reverse the given string

def rev(str):   
    rev_str = "". join(reversed(str)) 
    return rev_str 

s = "Proto Coders Point"  
  
print ("The original string : ",s)   
print ("The reversed string using join & reversed func : ",rev(s))
python reverse string using join & reversed
#Output:-

Secure EMQX by enabling mnesia authentication plugin

0
emqx mnesia auth

Hi Guys, Welcome to Proto Coders Point. In this Article let’s learn How to secure EMQX by adding mnesia authentication plugin and enabling mnesia auth , by which a user can only get connected to MQTT Broker if he has authorized username & password.

Here is a article & Video Tutorial on How to Install EMQX on Ubuntu Server & Connect to MQTT Broker by using MQTT SPY tool

Install EMQX on ubuntu

How to Secure EMQX by mnesia authentication plugin – EMQX tutorial

Let’s Get Started

We will be be using emqx mnesia auth plugin to secure our mqtt broker, so that only user with authorized username & password and connect to Emqx mqtt broker.

Step 1: Connect to Server & Open Putty Terminal

To connect to server instance terminal using putty follow below steps:

  • 1. In Session, Enter Host Name i.e IP of server and port.
  • 2. Then in Connection -> Data, Enter username. Eg: ubuntu.
  • 3. Then in Connection -> SSH -> Auth, Browse/select ppk file.
  • 4. Connect, Click on Open.
how to connect to server terminal using putty

Step 2: Turn Off EMQX allow_anonymous

By default, allow anonymous access in emqx is true, means anyone with server IP address can get access to MQTT Broker and read all the message, To secure it we need to Turn of anonymous access by just setting allow_anonymous to false.

To do so, we need to edit emqx.conf file.

open emqx.conf by using any ubuntu editor, I use vim editor. run below command to open the file.

sudo vim /etc/emqx/emqx.conf

This will open the file in terminal itself, use arrow key and search for allow_anonymous and set it to false as show below.

now by pressing Esc > :wq save the file.

Step 3: Config mnesia Authentication

As I said above, We will use mnesia auth plugin to secure auth to mqtt broker.

For that we must config emqx_auth_mnesia.conf file and add Username Authenticatiion in EMQX.

Open emqx_auth_mnesia.conf by running below cmd:

sudo vim /etc/emqx/plugins/emqx_auth_mnesia.conf
secure mqtt using mnesia username password authentication
secure mqtt using mnesia username password authentication

now by pressing Esc > :wq save the file.


Step 4: Active / Load EMQX mnesia Authentication

Now run below cmd to load mnesia emqx auth plugin:

emqx_ctl plugins load emqx_auth_mnesia
emqx_ctl plugins load emqx_auth_mnesia
emqx_ctl plugins load emqx_auth_mnesia

We have now successfully secure our MQTT Message Broker i.e EMQX.


Step 5: Restart EMQX

Now, After adding auth security to EMQX, We need to Restart it.

sudo emqx restart
emqx restart

Step 6: Connect to EMQX using MQTT-spy tool

I am using mqtt-spy tool to get connected to my mqtt broker and watch to the incoming message in queue.

Here are screenshot how to connect to EMQX broker.

Here in connectivity enter server URL or IP Address
EMQX secure access, enable user authentication and enter username & password

DONE, Finally We have secured our EMQX by adding username & Password Authentication using mnesia emqx auth plugin.


Video Tutorial on youtube on EMQX security

How to Install EMQX on Ubuntu | MQTT Broker

0
How to install EMQX on ubuntu server MQTT broker
How to install EMQX on ubuntu server MQTT broker

Hi Guys, Welcome to Proto Coders Point. In this article let’s Install EMQX on ubuntu. Basically EMQX is a message broker mainly used for communication between IOT Device & Server clould.

What is MQTT

MQTT stands fo Message Ouewing Telemetry Transport/ MQTT broker is basically used in IOT devices, It an Intermediary that enable MQTT client to communicate.

MQTT is IOT utilized Qos level, that assure message delivery to receiver, even thougn connection amont devices are unstable.

Basically MQTT Broker is a message quewing that accepts or listens to all client messages & then delivers the message to defined destination client (i.e Subscribers).

EMQX (mqtt) is a protocal for exchanging message(data) between IOT devices & server applications.

Video Tutorial


How to Install EMQX on ubuntu server

1. Install Required Dependencies for EXQX

Before install exqx their are few dependencies to be install, run below command and install them.

$ sudo apt update && sudo apt install -y \
apt-transport-https \
ca-certificates \
curl \
gnupg-agent \
software-properties-common

2. Add GPG Key

Need to add gpg.pub key file required for EMQX mqtt broker.

$ curl -fsSL https://repos.emqx.io/gpg.pub | sudo apt-key add -

3. Create a fingerprint key for emqx

$ sudo apt-key fingerprint 3E640D53

4. Setup stable repository

$ sudo add-apt-repository \
"deb [arch=amd64] https://repos.emqx.io/emqx-ce/deb/ubuntu/ \
$(lsb_release -cs) \
stable"

5. apt update index package

$ sudo apt update

6. Command to install EMQX on Ubuntu

$ sudo apt install emqx

Finally, this will installed EMQX on your ubuntu server.

This is the location /etc/emqx where mqtt(emqx) is been installed.

How to Start, Stop or Restart EMQX

Start EMQX

$ sudo emqx start

Stop EMQX

$ sudo emqx stop

Restart/Reload EMQX

$ sudo emqx restart

How Check is MQTT is Working