Flutter UI Widgets

Transcript: 01. Understand Flutter's UI Approach Flutter is a UI framework for creating beautiful mobile, desktop and web applications all from a single code base. You code your UI using the Dart programming language instead of using an Interface Builder or XML. To build UIs, you simply use a widget. Widgets are classes that holds the user interface and sometimes the state of the widgets. In other words, widgets are the building blocks of Flutter applications. Historically, native apps have always been created in an imperative fashion, meaning your UI is updated based on a sequence of events in a step-by-step manner. So when you're working with something like a label and there's a change in your model or data, you have to tell the UI of view to set the text on a label to the new value. On the other hand, Flutter uses a declarative approach in building UIs. Here, your UI is simply the result of a function that processes the change in a state. That means that your UI is updated based on changes in the states. In other words, when your state changes, Flutter automatically updates the UI. Flutter favors composition over inheritance, which means that widgets are composed of other widgets, this results in a tree-like structure. So a Flutter app is just a tree of widgets and each app screen is a sub-tree in that entire widget tree. Every widget has a build method, which takes the data in the widgets and returns a composition of widgets, which describes the user interface. The build method is called whenever the widget is inserted in a tree, or when the dependencies of the widget changes. You can create stateless or stateful widgets. Stateless widgets are simply widgets in which its properties don't change, meaning its properties are fixed and can't be changed by the widget itself. It can only rebuild its contents when the parent widget passes a new value to its properties. This process destroys the stateless widget and recreate it with the new properties. A simple example could be a text widget to display the app's name on the app bar. This could be a stateless widget since the app name would not need to be updated while using the app. On the other hand, stateful widgets have a mutable states. This simply means that the widgets can internally change its properties to trigger a rebuild. An example could be a newsfeed card widget, which has a like or react button. Pressing the button will trigger the total like statement bar to change, which in turn rebuilds the widgets with a new total likes. Remember, all this happens in a declarative way, meaning widgets are updated when it's state changes, so you don't have to do any extra work. So, which widget should you use? The stateful or the stateless widgets? Well, the rule of thumb is, always start with the stateless widgets then if the need arises to manage states locally, then you convert it to stateful widget. So does this mean that Android and iOS doesn't support the declarative approach to view the UIs? Well, over the years, the declarative approach of building UIs has gained popularity, with libraries like React and mobile frameworks like React Native. The native app ecosystem has also followed this trend because there's no doubt that UI creation is heading towards the declarative side. Android and iOS have created Jetpack Compose and SwiftUI respectively to let native developers benefit from the gains of building app UI declarative need. Do note that SwiftUI only works for iOS 13 apps and up. So your SwiftUI apps wont work on older devices. On the other hand, Flutter is a cross platform framework, used for building apps for mobile web and desktop, all from a single code base. And it is definitely a good framework to dive into the ocean of declarative UI development. This course explores various commonly used UI widgets provided by Flutter, and I can't wait to get started. So go ahead and grab a cup of coffee and I'll see you in the next episode.