This article was originally written by @sadiasaif.official

I know all you know about this feature which toggles the password show and hide. This is super cool because sometimes we want to see the password anyway.

Sometimes we get so frustrated while filling the form that we wanted to what password I am filling in and why the app is not accepting my password.

Get Started

I am going to start from scratch which means you can copy and past the code in your brand new project and it will work.

The AIM of this article is to teach you how to make a show/hide password button with Input Field and make it work. Also, make you understand the Logic and implementation behind that.

Step 1

Here is my main.dart file where you can see I have removed all the boilerplate code. I have written everything from scratch for your better understanding.

I am trying to keep it as simple as I could. So, we can only focus on the actual thing and No new things will come in between.

import 'package:flutter/material.dart';
import 'package:demo_app/login.dart';   // I will create this fill in stepvoid main() {
  runApp(MyApp());
}class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginForm(),    // This will widget will be created in next step
    );
  }
}

You will get two error in this file and both will be fixed in next step. We will fix them by creating a new file (login.dart) which will contain LoginForm Widget code.

I don’t want to bring you back to this file aging that why I added those lines also which throws an error.

Step 2

This step will create a file login.dart and this file will have StatefulWidget called LoginForm. I will keep this widget very so simple and try to make you understand the logic behind the show/hide password.

Working Principle

Input filed and password input fields are the same except for one arguments (obscureText).

obscureText: This argument gives us the power to hide the data entered in the input field. The default of this is false, which makes it visible to us. If we make this true, the actual text will be invisible.

import 'package:flutter/material.dart';class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}class _LoginFormState extends State<LoginForm> {
  bool _isHidden = true;@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).secondaryHeaderColor,
      body: Center(
        child: TextField(
            obscureText: _isHidden,
            decoration: InputDecoration(
                hintText: 'Password',
            ),    
        ),
      ),
    );
  }
}

Step 3

In this step, we will add a button at the end of the field. Luckily there is a suffix property in flutter which helps us in add widget to the end.

We can do a lot using that suffix icon i.e When you change username in Instagram, You see there is check box which in text field, that indicated if the username is available or not.

import 'package:flutter/material.dart';class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}class _LoginFormState extends State<LoginForm> {
  bool _isHidden = true;@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).secondaryHeaderColor,
      body: Center(
        child: TextField(
            obscureText: _isHidden,
            decoration: InputDecoration(
                hintText: 'Password',
                suffix: Icon(Icons.visibility),
            ),
        ),
      ),
    );
  }
}

Step 4

This is the magical step where all the magic is going to happen. We will make the icon clickable and see/hide the password.

Now I will wrap the icon with InkWell which will make it clickable. So, when we will click on that it will toggle the obscureText the argument between true and false.

import 'package:flutter/material.dart';class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}class _LoginFormState extends State<LoginForm> {
  bool _isHidden = true;@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).secondaryHeaderColor,
      body: Center(
        child: TextField(
            obscureText: _isHidden,
            decoration: InputDecoration(
                hintText: 'Password',
                suffix: InkWell(
                    onTap: _togglePasswordView,
                    child: Icon( Icons.visibility),
                ),
            ),
        ),
      ),
    );
  }void _togglePasswordView() {
    setState(() {
      _isHidden = !_isHidden;
    });
  }
}

If you are not familiar with this code then this might be an interesting logic for you. This code basically changes the by adding not it’s original value.

Suppose the _isHidden is true then when we add !(exclamation) before it then it will make it false. As the programming fundamental, we store the value of the right-hand side into the left hand side.

So technically we are toggling the value between true and false using an exclamation mark.

void _togglePasswordView() {
    setState(() {
        _isHidden = !_isHidden;
    });
}

Step 5 — Final

In this step, I will update the icon of the suffix. I mean to say when the password is visible we want to show visibility hide/off icon and when the password is hidden we want to show visibility on icon.

