Understanding Flutter for Web Developers: Key Concepts Explained

As a full-stack web developer with experience in various web programming frameworks, I recently started learning Flutter. To start with, I recently completed an 'Introduction to Flutter' course from Udemy. Following are some of the concepts that I found unique in Flutter compared to traditional web development frameworks. I have included analogies with web development frameworks wherever possible to help bridge the understanding for web developers.

Note: It is intended for readers who have a background in web development and programming. Beginners to programming may find some of the comparisons and terminologies advanced.

1. Widget

In simple words, 'Widget' is a building block to develop a flutter application. Just like React has components, Flutter has widgets to build the application's UI. Just as you use React components to build the UI by combining them hierarchically, Flutter uses widgets to construct the entire application's UI. Each Widget in Flutter can represent anything from a simple button or text label to complex layouts and entire screens.

2. Stateless Widget vs Stateful Widget

Stateless Widget

A Stateless Widget in Flutter is similar to a functional component in React that does not manage any state. In other words, once the application is built, any user interaction or logic will have no effect on these widgets. They remain as is. An example of a Stateless Widget is as follows:

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}

In this example, the text is static, that is, it will not change regardless of any interaction of the user with the application.

Stateful Widget

A Stateless Widget, on the other hand, can change over time in response to user interactions or other events. Below is an example of a Stateful Widget.

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String displayText = 'Hello, Flutter!';

  void updateText() {
    setState(() {
      displayText = 'Text Updated!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(displayText),
        ElevatedButton(
          onPressed: updateText,
          child: Text('Update Text'),
        ),
      ],
    );
  }
}

In the above example, as the user clicks on the button, the text on the screen changes. Hence, such widgets are known as stateful widgets.

3. setState vs initState

setState

In Flutter, setState is used to update the state of the stateful widget. Considering the example of Stateful Widget, in order to change the displayText, it must be done using setState((){ displayText = 'Text Updated!' });. When you call setState, it tells Flutter to rebuild the widget with the new state. It is similar to how calling 'setState' in a React class component triggers a re-render with the updated state.

initState

initState is a method that is called the first time, the stateful widget is built. This method is used to initialize the value of the state. Again considering the example of Stateful Widget, initially the value of displayText can be assigned using initState((){ displayText = 'Hello, Flutter!' });.

4. Using 'const'

In Flutter, you can use 'const' while declaring/using a widget. Using 'const' allows Flutter to create the widget once and reuse it, which can lead to better performance because the widget doesn't need to be rebuilt. For example, if there is a static text, it can be declared using const Text('Hello, Flutter!');. 'const' can even be used in a stateful widget, if there is any child widget which is supposed to be static.

Citation
I would like to acknowledge that I took help from ChatGPT to structure my blog, simplify content, and generate sample code examples.