Intro To Google's Flutter

I'm Manav

    GeekyAnts

We are the ones behind  

    NativeBase

NativeBase

  • A set of UI components to ease React Native development
     
  • ~6,500 Github stars
     
  • 8% of React Native downloads
  • A mobile app SDK by Google.
  • High performance apps at 60fps.
  • Craft beautiful UIs.
  • Eases migration to Mobile App Development.
  • Open Source!

What is Flutter?

Before Flutter

  • Native Solution
  • Hybrid Solution (WebView)
  • Compile To Native Solution

Native App Development

Hybrid (WebView)

Compile To Native

What makes Flutter so different?

No JavaScript, No Bridge!

Widgets are on your Side

Language Stack

  • Object-oriented language by Google.
  • Influenced by many other languages.

Dart

int fib(int n) => (n > 2) ? (fib(n - 1) + fib(n-2)) : 1;

void main() {
    print('fib(20) = ${fib(20)}');
}

Code Snippet

Widgets

Elements that affect and control the view and interface to an app

import 'package:flutter/material.dart';

void main() {
    runApp(new Center(child: new Text('This is an example')));
}

Let's start with a simple screen

Container

new Container(
    color: Colors.amber.shade400,
    alignment: FractionalOffset.center,
    child: new Text("Just an example!'),
)

Hero

new Hero(
    tag: photo.url, 
    child: new Image.network(photo.url,
        fit: BoxFit.cover, 
        height: 250.0))
new Hero( 
    tag: url, 
    child: new Image.network(url,
        fit:BoxFit.cover)));

Inherited Widget

final myInheritedWidget = MyInheritedWidget.of(context);
  • Layout
  • Themes
  • Navigation

Everything is a Widget!

Layout

Determines the size and position of widgets

Row

Column

Column

Column

Column

new Center( 
    child: new Column(
        children: [
            new Text('Hello, World!')),
            new Icon(Icons.star, color: Colors.green)
        ]
    )
)

Simple Widget Tree with Layout

Layout for Scrolling

Styling

<div class="greybox">
    Lorem ipsum
</div>

.greybox {
    background-color: #e0e0e0;
    width: 320px;
    font: 900 24px Georgia;
}

HTML

var container = new Container(
    child: new Text(
        "Lorem ipsum",
        style: new TextStyle(
            fontSize: 24.0
            fontWeight: FontWeight.w900,
            fontFamily: "Georgia",
        ),
    ),
    width: 320.0,
    height: 240.0,
    color: Colors.grey[300],
);

Flutter

HTML vs Flutter

Reactive Views

Virtual DOM

React

React Native

Flutter

Hot Reload

Compatibility

  • Widgets are part of your apps, not the platform. So no "compat" libraries are needed.
  • Your app will work the same on recent OS versions.
  • This significantly reduces the need to test app on older OS versions.

Forget Compat Libraries!

The question usually asked to Flutter Team

Will it take longer for widgets to update when a new OS version comes out?

  • Google loves Flutter.
  • Widgets so extensible and customizable that anyone can update them.
  • Write your app so it uses the new widget even on an older OS version.

State Management

Widget managing its own state

ON

OFF

ListView automatically scrolls its content when it exceeds the render box.

Parent Manages the Child's State

Text

Button

Parent

Child

Child

IconButton can be made as a stateless widget and its parent widget can decide what to do with it.

State

Mix-and-Match Approach

Parent widgets can manage some aspects of the child and the child will manage the other aspects.

So what should you choose?

  • If the state is user data, parent widget can manage it.
  • If the state is aesthetic, the child can manage it.
  • When in doubt, let the parent handle it.

Text

Button

Parent

Child

Child

Or use a separate store to manage your states.

Store

Flutter > React Native

  • Widget flexibility is increased by not using Platform OEM.
  • Doesn't need TypeScript or ReasonML since Dart is a typed language.
  • Great tooling in VSCode and IntelliJ.
  • Enormous support provided by Google to Flutter.

 Why Do We Feel So?

Our Work With Flutter

Start Flutter

Flat App in Flutter

If the "designer tools" could code for you?

Usual Workflow

Graphics
Design

UI
conversion

Data

Integration

Graphics
Design

UI
conversion

Data

Integration

Designers

Developers

Gap

Let's bridge the gap

Graphics
Design

UI
conversion

Data

Integration

Bi-directional

Graphics
Design

UI
conversion

Data

Integration

Welcome BuilderX!

Text

Demo

Switch between Design & Code

Copy from BuilderX and Paste in your Code Editor (and vice-versa)

Create re-useable symbols (components)

We dream

to bring the Designers & Developers on the same file

..with two important things in mind

  • Design without boundaries

  • Generate beautiful, readable & editable code

Get an alpha invite

http://BuilderX.io

Follow      / BuilderXio

BuilderX Team

Thank You!

Follow Sanket:      / sanketsahu

Follow Manav:      / Manav1020Goel

Made with Slides.com