import 'package:flutter/material.dart';class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}class _LoginFormState extends State<LoginForm> {
  bool _isHidden = true;@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).secondaryHeaderColor,
      body: Center(
        child: TextField(
            obscureText: _isHidden,
            decoration: InputDecoration(
            hintText: 'Password',
            suffix: InkWell(
                onTap: _togglePasswordView,
                child: Icon(
                        _isHidden 
                        ? Icons.visibility 
                        : Icons.visibility_off,
                    ),
                ),
            ),
        ),
      ),
    );
  }void _togglePasswordView() {
    setState(() {
      _isHidden = !_isHidden;
    });
  }
}

Conclusion

I hope you got the complete logic and implementation. I tried to break it into small parts and tried to add some code in each step. This helps entry-level developers a lot in understanding. I also added the same code in each step because sometimes entry-level developers face problems in understanding.

When I was an entry-level developer, I faced a lot of difficulties but somehow I almost covered the hard path, and today sharing them in easy language.

Thanks

As the name suggests, RichText provides more options to the way a text is displayed on the screen.

The style property of text widget is used to apply various styles to a text, but a limitation of it is, the style gets applied to the entire text irrespective of whether the text is a single line or multiline. Consider below snippet to render a single line of text on screen:

Container(
    padding: EdgeInsets.all(10),
    child: Center(
        child: Text(
          'The future belongs to those who prepare for it today.')
    )
)

With above code, if we apply fontSize as 20, fontStyle as italic, the style will be applied to entire text, as below.

But, what if, we only want to underline a word from above text or show certain words of text as bold/italic or in different color and rest of the text as normal text?

RichText widget helps to answer and achieve the above cases.

RichText structure

RichText uses TextSpan as a parent object that has its own style property along with a text parameter which we can input the actual text. The parent object then can have a number of TextSpan objects as children who have their own style property that can be applied to respective text.

With above basic overview of RichText widget, let’s now see how we can make use of this widget in realtime.

Use case 1:

Most of the apps have login screen and an option to create an account. The create account section is usually a combination of regular text followed by colored text, like StackOverflow login screen as below:

The text Don't have an account? Sign up is a single line text, with last part of it being a clickable word to take user towards their sign up screen.

Approach

We’ll divide the text into two parts. In the first part, we’ll use the parent TextSpan object and will input the regular text Don't have an account? with the color property as Colors.black.

