Home Blog

Difference between MVC MVP and MVVM

0
Difference between MVC MVP and MVVM

MVC, MVP & MVVM all this are a project design patterns which are very useful for developer to structure the project & write code that can be easily understandable, maintainable, extensible add need features and tested. All the 3 design pattern share some similarities, and there are difference between MVC MCP & MVVM. In the article post, let’s explore the MVC, MVP & MVVM design patterns. In order to choose the perfect pattern for your upcoming project’s let’s discuss the difference between them.

Model View Controller (MVC)

A Model View Controller (MVC) is a software architectural design pattern mostly used for user Interface (UI design). It separate the project into three parts i.e. Model View Controller, It is a way how to information is presented in front of user or how the data is accepted from user from user event’s.

Model represent a data structure layer of an application (database)

  • the model, which represents the data;
  • the view, which displays the data;
  • the controller, which handles user input.
MVC Design Pattern
MVC Design Pattern

The Model View Controller (MVC) is a software architectural pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the way information is presented to or accepted from the user.

Here Controller stores data to the model & tell the view this data is been updated .

View fetch the data/updated data from models and display it in view.

Model View Presenter (MVP)

The Model View Presenter is originated from MVC pattern to fix some short comes of MVC software development architecture.

MVP Design Pattern

Here Presenter role is similar to controller it handles all the input from user and update the view immediately if required. Presenter keep observing the UI events happens in Views, Write/store the data into model, then read back data from model & provide the updated data to View to display it users.

MVP pattern can be used with any type of application, Best to be used in event-driven applications like Rich Internet Application (RIA’s).

Model-View-ViewModel (MVVM architecture)

Recently MVVM is been added into the architecture pattern of software development world. Here View Model Play an important role in the MVVM architecture pattern, It managed the communication between View and Model, This make MVVM application to be built easily and tested then any other pattern.

MVVM Design Pattern
MVVM Design Pattern

MVC, MVP, and MVVM are most commonly used software design architecture patterns. They have their own strength & weaknesses respectively.

Here View knows all about ViewModel, View Model know about model and Model knows nothing.

View Model Perform perform it’s logics and store the data into model, and it also observe the data changes in model immediately update itself for the changed.

MVVM is a more recent addition to the world of software architecture patterns. It builds on MVP by adding a fourth component: the view model. The view model manages communication between the view and the model, providing a clean separation of concerns. This makes MVVM applications easier to develop and test than those using other patterns.

What Application design pattern best for project

MVC, MVP & MVVM each of the has it own advantages & disadvantages and will differ project to project.

I have Personally worked on all three design patterns, MVC & MVP create lots of messy in the architecture.

MVVM design pattern is better then MCV/MVP because MVVM uses unidirectional data & dependencies flow.

Flutter Quill – Text Editor with Text Editing Toolbar

0
Flutter quill package - Text editor toolbar
Flutter quill package - Text editor toolbar

Hi Guy’s Welcome to Proto Coders Point. This Flutter Article on Flutter Quill Package which is a rich text editor and comes with text Editing toolbar.

This Flutter WYSIWYG editor is built for modern mobile platform and it is compatible with web platform also but will under beta version.

How to Implement FlutterQuill in app

First of all you need to install the FlutterQuill (WYSIWYG editor) into your flutter project where you want to implement text editor field with text editing toolbar.

1. Add Dependencies

In Flutter Project, Open pubspec.yaml file and under dependencies add quill package.

dependencies:
  flutter_quill: ^6.1.6

Once added the above package, now hit pub get button on android studio or run flutter pub get in terminal to download the library as external libraries.

2. To us it Import where required

import 'package:flutter_quill/flutter_quill.dart';

How to use FlutterQuill

Video Tutorial

1. Instantiate/Create a Controller

Firstly you need to controller which can control QuillToolbar and QuillEditor widget.

QuillController _controller = QuillController.basic();

In below Code I have attached the QuillController to QuillToolbar and QuillEditor.

2. Create a QuillToolbar

Using Quill toolbar use can customize the text in the text field and give different styling to the texts.

QuillToolbar.basic(
              controller: _controller,
              toolbarIconSize: 25,
              iconTheme: QuillIconTheme(
                borderRadius: 14,
                iconSelectedFillColor: Colors.orange,
              ),
          ),
Flutter Quill Text Editor with Text Editing Toolbar
Customized Quill Toolbar

3. Create a QuillEditor

In QuillEditor widget, user can type his/her text and customize it as per his need.

QuillEditor.basic(
            controller: _controller,
            readOnly: false
 )

Flutter Quill Example – Complete Source Code

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.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 Quill Example',
      debugShowCheckedModeBanner: false,
      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> {
QuillController _controller = QuillController.basic();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
          QuillToolbar.basic(
              controller: _controller,
              toolbarIconSize: 25,
              iconTheme: QuillIconTheme(
                borderRadius: 14,
                iconSelectedFillColor: Colors.orange,
              ),
          ),
        QuillEditor.basic(
            controller: _controller,
            readOnly: false
        )
      ],
    ));
  }
}

(Solution) node: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28′ not found (required by node)

0

You might we facing a issue with NodeJS which is installled on ubuntu OS,

When you run node -v or pm2 list command getting error:- node: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28′ not found (required by node).

