master in flutter and web development

Flutter is an open-source UI software development toolkit created by Google. It is used for building natively compiled applications for mobile, web, and desktop from a single codebase.master in flutter and web development. Flutter allows developers to use a single codebase to create high-performance, visually attractive applications for multiple platforms.

Flutter Things that need to know Before Starting

  1. Scaffold
  2. State full & State Less Widget
  3. Class & Object
  4. Adding Images assets
  5. Text
master in flutter and web development

1) Scaffold in Flutter:-

A scaffold is a class in a flutter that provides many widgets or can say APIs like Drawer, Bottom Navigation Bar, Floating Action Button, App Bar, etc.

It will expand to the whole screen. It will cover the available space. It will draw all the widgets on the screen. It will provide a framework to implement the basic material design layout of the application.

The constructor of the Scaffold class:

const Scaffold({
    Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior
          = DragStartBehavior.start,
    this.extendBody = false,
    this.drawerScrimColor,
})

When we call Scaffold Contractor on the run time and it will take some inputs that are used to draw the UI. you can check the Properties of the Scaffold Class.


2) Flutter — Stateful vs Stateless Widgets

Stateless Widget: The widgets whose state can not be altered once they are built are called stateless widgets.

These widgets are immutable once they are built. any amount of change in the variables, icons, buttons, or retrieving data can not change the state of the app.

Stateful Widgets: The widgets whose state can be altered once they are built are called stateful Widgets.

These states are mutable and can be changed multiple times in their lifetime. This simply means the state of an app can change multiple times with different sets of variables, inputs, data.

A stateless widget is useful when the part of the user interface you are describing does not depend on anything other than the configuration information and the Build Context whereas a Stateful widget is useful when the part of the user interface you are describing can change dynamically. for more details check this out


3) Dart — Classes And Objects:-

Dart is an object-oriented programming language, so it supports the concept of class, object … etc. In Dart, we can define classes and objects of our own. We use the class keyword to do so.

Declaring class in Dart –

Syntax:

class class_name {
// Body of class
}

In the above syntax:

  • Class is the keyword used to initialize the class.
  • class_name is the name of the class.
  • The body of the class consists of fields, constructors, getter and setter methods, etc..

Declaring objects in Dart –

Objects are the instance of the class and they are declared by using new keyword followed by the class name.

Syntax:

var object_name = new class_name([ arguments ]);

In the above syntax:

  • new is the keyword used to declare the instance of the class
  • object_name is the name of the object and its naming is similar to the variable name in dart.
  • class_name is the name of the class whose instance variable is been created.
  • arguments are the input that is needed to be pass if we are willing to call a constructor.

After the object is created, there will be the need to access the fields which we will create. We use the dot(.) operator for that purpose.

Syntax:

// For accessing the property
object_name.property_name;
// For accessing the method
object_name.method_name();

4) Adding Images in Flutter:-

Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.

assets:
- assets/my_icon.png
- assets/background.png

To include all assets under a directory, specify the directory name with the / character at the end:

assets:
- assets/

5) Text in Flutter:-

1 — Text Widget :

The text widget is used to displays a string on the screen with a single style. with text Widgets, we can add different styles (font, Text color, Text size, etc). but the style work on the whole string.

Text(
  'Hello, World! How are you?',
  textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.bold),

Text Widget is very useful but it does not give you full control over text. that’s why we sometimes use Rich-text. It gives you more control over the text styles

Rich-Text Widget :

The text to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree.

RichText(
  text: TextSpan(
text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

Final:-

Those are the basic things that are useful for flutter beginners. but there are many important things that are necessary to learn.Stay tuned, as in 2024, I’ll be embarking on the journey of establishing my coding brand. I look forward to sharing my knowledge and the insights gained along the way with all of you.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top