child: Center(
  child: RichText(
    text: TextSpan(
      text: 'Don\'t have an account?', style: TextStyle(color: Colors.black, fontSize: 18),

In the second part, we’ll use children objects of TextSpan to input text Sign up and pass the color property as Colors.blue

children: <TextSpan>[
  TextSpan(text: ' Sign up', style: TextStyle(color: Colors.blueAccent, fontSize: 18)
      )
]

The output is:

Another cool thing about using RichText widget is that, the TextSpan the object comes with their own TapGestureRecognizer() which helps to implement onTap() action on specific parts of the text as needed. In our example, since the user can tap on Sign up text to navigate to the desired screen, we’ll make use of recognizer property that makes the text tappable, as shown in the entire code snippet below:

Note: Before using TapGestureRecognizer() , we’ll need to import ‘package:flutter/gestures.dart’;

Container(
    padding: EdgeInsets.all(10),
    child: Center(
      child: RichText(
        text: TextSpan(
            text: 'Don\'t have an account?',
            style: TextStyle(
                color: Colors.black, fontSize: 18),
            children: <TextSpan>[
              TextSpan(text: ' Sign up',
                  style: TextStyle(
                      color: Colors.blueAccent, fontSize: 18),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // navigate to desired screen
                    }
              )
            ]
        ),
      ),
    )
)

By using recognizer property, we won’t need to wrap RichText widget with another widget such as GestureDetector to expose and use tap() for navigation.

Use Case 2:

Just like sign up section as we saw above, there is also a section to display user agreement in various login screens, like Xoom (an online money transfer app) has below UI:

To implement last section, we can divide the text into three parts as below:

• First part : parent TextSpan with text (By Logging In,) and style (Colors.black)

child: RichText(
  text: TextSpan(
      text: 'By Logging In,',
      style: TextStyle(
          color: Colors.black, fontSize: 15),

• Second part: first of children of TextSpan object with text(you accept the Xoom) and style (Colors.black)

children: <TextSpan>[
  TextSpan(text: ' you accept the Xoom',
      style: TextStyle(
          color: Colors.black, fontSize: 15)
  ),

• Third part: second of children of TextSpan object with text(User Agreement) and style (Colors.blue and fontWeight as bold) and recognizer to tap.

TextSpan(
    text: ' User Agreement',
    style: TextStyle(color: Colors.blueAccent, fontWeight: FontWeight.bold),
  recognizer: TapGestureRecognizer()
    ..onTap = () {
      // navigate to desired screen
    }
)

Output is:

Use Case 3:

Here, we’ll make use of multiline text/paragraph that will have some of the words underlined with a different color. Consider github login screen which has a text paragraph as shown below:

Approach

Since the text apart from open source and business are straightforward plain text, we’ll focus on implementing only the above words and not regular text.

Inside TextSpan object, we’ll use style property and assign a white color to open source and business terms respectively along with TextDecoration.underline to achieve the expected style, as shown below:

TextSpan(text: 'open source',
    style: TextStyle(
        color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, decoration: TextDecoration.underline),
  recognizer: TapGestureRecognizer()
    ..onTap = () {
     // open desired screen
    }
),TextSpan(
  text: 'business,',
    style: TextStyle(
        color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, decoration: TextDecoration.underline),
    recognizer: TapGestureRecognizer()
      ..onTap = () {
        // open desired screen
      }
),

The entire code snippet is as below:

Container(
    color: Colors.black,
    padding: EdgeInsets.all(10),
    child: Center(
        child: RichText(
          text: TextSpan(
              text: 'GitHub is a development platform inspired by the way you work. From ',
              style: TextStyle(
                  color: Colors.grey,
                  fontSize: 20,
                  fontWeight: FontWeight.bold),
              children: <TextSpan>[
                TextSpan(text: 'open source',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.underline),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        // open desired screen
                      }
                ),
                TextSpan(
                    text: ' to ',
                    style: TextStyle(color: Colors.grey,
                        fontSize: 20,
                        fontWeight: FontWeight.bold)
                ),
                TextSpan(
                    text: 'business,',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.underline),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        // open desired screen
                      }
                ),
                TextSpan(
                    text: ' you can host and review code, manage projects, and build software alongside 36 million developers.',
                    style: TextStyle(color: Colors.grey,
                        fontSize: 20,
                        fontWeight: FontWeight.bold)
                )
              ]
          ),
        )
    )
)

And the output is:

We saw how RichText helps to make the text’s appearance and functionality more effective and gives the developers more options to implement the text in a certain way, whether the text is single line or a paragraph and can achieve number of such use cases in a text not limited to only login screens of various apps but can be useful in other functionalities/screens of the apps as well.

That’s all I have in this article. Thanks for reading and feel free to comment below your thoughts or any suggestions/feedback on this article. I am available on LinkedIn, and Github.

What is Object Oriented Programming (OOP)?

An object-oriented programming is a way programming which enables programmers to think like they are working with real-life entities(a thing with distinct and independent existence) or objects. In real-life, people have knowledge and can do various works. In OOP, objects have fields to store knowledge/state/data and can do various works — methods.

Basic Terminologies:

Object:

It’s the instance of a class/ it’s the working entity of a class.

Class:

It is a template or blue print about the capability of what an object can do.

Method:

The behaviours of a class. It tells what a method can do.

Instance:

Object and Instance both are same with small difference.

A blueprint for a house design is like a class description. All the houses built from that blueprint are objects of that class. A given house is an instance.

The creation of instance is called instantiation!

Instance != Instance Variable:

Instance variables belong to an instance of a class. Another way of saying that is instance variables belong to an object, since an object is an instance of a class. Every object has it’s own copy of the instance variables.

OOPs Concepts:

1. Encapsulation
2. Abstraction
3. Polymorphism
4. Inheritance

NOTE: Exceptions are not part of OOPs concepts.

Encapsulation:

Encapsulation is a mechanism of wrapping the data (instance variables) and code acting on the data (methods) together as a single unit like a Class.

The main purpose of encapsulation is you would have full control on data by using the code.

In encapsulation, the variables of a class can be made hidden from other classes, and can be accessed only through the methods of their current class. Therefore, it is also known as data hiding.

Still didn’t understand?

Encapsulation can be described as a protective barrier that prevents the code and data being randomly accessed by other code defined outside the class. Access to the data and code is tightly controlled by a class.

Data Hiding/Data Encapsulation:

Encapsulation leads to data hiding.

We use access specifiers to hide the data(properties) and methods. Use of private and public comes under this.

The user can only perform a restricted set of operations on the hidden members of the class by executing special functions commonly called methods

Abstraction:

Abstraction is a process of hiding the implementation details from the user, only the functionality will be provided to the user.

In other words, the user will have the information on what the object does instead of how it does it.

By hiding complex steps/details/computations/statements inside your classes and creating public methods to access them. Ex: Wrapper Classes

Abstraction is a very broad topic. Above can be seen as basic definition to say whenever anyone asks.

If we want to go deep, Abstraction mainly depends on point of view and many definitions.

• Hiding unnecessary details;
• Can have multiple implementations;( like dealing with idea instead of the actual event(like When you know something needs to be there but not sure how exactly it should look like.))
• Building complex system by splitting the complexity level by level.

Hiding unnecessary details:

Every function can be seen as basic abstraction.

For example: A programmer doesn’t care about how malloc() works or how garbage collection works.

Can have multiple implementations:

Don’t get confused this with polymorphism.

Abstraction is outlined by the top left and top right images of the cat. The surgeon and the old lady designed (or visualized) the animal differently. In the same way, you would put different features in the Cat class, depending upon the need of the application.

Every cat has a liver, bladder, heart and lung, but if you need your cat to ‘purr’ only, you will abstract your application’s cat to the design on top-left rather than the top-right.

Still didn’t get it?

An abstraction is a concept that can have one or more implementations.

For example: There are many different ways that your computer can connect to a local network (Ethernet, Wi-Fi, dial-up modem, etc.), but your Web browser doesn’t generally have to worry about which of these you’re using at any given time, because lower-level software provides a common abstraction that your browser can rely on. So “connection to the network” is the abstraction, and Ethernet and Wi-Fi and so on are implementations of that abstraction.

You’ll notice that so far I haven’t mentioned object-oriented programming at all. That’s because the idea of implementing abstractions is common to all sorts of designs and architectures; it’s not specific to OOP.

In object-oriented programming, where an implementation is likely to be represented as an object specified by a class, it’s common for an abstraction to be specified by an abstract class or an interface. But this does not mean that abstract classes and interfaces are only for specifying abstractions, and conversely, it doesn’t mean that all abstractions are specified by abstract classes and interfaces.

For example, the famous Design Patterns (the singleton pattern, the factory method pattern, etc.) are all abstractions that are not explicitly specified in code; rather, we have separate (unrelated) pieces of code for the various implementations of these abstractions, and the abstraction merely resides in the programmer’s head (and in design documentation, and in the names of classes and variables and so on).

The abstraction is for clients (users) of the class. There needs to be an implementation, of course; but, for example, code that accepts a List<String> doesn’t have to worry about whether the passed-in instance is an ArrayList or a LinkedList , because they both implement the required abstraction.

Building complex system by splitting the complexity level by level:

Abstraction in Object Oriented Programming helps to hide the irrelevant details of an object.

Abstraction is separating the function and properties that logically can be separated to a separate entity which the main type depends on.

This kind of Abstraction helps in separating the members that change frequently.

Abstraction is one of the key principles of the OOAD(Object oriented analysis and Design).

Applying Abstraction during the design and domain modelling, helps a lot in design the a system which is flexible and maintainable.

Abstraction can be achieved by Composition.

Abstraction Example:
A Car has Engine, wheels and many other parts. When we write all the properties of the Car, Engine, and wheel in a single class, it would look this way:

public class Car 
{ 
    int price; 
    String name; 
    String color; 
    int engineCapacity; 
    int engineHorsePower; 
    String wheelName; 
    int wheelPrice;     void move()
    { 
        //move forward 
    }     void rotate()
    { 
        //Wheels method 
    }     void internalCombustion()
    { 
        //Engine Method 
    }
}

In the above example, the attributes of wheel and engine are added to the Car type. As per the programming, this will not create any kind of issues. But when it comes to maintenance of the application, this becomes more complex.

Abstraction has three advantages:
1. By using abstraction, we can separate the things that can be grouped to another type.

2. Frequently changing properties and methods can be grouped to a separate type so that the main type need not under go changes. This adds strength to the GOAD principle -”Code should be open for Extension but closed for Modification”.

3. Simplifies the representation of the domain models.

Applying the abstraction with composition, the above example can be modified as given below:

public class Car 
{ 
    Engine engine = new Engine(); 
    Wheel wheel = new Wheel(); 
    int price; 
    String name; 
    String color;     void move()
    { 
        //move forward 
    }}
 
public class Engine 
{ 
    int engineCapacity; 
    int engineHorsePower; 

    void internalCombustion()
    { 
        //Engine Method 
    }
} public class Wheel 
{ 
    String wheelName; 
    int wheelPrice; 

    void rotate()
    { 
        //Wheels method 
    }
}

You can see that the attributes and methods related to the Engine and Wheel are moved to the respective classes.
Engine and Wheel are referred from the Car type. When ever an instance of Car is created, both Engine and Wheel will be available for the Car and when there are changes to these Types(Engine and Wheel), changes will only be confined to these classes and will not affect the Car class.

Summary:
Abstraction is one of the fundamental principles of Object Oriented Programming languages. It helps to reduce the complexity and also improves the maintainability of the system. When combined with the concepts of the Encapsulation and Polymorphism, Abstraction gives more power to the Object oriented programming languages.

Abstraction is of 2 types:

1. Control Abstraction
2. Data Abstraction

Control Abstraction:

Programming languages offer control abstraction as one of the main purposes of their use. Computer machines understand operations at the very low level such as moving some bits from one location of the memory to another location and producing the sum of two sequences of bits. Programming languages allow this to be done in the higher level. For example, consider this statement written in a Pascal-like fashion:

a := (1 + 2) * 5

To a human, this seems a fairly simple and obvious calculation (“one plus two is three, times five is fifteen”). However, the low-level steps necessary to carry out this evaluation, and return the value “15”, and then assign that value to the variable “a”, are actually quite subtle and complex. The values need to be converted to binary representation (often a much more complicated task than one would think) and the calculations decomposed (by the compiler or interpreter) into assembly instructions (again, which are much less intuitive to the programmer: operations such as shifting a binary register left, or adding the binary complement of the contents of one register to another, are simply not how humans think about the abstract arithmetical operations of addition or multiplication). Finally, assigning the resulting value of “15” to the variable labeled “a”, so that “a” can be used later, involves additional ‘behind-the-scenes’ steps of looking up a variable’s label and the resultant location in physical or virtual memory, storing the binary representation of “15” to that memory location, etc.

Without control abstraction, a programmer would need to specify all the register/binary-level steps each time they simply wanted to add or multiply a couple of numbers and assign the result to a variable. Such duplication of effort has two serious negative consequences:

1. It forces the programmer to constantly repeat fairly common tasks every time a similar operation is needed
2. It forces the programmer to program for the particular hardware and instruction set

Data Abstraction:

Abstraction of data structures. Data abstraction refers to defining the behaviour of the data structure. Data may be internally represented in different ways in concrete implementations.

(or)

Data abstraction is the way to create complex data types and exposing only meaningful operations to interact with data type, where as hiding all the implementation details from outside works.

Benefit of this approach involves capability of improving the implementation over time e.g. solving performance issues is any. The idea is that such changes are not supposed to have any impact on client code, since they involve no difference in the abstract behaviour.

EX:

• In DBMS: Database Management Systems have abstractions of Table and View. Every DBMS software may store underlying data differently. But to users, Table is always represented as Rows and Columns. This allows performing high level operations like query on this data abstraction.
• In Java Collections: Collection API’s Collection, List, Set and Map interfaces are example of data abstractions. These interfaces define some of the behaviour characteristics to be implemented by concrete classes. For example, List defines characteristics and methods for random access from the underlying elements. Implementing class may choose to use array data structure for storing the data elements — ArrayList. Or it can be stored in any ad-hoc manner — LinkedList. Anything should be fine as long as the behaviour defined by List interface is achieved.

In short,

• Abstractions are ideas, not specific events
• To abstract something is to move away from its implementation ( interface and abstract class) and think about big ideas
• Abstractions can be used to organize code (and many other things) effectively
• Object-oriented programming is entirely dependent on the abstractions.
• Abstraction is the practice of breaking a large problem into smaller components, so each smaller problem can be worked on in (relative) isolation.

Next you might think about Encapsulation vs. Abstraction

• The difference between concepts of encapsulation and abstraction is that encapsulation is about the packaging of the class (like how data should be accessed (setters/getters) and what data should be accessed (access specifiers)), whereas abstraction more about what the class does for you at a conceptual level.
• Encapsulation is hiding unnecessary data in a capsule or unit and Abstraction is showing essential feature of an object
• Abstraction encompasses encapsulation, information hiding, and generalisation.
• abstraction is a form of generalisation: writing code that applies to more than one specific situation.
• Abstraction is where you focus on only those details that are important for your purpose.
• Abstraction is the process of refining away all the unneeded/unimportant attributes of an object and keep only the characteristics best suitable for your domain.E.g. for a person: you decide to keep first and last name and SSN. Age, height, weight etc are ignored as irrelevant.
• Assembly language can be thought of as an abstraction of machine code — assembly expresses the essential details and structure of the machine code, but frees you from having to think about the opcodes used, the layout of the code in memory, making jumps go to the right address, etc.
• Your operating system’s API is an abstraction of the underlying machine. Your compiler provides a layer of abstraction which shields you from the details of assembly language. The TCP/IP stack built into your operating system abstracts away the details of transmitting bits over a network. If you go down all the way to the raw silicon, the people who designed your CPU did so using circuit diagrams written in terms of “diodes” and “transistors”, which are abstractions of how electrons travel through semiconductor crystals.
• Inheritance is also an example of abstraction.
• Encapsulation leads to Abstraction

Inheritance:

Inheritance can be defined as the process where one class acquires the properties (methods and fields) of another.

(OR)

In object-oriented programming, inheritance is when an object or class is based on another object (prototypal inheritance) or class (class-based inheritance), using the same implementation (inheriting from an object or class) specifying implementation to maintain the same behavior

The idea of inheritance implements the is a relationship. For example, mammal IS-A animal, dog IS-A mammal hence dog IS-A animal as well and so on.

Types Of Inheritance:

1. Single Inheritance
2. Multiple Inheritance
3. Multi-Level Inheritance
4. Hierarchical Inheritance
5. Hybrid Inheritance

NOTE: Most of the languages like Java, JavaScript etc doesn’t support Multiple Inheritance. One of the problems we face while using it is Diamond Problem. Without Multiple Inheritance, Hybrid Inheritance is not possible.

Advantages of inheritance are as follows:

• Inheritance promotes reusability. When a class inherits or derives another class, it can access all the functionality of inherited class.
• Reusability enhanced reliability. The base class code will be already tested and debugged.
• As the existing code is reused, it leads to less development and maintenance costs.
• Inheritance makes the sub classes follow a standard interface.
• Inheritance helps to reduce code redundancy and supports code extensibility.
• Inheritance facilitates creation of class libraries.

Disadvantages of inheritance are as follows:

• Inherited functions work slower than normal function as there is indirection.
• Improper use of inheritance may lead to wrong solutions.
• Often, data members in the base class are left unused which may lead to memory wastage.
• Inheritance increases the coupling between base class and derived class. A change in base class will affect all the child classes.

Inheritance is one of the most mis-used feature of OOPs by beginner programmers.

TIP: Unless there is an absolute need for an inheritance, don’t use it!

Polymorphism:

In object-oriented programming, polymorphism (from the Greek meaning “having multiple forms”) is the characteristic of being able to assign a different meaning or usage to something in different contexts — specifically, to allow an entity such as a function, or an object to have more than one form.

There are 2 types of polymorphism implementations:

1. Static Polymorphism
2. Dynamic Polymorphism

Features of polymorphism mainly depends on the programming languages.

Like, function overloading is possible in Java, C++ etc., but not possible in JavaScript. Operator overloading is only possible in C++.

So, I highly recommend to read about specific polymorphism depending upon the language you use.

For basic idea what polymorphism is:

If anybody says CUT to these people

1. The Surgeon
2. The Hair Stylist
3. The Actor

What will happen?

• The Surgeon would begin to make an incision.
• The Hair Stylist would begin to cut someone’s hair.
• The Actor would abruptly stop acting out of the current scene, awaiting directorial guidance.

So above representation shows What is polymorphism (same name, different behaviour) in OOP.

If you found any typo or have any suggestions, please feel free to contact me on Github.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Github for getting more posts like these .😊

Ternary Conditional Operators are a pretty useful thing in Dart. They can be used to conditionally show a Flutter widget. They accept 2 operands. If the given condition is true, the first thing will be executed and if it is false, it will execute the second one.

Example in Dart code.

void main() {
  bool isComplete = false;
  print(isComplete ? "completed!" : "not Completed");
}
//Outputs not Completed

This will print not completed. If we change the value of isComplete to true, it will print completed.

void main() {
  bool isComplete = true;
  print(isComplete ? "completed!" : "not Completed");
  //Outputs completed 
}

Now let’s consider a non-boolean value.

void main() {
  String name = "John Doe";
  String myName = "mukhtharcm";
  print(name == myName ? "your name is $name " : "your name is NOT $name ");
}
//Outputs your name is NOT John Doe

If we run this code, it’ll print your name is NOT john Doe. But if we change the value of myName to John Doe, it will print your name is John Doe

void main() {
  String name = "John Doe";
  String myName = "John Doe";
  print(name == myName ? "your name is $name " : "your name is NOT $name ");
}
//Outputs your name is John Doe

Using in Flutter

Ternary Operators are pretty handy when working with Flutter. They can be used to conditionally show widgets. Like showing a CircularProgressIndicator() when loading.

Flutter Example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isLoading = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            isLoading ? CircularProgressIndicator() : Text("Loading Completed"),
            SizedBox(height: 100),
            Text("Click Floating Action Button Toggle Loading")
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            isLoading = !isLoading;
          });
        },
      ),
    );
  }
}

