Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Flutter: The New Kid in Town

Introduction to Flutter: The New Kid in Town

Introduction to fluter.

Talk at DevFeast Dubai

Mohit Sharma

November 07, 2022
Tweet

More Decks by Mohit Sharma

Other Decks in Programming

Transcript

  1. What is Flutter ? Flutter allows you to build beautiful

    native apps on iOS and Android from a single codebase.
  2. 1. Learning curve !! 2. Is it production ready ?

    3. What about community support ? That’s nice, but ?
  3. What’s under the hood Skia Dart Text Foundation Animation Painting

    Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino Flutter Documentation “Architecture Diagrams”
  4. Dart • Java like language , which make it easy

    to learn. • Support both JIT and AOT compilation, which helps us to develop and iterate fast. • It’s reactive by nature - Build-in Futures and Streams • Compiles to native ARM
  5. Everything’s a Widget Widgets are the basic building blocks. Each

    widget is an immutable declaration of part of the user interface. 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…
  6. Composition > inheritance Widgets are themselves often composed of many

    small, single-purpose widgets that combine to produce powerful effects.
  7. More on Widgets Stateless Widget constructor build Stateful Widget constructor

    createState A single Stateless Widget can build in many different BuildContexts A Stateful Widget creates a new State object for each BuildContext Flutter Documentation “Architecture Diagrams”
  8. State<T> lifecycle (created) initState dispose (dirty) build (clean) didUpdateConfig setState

    (defunct) A State<T> object can rebuild if ... ... it receives a new configuration … it changes its internal state Flutter Documentation “Architecture Diagrams”
  9. 1. Download flutter package and extract it. 2. Run command

    to complete the installation flutter doctor [-v] 3. Download your favourite IDE and add flutter plugin to it. Done !!! Let’s get started
  10. Things that needs more thoughts 1. Code organization with project.

    2. Provide build support for architecturing the app like JetPack.