You've successfully subscribed to Smartcodehub ™ Blog
Great! Next, complete checkout for full access to Smartcodehub ™ Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
What is Flutter?

What is Flutter?

Flutter is developed by Google to design High performance and High fidelity mobile apps for Android and iOS using a single code base

Laxman Ram
Laxman Ram

Flutter is the next blooming technology for crafting beautiful, natively compiled applications for multiple platforms.

Flutter is developed by Google to design High performance and High fidelity mobile apps for Android and iOS using a single code base. Flutter uses dart as their primary programming language to create this single code base.

Feature's of Flutter:

With Flutter, we can develop beautiful, high performance, and animated mobile applications. It gives you complete control to customize every pixel of the screen. It provides hot reloading means making any change in codebase reflect directly on the app; it does not take time like compiling and building; you can view the changes while writing the code. It is a perfect option for developers.

We write in a single code base, and we get 2 different natively compiled applications with their codebase. Means, if you want to make any changes for Android in their native language, then you can open the natively compiled codebase and make the changes and build the app. Impressive, isn't it.

Flutter comes with a build-up in Cupertino (iOS), and Material (Android) designs so that you can build beautiful designs as per the platform without a need to add a third-party library.

Flutter Architecture

In Flutter, everything's a widget, that's important to understand. If you had an app and you build your entire screen, your entire app from such small widgets. The whole page is a widget. you built your entire application as widget tree like button , input can be a widget and the form which holds this widget is also a form widget.

How Flutter transformed to a Native App

Flutter simply compile that Dart code to native code for these different platforms and that happens with the help of the Flutter SDK and as a result, you get real apps spit out with highly optimized high performance code that's based on your code

In Flutter as we said everything is widget, there are two types of widget in flutter.

  1. Stateful Widgets
  2. Stateless Widgets

Stateful Widget

First, let's understand about State. In general, state is data or information your app or your widgets use. State can be things like a username or list or image or any data which users can see and modify.

So Stateful Widget means a widget have a state within itself and user can modify this state or update the information. A Stateful widget is dynamic and mutable: for example, it can change its appearance in response to events triggered by user interactions or when it receives data.

We create Stateful widget by extending StatefulWidget in our class. When the widget’s state changes, the state object calls setState(), telling the framework to redraw the widget.

class MyApp extends StatefulWidget {
    @override
    State `<StatefulWidget>` createState() {
        return MyAppState();
    }
}

class MyAppState extends State`<MyApp>` {
    var increamentIndex =0;
    
    void increamentCall() {
        setState(() { increamentIndex += 1; });
    }
}

Above example is about creating a state using createState and updating the state using setState method.

Stateless Widget

We create Stateless Widget by extending our class from StatelessWidget and these Widget are immutable, means you can not change or declare a state inside the Stateless Widget.

Stateless Widget get the data or state from it's Parent Widget. These are useful when your part of the UI does not depends on anything other then the data which is being passed.       Below is the example of Stateless Widget:

class MyApp extends StatelessWidget {
  const MyApp({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(color: const Color(0xFF2DCD3A));
  }
}

Hope it helped you in learning something new in the easiest  way

Thanks for reading….!!!!

Laxman