In the above example, isLoading is a boolean value. Initially it’s value is true. So the CircularProgressIndicator is shown. But the FloatingActionButton toggles the value of isLoading. So the CircularProgressIndicator changes to Text and vice-versa. As we saw above, we can also use values other than boolean here.

If you fancy testing this out in the browser, you can follow this link to see a dartpad filled with sample code for this post.

If you found any typo or have any suggestions, please feel free to contact me on Github.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Github for getting more posts like these .😊

Do you need simple layout samples for Flutter?
I present you my set of Flutter layout code snippets. I will keep it short, sweet and simple with loads of visual examples.
Still, it is work in progress — the catalogue of samples will grow. I will focus more on the usage of Flutter widgets rather than showcasing the components (Flutter Gallery is great for that!).
If you have an issue with “layouting” your Flutter or you wanna share your snippets with others, please drop a line!

This article is also available in:

• Portuguese by Eddy

In case you are interested in a similar article about Animations, then visit Flutter Animations Cheat Sheet.

Table of Contents

• Row and Column
• IntrinsicWidth and IntrinsicHeight
• Stack
• Expanded
• ConstrainedBox
• Align
• Container
  decoration: BoxDecoration
  • image: DecorationImage
  • border: Border
  • borderRadius: BorderRadius
  • shape: BoxShape
  • boxShadow: List<BoxShadow>
  • gradient: RadialGradient
  • backgroundBlendMode: BlendMode
