Flutter : Everything is a Widget Series — Part 1
One of the main themes that quickly jump at you while using Flutter is that, everything is a widget. The aim of this series is to help beginners understand this simple yet powerful concept and introduce them to basic widgets in Flutter.
Well, it’s not going to be all talk like you’d expect. I’ll make it more challenging. And to do this, I decided to build a Twitter Mobile App UI but with the following constraint:
- Use only widgets that come out of the box in Flutter
- Do not use external libraries
For any point at which I deviate, you will be notified and given a reason. Below is the result and you can find the project at https://github.com/topeomot2/twitter-ui-app
So i compiled a list of the widgets i used. Find them below. We shall look at some basic concepts and look at each of the widgets used in this series.
- Container
- Column
- Row
- Text
- SizedBox
- Expanded
- Icon
- Divider
- Padding
- TextStyle
- Card
- Scaffold
- AppBar
- ListView
- ListTile
- CircleAvatar
- Drawer
- MaterialApp
An important feature of Flutter is its simplicity. Flutter is very simple, but also very powerful. And my aim in this series is to follow that same pattern, and show its variety of use cases.
Where do Widgets come in
I reckon this might have been unfamiliar for some. So, to understand this, we need to understand what Flutter is itself. For simplicity, we’re going to look at the 2 major ways that applications have been developed for mobile platforms.
- Native Development
In Native development, you write code which automatically makes use of the device OEM widgets for display and talks directly to the device services for capabilities like bluetooth, camera etc.
Did you notice? I said OEM widgets. Meaning you will have to develop for each platform separately. They are done in languages that are chosen by the OEMs. For Android, that is primarily Java and Kotlin, Objective C and Swift for IOS.
Pros: There is more access to device capabilities.
Cons: You have to develop separately for the different platforms. - Cross Platform Development
For cross platform development, these are majorly HTML, JavaScript and CSS in WebView. These WebViews cannot talk to the the OEM widgets for UI and definitely not the device services.
The above translates to the use of a JavaScript Bridge, which acts as a layer between their code and the device capabilities. Because they talk through a bridge, you can write once and let the JavaScript Bridge do the work of talking to the native layer of whatever platform is there.
Pros: You get faster development since you only need to build once and it works on both Android and IOS.
Cons: This cannot utilise native device capabilities.
But what does Flutter do?
It introduces another paradigm by taking the best of both worlds. Take a look below:
- Flutter uses the Dart programming language which is then compiled into native ARM Code, which means your apps built with Flutter have full access to device capabilities.
- To deal with the different OEM widgets, Flutter totally avoids OEM widgets and builds its own widgets using its own renderer. This means widgets which look and feel like the native OEM widgets and adapts to the platform.
- But this widgets are so customisable that you can build a totally different experience from what the OEM normal look and feel like. It is all up to you.
So Flutter gives you Native Capabilities while doing Cross Platform Development. The main backbone of building Flutter apps is the Widget and we shall be looking at them in greater details in the coming weeks.
But remember,
Native development — Egusi.
Cross Platform development — Ogbono.
Flutter — Egusi + Ogbono.
Please I would really love to hear your feedback. follow me https://twitter.com/topeomot and https://github.com/topeomot2