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

- Flutter Interact is December 11th
- It's a live, online day of Flutter learning
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

- In Flutter, (almost) everything is a widget
- Widgets are reusable UI components
- Many come out-of-the-box
- It's easy to create custom 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



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
-
Dart
-
Flutter
-
Me
-
Email: jackfrosch@flutterfare.com
-
Twitter: @jackfrosch, @flutterfare
-
LinkedIn: jackfrosch
-
Questions?

Flutter Fare Project - Day One
By Jack Frosch
Flutter Fare Project - Day One
- 1,720