• Material
  • shape: BeveledRectangleBorder
• Slivers
  • SliverFillRemaining
• SizedBox
• SafeArea

Row and Column

MainAxisAlignment

Row /*or Column*/( 
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),

Design Pattern is something which has been always a very Mysterious term for developers and we are very much confused between the term Software Architecture and Design patterns, So before starting anything about design patterns we need to clear this doubt regarding the Design Pattern and Software Architecture.

Software Architecture

Software Architecture is how the whole components of system software are organized and assembled. How they communicate with each other. And the Constraint the whole UI is ruled by.

So If we go through this definition we come across three important aspects and those are

• How the whole components of system software are organized and assembled:- Architectural Pattern
• How they communicate with each other:- Messaging & APIs
• The constraints the whole UI is ruled by:- Quality Attributes

Design Pattern

Design Pattern could be defined as a common repeatable solution to recurring problems in software design. Design patterns can not be related to a finished design which will be directly used in code but it could be understood as a description or template for how to solve any common problem that may occur in many situations.

So If we go through this Definition we will find that

• It is a solution to recurring problems of software development.
• It is not a sample code which will be directly used in the project.
• It is just a template that helps to solve any problem that occurs in software development.

Difference between Software Architecture and Design Pattern

So after going through both the definition we came to know that both of it could be differentiated on the basis