Solution for GLIBC_2.28 not found (required by node)

I tried various solution from stack overflow from with, Finally One solution worked for me, just by running by below commands.

sudo apt-get remove nodejs
nvm i 16  
sudo apt-get install nodejs
sudo apt-get install npm

node -v

npm -v

nvm -v

Flutter phone number validation regex

0
flutter textfield phone number validation using regex pattern
flutter textfield phone number validation using regex pattern

Are you looking for a phone number validation regex that you can use with or without a country code, brackets, and dash? Well, look no further! In this Flutter Article, I’ll show you how to create a phone number validation regex in flutter that works with any number format.

Whether you’re looking to validate a phone number in the US, Canada, or any other country, This Phone Number regex pattern will help you get the job done quickly and correctly. Plus, it’s simple to use and easy to customize to suit your needs. So be sure to read this article and learn how to implement a phone number validation in flutter TextField using regex that works with any number format!.

I want a regex that matches following phone number pattern string:-

  • XXXXXXXXXX : 10 digit mobile number validation.
  • +91 XXXXXXXXXX : Country code + 10 digit phone number.
  • (XXX) XXX XXXX : Phone number with brackets separator.
  • (XXX) XXX-XXXX : Number with brackets & dash separator.
  • XXX-XXX-XXXX : Phone Number with dash separator.

Here X defines number

International phone number regex

^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$

Explanation of above phone number regex

^\s*Starting line , accept white space at beginning.
(?:\+?(\d{1,3}))?Match country code, here ‘?’ makes it optional. remove ‘?’ to validate phone number and make it mandatory.
[-. (]*Match special character like bracket which may appear between the country code & area code.
(\d{3})Area code of 3 digit in phone number string. add ‘?’ at end to make area code optional.
[-. )]*Match special character like bracket which may appear between the country code & area code.
(\d{3})Exchange Number of 3 digit in phone regex string. add ‘?’ at end to make area code optional.
[-. ]*Match special character like dash which may appear between.
(\d{4})Subscriber number of 4 digit in phone number string.
(?: *x(\d+))?Optional Extensional Number.
\s*$Accept any white space at ending of phone number string.
Mobile Phone number Validation Regular expression

Video Tutorial

Flutter Phone Number TextFormField Validation using Regex Pattern

Complete Source code:- main.dart

import 'package:flutter/material.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
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  TextEditingController phoneController = TextEditingController();
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
            Form(
              key: _formKey,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: TextFormField(
                        controller: phoneController,
                        decoration: buildInputDecoration(Icons.phone, "Phone"),
                        keyboardType: TextInputType.phone,
                        onChanged: (value){
                           _formKey.currentState?.validate();
                        },
                        validator: (value){
                          if(value!.isEmpty){
                            return "Please Enter a Phone Number";
                          }else if(!RegExp(r'^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$').hasMatch(value)){
                            return "Please Enter a Valid Phone Number";
                          }
                        },
                ),
              ),
            )
        ],
      )
    );
  }
}

InputDecoration buildInputDecoration(IconData icons,String hinttext){
  return InputDecoration(
    hintText: hinttext,
    prefixIcon: Icon(icons),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(25.0),
      borderSide: const BorderSide(
        color: Colors.green,
        width: 1.5
      )
    ),
    border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(25.0),
        borderSide:const  BorderSide(
            color: Colors.blue,
            width: 1.5
        )
    ),
    enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(25.0),
        borderSide:const  BorderSide(
            color: Colors.blue,
            width: 1.5
        )
    ),
  );
}

Regex for phone number validation – Regular Expression

0
regex for phone number.

Hi Guy’s Welcome to Proto Coders Point. In this article let’s checkout a regular expression for phone number validation.

I want a regex that matches following phone number pattern string:-

  • XXXXXXXXXX -> 10 digit mobile number validation.
  • +91 XXXXXXXXXX -> Country code + 10 digit phone number.
  • (XXX) XXX XXXX -> Phone number with brackets separator.
  • (XXX) XXX-XXXX -> Number with brackets & dash separator.
  • XXX-XXX-XXXX -> Phone Number with dash separator.

and much more.

Common Phone number group

  • Group1: Country Code (e.g. 1 or 86).
  • Group2: Area Code (e.g. 808).
  • Group3: Exchange (e.g. 555).
  • Group4: Subscriber Number (e.g.1234).
  • Group5: Extension (e.g. 5678).

Regular Expression for phone number validation

International phone number regex

^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$

Explanation of above phone number regex

^\s*Starting line , accept white space at beginning.
(?:\+?(\d{1,3}))?Match country code, here ‘?’ makes it optional. remove ‘?’ to validate phone number and make it mandatory.
[-. (]*Match special character like bracket which may appear between the country code & area code.
(\d{3})Area code of 3 digit in phone number string. add ‘?’ at end to make area code optional.
[-. )]*Match special character like bracket which may appear between the country code & area code.
(\d{3})Exchange Number of 3 digit in phone regex string. add ‘?’ at end to make area code optional.
[-. ]*Match special character like dash which may appear between.
(\d{4})Subscriber number of 4 digit in phone number string.
(?: *x(\d+))?Optional Extensional Number.
\s*$Accept any white space at ending of phone number string.

Recommended Book