NaveenSingh's Blog

NaveenSingh's Blog

Started to Learn about the Flutter

Started to Learn about the Flutter

How i started to learn about the flutter, Not so big story, Recently in our company we had an one requirement of mobile application projects and initially i had an some interest on the mobile development also while seeing the app like Myntra, PhonePe, Google Pay, CRED, So i just started learning about the flutter technology, And which i decided to learn from the scratch completely and added to habit stack of learning,

And decided to spend at least daily 1 hour on learning about flutter after finishing my office works, And decided to post it as blog on the every weekend,What i learned on the week Because i believe through writings i can see what i learned so far, And to check whether i has an knowledge on that subject areas, Hopefully will try to post it,

Topics Learned so far :

  • Flutter Introduction
  • Stateless widget
  • Stateful widget
  • Difference between Stateless and Stateful widget
  • Row and Column
  • Dart
    • Late variable
    • Final and const
    • Inheritance
    • Abstract Class
    • Mixins
    • Async

Flutter Introduction

Let's start with the some introduction, A Flutter is an open source SDK which is created by google, Where you can develop the IOS, Android, Linux, Mac and Windows application by natively, So what does mean by native, The application where will be stored from Google play, Apple store, Just to simple to understand the place where you born like native place belongs to, In Flutter everything and all about the widgets, Because widget is the building block of app, Which can described as an blueprints of UI, Widget can be stateful or stateless, There are so common widgets which is used

  • Scaffold
  • AppBar
  • Text
  • Center
  • Row
  • Column

Stateless widget :

Stateless widget which creates the stateless element and it's an immutable state, Immutable means state can't be modified after it is created, Whereas mutable which can be modified, As commonly widget will not changed it will be remained constant widget, A stateless widget compose of children and that's reason for build method

class Students extends StatelessWidget {
 final String name
 const Students({this.name});

  @override
  Widget build(BuildContext context) {
    return Text('$name:')
  }
}

The methods available for stateless widgets are

build(BuildContext context)

Stateful Widget A Stateful widget is mutable state which means can be modified or change over time, Stateful widget can be created by createState() which initializes the State

class StudentDetails extends StatefulWidget{
  final String? name;
  StudentDetails({this.name});
  @override 
  _StudentCounterState createState() => _StudentCounterState();
}
  class _StudentCounterState extends State<StudentCounter>{
    int idnum = 0;

  @override
  Widget build(BuildContext context) {
   return Text('${widget.name}: $idnum');
  }
}

Difference between Stateless and Stateful widget

Stateless Widget :

  • It Never change appearance remains constant
  • Example : Text, Iconbutton, Icons
  • widget does not have state, So it will return widget
  • It is an static widget

Stateful Widget

  • It can be modified when user interacts
  • Example : Checkbox, RadioButton
  • It returns state
  • It is dynamic widget

Row and Column :

Row Widget :

  • Row widgets are used for alignment to display horizontal children.
  • Which is used for aligned device
Row(
  children: const <Widget>[
    //widgets here
  ],
)

Column Widget

  • Column widgets are used for alignment to display vertical children.
  • It does not allow for scrolling
Column(
  children: const <Widget>[
    //widgets here
  ],
)

Dart

In the flutter dart programming language are used and it's very easy to understand, The concept are based on the object oriented, There are many concepts available there but i will describe only few which is needed for me

Late variable :

A variable which is initialized lazily, And it's about declaring or initializing a non null variable after the declaration

late String name;
void main(){
name = 'Hello World';
print(name); // Hello World
}

Final and const

Final - A value cannot be changed, It will be computed on the Run time

final title = 'HelloWorld';

const - It is an Compile time Constant

const  double pivalue = 3.14;

Inheritance :

It's general concepts of inheitance, A class which inherits the other classes

class Student{
  void studentname(){
    print('Arya');
  }
}

class College extends Student{

}

void main(){
  var result = new College();
  result.studentname();
}

Abstract Class

A class which contains abstract method, A class can be extended by abstract class

abstract class Students{
  void studentname();
}

class College extends Students{
  void studentname(){
    print('Arya');
  }
}


void main(){
  College result = new College();
  result.studentname();
}

Mixins :

Mixins is used for resusing a class on multiple class by using with keyword

abstract class Student{
  void name();
}

abstract class StudentNumber{
  void number();
}

class College extends Student with StudentNumber{

  void name() => print('Arya');
  void number() => print('34');

}

void main(){
  var result = new College();
  Student res = result;
  StudentNumber resnum = result;
  res.name();
  resnum.number();
}

Async :

Async concepts similar to javascript of async, where executes function as asynchronously and you needs to have async modifier, And the keyword of async and await

void hello() async {
  print('Hello World');

}

void main(){
  await hello();
  print('done');
}
 
Share this