Scope:- Software Architecture has a universal scope, it has to managed at a Higher level like Server Configuration, etc.Whereas Design pattern has a Lowe level scope that comes to the project internal code pattern.

Working:- Software Architecture is all about organizing and assembling the components in such a way that their communication is very much convenient and secure. Whereas a Design pattern is about how the components are built.

So I hope this comparison clears the doubt between Software Architecture and Design Pattern. So after having a piece of knowledge that what design pattern actually we will start a few famous design patterns which are mainly used in flutter development. So, First of all, we will start with the very Basic MVC Pattern and we will see how MVC is used in Flutter.

MVC In Flutter

MVC stands for the model view controller and its main work is to have a segregated code base, it aims to separate the code and area of responsibility while software development. The main focus of MVC is to separate the interface of the project from the functionality and the data that is used in the application. As we all know that neat and arranged things are always easy to use and maintain, the same is with MVC it makes the codebase neat and arranged and it achieves these with three of its components.

• Model:- Model compromises of the data source it may be from anywhere DB, API, JSON, etc. In some cases, it may consist of some business logic.
• View:- View is all about the user interface, I.e displaying data and taking inputs from the user.
• Controller:- It contains the business logic, I.e Controlling what data will be shown to the user, user input handling, etc.

Communication Flow

Differentiating the three of these basic components of projects helps the developer to write a neat and modular code which makes the code Reusable and also helps in parallel development. It becomes very easy to work on the project as it does not affect other parts of the project if something is changed in one part. So keeping them separated needs a communication flow in which they will interact with each other and achieve the functioning of the project.

