[Newbie] Chapter 1. Flutter overview

About series

  • Is a series for a newbie with a basic approach
  • Focus on key value and does not mention and deep about theory

Content

  • What is Flutter?
  • Why use it?
  • What things does it include?
  • What is the importance object model in Flutter?
  • Why is it a widget?
  • System overview
  • Why does Flutter use Dart?

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

https://flutter.dev

Why use it?

  • Develop for iOS and Android from a single codebase using Dart language
  • Fast development: Flutter’s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster.
  • Expressive and Flexible UI: Rich set of Material Design, Cupertino, and full customization without the limitations of OEM widget sets.
  • Native Performance: Flutter code is compiled to native ARM machine code using Dart’s native compilers. Thus Flutter gives you full native performance on both iOS and Android.
  • Layout with “Design-oriented Development Flow”
  • Flutter is reactive. What is reactive which is a very popular keyword now? (try to guess yourself :D)

What things does it include?

  • Modern react-style framework
  • 2D rendering engine
  • Ready-made widgets
  • Great development tools

What is the importance object model in Flutter?

Everything’s a widget

Unlike other frameworks that separate views, view controllers, layouts, and other properties, Flutter has a consistent, unified object model: the widget.

A widget can define:

  • a structural element (like a button or menu)
  • a stylistic element (like a font or color scheme)
  • an aspect of layout (like padding)
  • and so on…

Why is it a widget?

Composition > inheritance

Widgets are themselves often composed of many small, single-purpose widgets that combine to produce powerful effects. For example, Container, a commonly-used widget, is made up of several widgets responsible for layout, painting, positioning, and sizing. Specifically, Container is made up of LimitedBox, ConstrainedBox, Align, Padding,DecoratedBox, and Transform widgets. Rather than subclassing Container to produce a customized effect, you can compose these, and other, simple widgets in novel ways.

https://flutter.dev/docs/resources/technical-overview
widget tree

For those who don’t know about ‘Composition > inheritance’

System overview

Layer cakes are delicious

For the complete set of libraries that make up the Flutter’s layered framework, see our API documentation.

Almost things had already, your job just make an awesome app with two missions:

  • Building widgets
  • Handling user interaction

Why does Flutter use Dart?

What is Dart?

Dart is a client-optimized language for fast apps on any platform made by Google

https://dart.dev

Why is Dart powerful?

  • Optimized for UI
  • Productive development
  • Fast on all platforms
  • Smart compiler:
    • With production: Dart is AOT (Ahead Of Time) compiled to fast, predictable, native code.
    • With dev mode serve hot reload: Dart can also be JIT (Just In Time) compiled for exceptionally fast development cycles.
  • Consistent 60 FPS (frames per second) performance: With a smart compiler above Dart makes it easier to create smooth animations and transitions that run at 60fps. Dart can do object allocation and garbage collection without locks.

More details

Just visit my article I wrote on medium: https://medium.com/@nhancv/why-i-move-to-flutter-34c4005b96ef

Some relevant posts: https://nhancv.com/category/tech/flutter/

Leave a Reply

Your email address will not be published.Required fields are marked *