Codingshah

Dis Advatages of Hybrid framework

2020-07-18T21:48:00.001+05:30

What is Hybrid Framework :

Hybrid app development framework are the frame work which is use to create app for many platform like android and Ios using single coding language . The Hybrid frame work Create the app Which is close to Native application .

Hybrid Framework are in 2020 :

1. React Native

2 Flutter

3 Ionic etc.

Advantage of Hybrid Frame work:

1) fast development

2) high performance

3) easy to handle

4) better Lock and feel

Disadvantages of Hybrid Framework:

1) Feature

2) debugging

USING THEMES TO STYLE YOUR APP

2020-05-24T14:27:00.005+05:30

USING THEMES TO STYLE YOUR APP

The theme widgets are a great way to style and define global colors and font styles for your app. There are two ways to use theme widgets—to style the look and feel globally or to style just a portion of the app. For instance, you can use themes to style the color brightness (light text on a dark background or vice versa); the primary and accent colors; the canvas color; and the color of app bars, cards, dividers, selected and unselected options, buttons, hints, errors, text, icons, and so on.

Using a Global App Theme

When the project is created the default theme color of our application is blue and canvas color is White.

To change the theme of your application we use the 'theme' property in material App that is your entry point of your GUI or Application.

See the Below code to change the of your app:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       
        primarySwatch: Colors.deepPurple,//this will change your theme color
        
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

If You want to change the color of canvas of your application and change the GUI representation in your application Flutter all so provide the way to change representation of your application.

To Change your Canvas and representation of your app see the following code:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       
        primarySwatch: Colors.deepPurple,
        canvasColor: Colors.deepPurpleAccent,
        platform: TargetPlatform.iOS,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

This code will Change you application like below:

Before After

In above code the "TargetPlatform" Property allows you to show the iOS traits on android and vice versa in to the Flutter Application. The TargetPlatform property has five choices they are as follow:

Android
iOS
Windows
Linux
Fuchsia

These Are the operating System.

If you want to Show the iOS traits in android simply you have to write the "TargetPlateform.iOS"

this will Show the Bellow result:

Using a Theme for Part of an App

In above section we change the primarySwatch color and Canvas color of flutter application.Which affect to all the widget in the application .What if You want to change the only one widget in the application have different color and rest widgets use the default scheme in app.

To override the app wide theme you can wrap the widgets in a Theme widget. This method will completely override the app ThemeData instance without inheriting any style.

Bellow Sample code show how it's done:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("DEMO"),),
      body:  Center(  child: Theme(    // Unique theme with ThemeData - Overwrite
          data: ThemeData(      
            cardColor: Colors.deepOrange,    
          ),    child: Card(      
        child: Text('Unique ThemeData'),    
      )
    )
      )
    );
  }
}

Result:

Understanding the widget tree and element tree

2020-05-11T01:28:00.001+05:30

Understanding the Widget tree and Element tree:

Widget tree :

Widget tree are the collection of different widgets that are use to build the application. Widget contain the instructions to create the UI and when you compose widgets

together they create widget tree.

In flutter every thing is widgets mans that when the application is run it call the runApp() method .Basically we taking StatelessWidget as the argument and mounted as root element for the application.Then flutter framework processes through all the widgets and corresponding elements is mounted.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
                    debugShowCheckedModeBanner: false, 
                        home: MainPage());
  }
}

Element tree:

Element tree are the collection of the child widget like Icons,Text. Element tree are the reference of widget tree.Each element in a element tree is unique.

Stateless Widget and Element tree:

A stateless widget has the configuration to create a stateless element. Each stateless widget has a corresponding stateless element.The Flutter framework calls the createElement method (create an instance), and the stateless element is created and mounted to the element tree. In other words, the Flutter framework makes a request from the widget to create an element and then mounts the element to the element tree.

Each element contains a reference back to the widget. The element calls the widget’s build method to check for children widgets, and each child widget (like an Icon or Text) creates its own element and is mounted to the element tree. This process results in two trees: the widget tree and the element tree.

class JournalList extends StatelessWidget {

@override Widget build(BuildContext context) {

return Row(

children: <Widget>[

Icon(),

Text(),

);

} }

Stateful Widget and Element tree:

A stateful widget has the configuration to create a stateful element. Each stateful widget has a corresponding stateful element. The Flutter framework calls the createElement method to create the stateful element, and the stateful element is mounted to the element tree. Since this is a stateful widget, the stateful element requests that the widget create a state object by calling the StatefulWidget class’s createState method.

The stateful element now has a reference to the state object and the widget at the given location in the element tree. The stateful element calls the state object widget’s build method to check for child widgets, and each child widget creates its own element and is mounted to the element tree.

This process results in two trees: the widget tree and the element tree. Note that if a child widget displaying the state (journal note) is a stateless widget like the Text widget, then the element created for this widget is a stateless element.

The state object maintains a reference to the widget (StatefulWidget class) and also handles the construction for the Text widget with the latest value.

Types of widgets and there Life Cycle

2020-05-08T23:30:00.000+05:30

Types of widgets and there Life Cycle:

Mainly two type of widgets in flutter using these widgets we can create stunning app.

The widgets are as follow:

Stateless widgets.

State full widgets.

Stateless widgets:

Stateless widget are the widgets that do not chance there state like text, image,etc.

A State less widgets are use when the value not change.For example, the screen displays an image with a description and will not change.

The Basic Structure of Stateless widget is as follow:

class JournalList extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Container(

);

}

State Full Widget:

State full widgets is used when Values have to change means it change the State when the certain event is occurred or data receive.The State full widget are dynamic, Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets. Stateful widgets subclass StatefulWidget.

Before Touch :

After Touch:

The Basic Structure of State Full widget:

class TapBoxA extends StatefulWidget {

  @override

  _TapBoxAState createState() => _TapBoxAState();

}

class _TapBoxAState extends State<TapBoxA> {

  @override

  Widget build(BuildContext context) {

    return Container(

    );

  }

}

Understanding Widget Life Cycle :

State less widget:

State less widget are immutable once drawn function of the state less widget is call only once and no

amount of change in any variable values or event can call it again.

To redraw the State less widget ,we need to create a new instance of the widget.

State full widget:

The State full Widget is mutable and it can drawn multiple time in its life time.

Introduction to Widget in flutter

2020-03-16T22:46:00.001+05:30

What is widget's in flutter

Widgets is like small piece of structure or block using this blocks together we create an object and by adding different kind of block and we can alter the look and behavior of the object.

e.g : like a blue print of house.

Introduction to Flutter

2020-03-11T18:30:00.001+05:30

INTRODUCTION OF FLUTTER

Flutter is introduced in year 2015 Summit under the name Sky The Flutter Flutter is Google’s portable UI framework for building modern, native, and reactive applications for iOS and Android.

The Flutter Framework uses DART Language to build the Application for Android and IOS , Flutter Framework is light and very fast in lunching the application ,The Flutter has many features like Single Code Base Development and run faster etc.

Flutter is fast, and the rendering runs at 60 frames per second (fps) and 120 fps for capable devices. The higher the fps, the smoother the animations and transitions .