So as we could see from the following flow diagram the User interacts with the View part of the project which helps the user to see the Data and provide the input to the controller through the view. Controller Active as the brain of the project does the calculation or manipulation of data from the user or takes the data from the model to work on it and provides it to the View which shows the desired data to the user. Here we find that the View shows and receives the data but it directly not interact with the Model, it is the controller that plays a role between view and model in data manipulation and data representation. The View and the Model are tightly coupled to the Controller i.e View Knows how to communicate to Controller, Controller knows how to communicate to Model and Model and View works collectively without knowing each other existence.

Code Understanding:

If you have not installed the flutter SDK or you are still getting familiar with it :

Let’s dive into the code part for an In-depth understanding of the process:-

1. Firstly, Create a new project and then clear all the code in the main.dart file. Type below command in your terminal:-

flutter create yourProjectName

• Add the current latest version of MVC pattern package under the dependencies in pubspec.yaml file.

dependencies:   
 mvc_pattern: ^3.4.1

Create a Model Class:

As Explained above a model class is created for both counter:-

Create the Main Controller :

The Controller is Created as this Basically Ensures the interaction with the model :

Adapting it Into The View :

The controller is then bound to the view.dart file so that the increment and decrement functionality may work as depicted.

A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…

Sadia-Saif - Overview

Closing Thoughts

Design Pattern is a Quintessential tool in large scale apps in native applications which you can also practice in flutter also. In this Blog, only MVC has been explained but this will a series of blogs and in the next blogs, we will be sharing about MVP, MVVM, CLEAN, etc.

If you have not used Design Patterns in Flutter, I hope this article has provided you with valuable information about what is all about it, and that you will give it Design Patterns — a Try. Begin using them for your Flutter Apps !!

Feel free to connect with us:

We welcome feedback and hope that you share what you’re working on using #Flutter. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!

Thank you for reading.