Group Project - Day One

Getting started building our project

presented by Jack Frosch

Agenda

  • Introductions & News
  • WoW Widgets
  • Overview of our demo project
  • Getting started on our project

Introductions & News

  • Introductions
  • Dart News
  • Flutter News

About me

In my first career,

I drove these...

In my second career,

I mostly drive these...

About Me

My other Meetup

1st Tuesday of the month

About The Group

  • Independent Meetup (not Google sponsored)
  • Our Meetup is for learning about Flutter and Dart
  • Oriented toward Flutter and Dart newbies
  • Previous programming knowledge is a prerequisite
  • Syntax is easily relatable to Java, TypeScript/JavaScript, Kotlin

Dart News

  • Dart 2.6 released
  • This release offers ability to target native platforms
  • Demo
// create file named hello.dart
main() {
  print(‘Hello Dart developers’);
}

// compile it
// dart2native hello.dart -o hello

// On Mac, make output file executable
// chmod +x hello

// Run it
// $ hello

Flutter News

WoW Widgets

Concept

FlutterTours.com offers self-guided audio tours from the convenience of your mobile phone or tablet. Users can browse the tour catalog, search for tours within a specified range of current location or a map location, or find tours using key words. Tours can be purchased, then downloaded to one or multiple devices for a personal, offline guided tour.

Mockups

The following pages illustrate what the application might look like on a smart phone... 

Starting our Project

  • Creating the project
  • Some terms and concepts 
  • Making a Splash screen
  • Making a Featured Tours screen

Creating the Project

  • Creating the project
  • Some terms and concepts 
  • Making a Splash screen
  • Making a Featured Tours screen

Creating the Project

$ flutter create flutter_tours
$ cd flutter_tours
$ git init

Command Line

via Android Studio

Creating the Project

Creating the Project

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Creating the Project

...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // widget is MyHomePage
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      ...
...
floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Some Terms and Concepts

  • Widgets
  • Stateless vs Stateful Widgets
  • The build method
  • Widgets, Elements, RenderObjects
  • Screens / Views / Pages

Widgets

Stateless vs Stateful Widgets

  • Stateless widgets get their properties set at instantiation time
  • Any state changes after construction have no effect in UI
  • Stateful widgets get their properties set at instantiation time and when setState is called
  • When setState changes state, the widget's build method will be called
  • One of our goals is to avoid rebuilding all of a subtree if possible

The build method

  • Every widget has a build method
  • The build method will be called after a widget is instantiated
  • Calling setState() on a stateful widget triggers the build method to be called
  • Nested (child) widgets' build methods will be called when the parent widget's build method is invoked

Widgets, Elements, Render Objects

  • Widgets are Dart classes. They are not what gets rendered
  • Widgets are basically configuration for rendering
  • Stateful widgets also have a state object
  • Each widget is associated with an Element
  • An Element holds the reference to the state object
  • Widgets are lightweight and are destroyed and recreated
  • An Element also holds a reference to the Render Object
  • Render Object does rendering and is expensive to create
  • The Element sees the new Widget tree and can compare it to the Render Object tree

Widgets, Elements, Render Objects

https://medium.com/flutter-community/the-layer-cake-widgets-elements-renderobjects-7644c3142401

Screens / Views / Pages

  • Everything is a widget, but some widgets are meant to be containers for others
  • In web, we might call these pages
  • In mobile, we might call these views or screens
  • We'll generally use the term Screen
  • We'll structure our app to help remind us

Making our Splash Screen

  • Mobile apps usually open to a splash screen
  • Android and iOS have specific ways to do this
  • For now, we'll make an interim splash screen just to get started

Demo

Making How It Works screen

  • This will just be a shell of a basic screen
  • We'll include some static text and image placeholders
  • We'll include a Drawer placeholder
  • We'll include a Popup Menu place holder
  • Today, we'll just explore some basic layout widgets

Demo

Summary

  • Flutter is pretty straightforward
  • Everything is a widget
  • The biggest hurdle to working with Flutter is knowing what widgets to use and how to use them

Next Up

  • Dive into learning about stateful widgets
  • Routing between screens
  • Introduction to form handling with validation
  • Managing state in the application
  • Futures and async processing
  • Making network calls

Resources

Questions?