Home Page Icon
Home Page
Table of Contents for
Table of Contents
Close
Table of Contents
by Marco L. Napoli
Beginning Flutter
COVER
INTRODUCTION
WHO THIS BOOK IS FOR
WHAT THIS BOOK COVERS
HOW THIS BOOK IS STRUCTURED
WHAT YOU NEED TO USE THIS BOOK
CONVENTIONS
ERRATA
PART I: The Foundations of Flutter Programming
1 Introducing Flutter and Getting Started
INTRODUCING FLUTTER
UNDERSTANDING WIDGET LIFECYCLE EVENTS
UNDERSTANDING THE WIDGET TREE AND THE ELEMENT TREE
INSTALLING THE FLUTTER SDK
CONFIGURING THE ANDROID STUDIO EDITOR
SUMMARY
2 Creating a Hello World App
SETTING UP THE PROJECT
USING HOT RELOAD
USING THEMES TO STYLE YOUR APP
UNDERSTANDING STATELESS AND STATEFUL WIDGETS
USING EXTERNAL PACKAGES
SUMMARY
3 Learning Dart Basics
WHY USE DART?
COMMENTING CODE
RUNNING THE MAIN() ENTRY POINT
REFERENCING VARIABLES
DECLARING VARIABLES
USING OPERATORS
USING FLOW STATEMENTS
USING FUNCTIONS
IMPORT PACKAGES
USING CLASSES
IMPLEMENTING ASYNCHRONOUS PROGRAMMING
SUMMARY
4 Creating a Starter Project Template
CREATING AND ORGANIZING FOLDERS AND FILES
STRUCTURING WIDGETS
SUMMARY
5 Understanding the Widget Tree
INTRODUCTION TO WIDGETS
BUILDING THE FULL WIDGET TREE
BUILDING A SHALLOW WIDGET TREE
SUMMARY
PART II: Intermediate Flutter: Fleshing Out an App
6 Using Common Widgets
USING BASIC WIDGETS
USING IMAGES AND ICONS
USING DECORATORS
USING THE FORM WIDGET TO VALIDATE TEXT FIELDS
CHECKING ORIENTATION
SUMMARY
7 Adding Animation to an App
USING ANIMATEDCONTAINER
USING ANIMATEDCROSSFADE
USING ANIMATEDOPACITY
USING ANIMATIONCONTROLLER
SUMMARY
8 Creating an App's Navigation
USING THE NAVIGATOR
USING HERO ANIMATION
USING THE BOTTOMNAVIGATIONBAR
USING THE BOTTOMAPPBAR
USING THE TABBAR AND TABBARVIEW
USING THE DRAWER AND LISTVIEW
SUMMARY
9 Creating Scrolling Lists and Effects
USING THE CARD
USING THE LISTVIEW AND LISTTILE
USING THE GRIDVIEW
USING THE STACK
CUSTOMIZING THE CUSTOMSCROLLVIEW WITH SLIVERS
SUMMARY
10 Building Layouts
A HIGH‐LEVEL VIEW OF THE LAYOUT
CREATING THE LAYOUT
SUMMARY
11 Applying Interactivity
SETTING UP GESTUREDETECTOR: THE BASICS
IMPLEMENTING THE DRAGGABLE AND DRAGTARGET WIDGETS
USING THE GESTUREDETECTOR FOR MOVING AND SCALING
USING THE INKWELL AND INKRESPONSE GESTURES
USING THE DISMISSIBLE WIDGET
SUMMARY
12 Writing Platform‐Native Code
UNDERSTANDING PLATFORM CHANNELS
IMPLEMENTING THE CLIENT PLATFORM CHANNEL APP
IMPLEMENTING THE iOS HOST PLATFORM CHANNEL
IMPLEMENTING THE ANDROID HOST PLATFORM CHANNEL
SUMMARY
PART III: Creating Production‐Ready Apps
13 Saving Data with Local Persistence
UNDERSTANDING THE JSON FORMAT
USING DATABASE CLASSES TO WRITE, READ, AND SERIALIZE JSON
FORMATTING DATES
SORTING A LIST OF DATES
RETRIEVING DATA WITH THE FUTUREBUILDER
BUILDING THE JOURNAL APP
SUMMARY
14 Adding the Firebase and Firestore Backend
WHAT ARE FIREBASE AND CLOUD FIRESTORE?
CONFIGURING THE FIREBASE PROJECT
ADDING A CLOUD FIRESTORE DATABASE AND IMPLEMENTING SECURITY
BUILDING THE CLIENT JOURNAL APP
SUMMARY
15 Adding State Management to the Firestore Client App
IMPLEMENTING STATE MANAGEMENT
BUILDING STATE MANAGEMENT
SUMMARY
16 Adding BLoCs to Firestore Client App Pages
ADDING THE LOGIN PAGE
MODIFYING THE MAIN PAGE
MODIFYING THE HOME PAGE
ADDING THE EDIT JOURNAL PAGE
SUMMARY
INDEX
END USER LICENSE AGREEMENT
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
COVER
Next
Next Chapter
Title Page
Table of Contents
COVER
INTRODUCTION
WHO THIS BOOK IS FOR
WHAT THIS BOOK COVERS
HOW THIS BOOK IS STRUCTURED
WHAT YOU NEED TO USE THIS BOOK
CONVENTIONS
ERRATA
PART I: The Foundations of Flutter Programming
1 Introducing Flutter and Getting Started
INTRODUCING FLUTTER
UNDERSTANDING WIDGET LIFECYCLE EVENTS
UNDERSTANDING THE WIDGET TREE AND THE ELEMENT TREE
INSTALLING THE FLUTTER SDK
CONFIGURING THE ANDROID STUDIO EDITOR
SUMMARY
2 Creating a Hello World App
SETTING UP THE PROJECT
USING HOT RELOAD
USING THEMES TO STYLE YOUR APP
UNDERSTANDING STATELESS AND STATEFUL WIDGETS
USING EXTERNAL PACKAGES
SUMMARY
3 Learning Dart Basics
WHY USE DART?
COMMENTING CODE
RUNNING THE MAIN() ENTRY POINT
REFERENCING VARIABLES
DECLARING VARIABLES
USING OPERATORS
USING FLOW STATEMENTS
USING FUNCTIONS
IMPORT PACKAGES
USING CLASSES
IMPLEMENTING ASYNCHRONOUS PROGRAMMING
SUMMARY
4 Creating a Starter Project Template
CREATING AND ORGANIZING FOLDERS AND FILES
STRUCTURING WIDGETS
SUMMARY
5 Understanding the Widget Tree
INTRODUCTION TO WIDGETS
BUILDING THE FULL WIDGET TREE
BUILDING A SHALLOW WIDGET TREE
SUMMARY
PART II: Intermediate Flutter: Fleshing Out an App
6 Using Common Widgets
USING BASIC WIDGETS
USING IMAGES AND ICONS
USING DECORATORS
USING THE FORM WIDGET TO VALIDATE TEXT FIELDS
CHECKING ORIENTATION
SUMMARY
7 Adding Animation to an App
USING ANIMATEDCONTAINER
USING ANIMATEDCROSSFADE
USING ANIMATEDOPACITY
USING ANIMATIONCONTROLLER
SUMMARY
8 Creating an App's Navigation
USING THE NAVIGATOR
USING HERO ANIMATION
USING THE BOTTOMNAVIGATIONBAR
USING THE BOTTOMAPPBAR
USING THE TABBAR AND TABBARVIEW
USING THE DRAWER AND LISTVIEW
SUMMARY
9 Creating Scrolling Lists and Effects
USING THE CARD
USING THE LISTVIEW AND LISTTILE
USING THE GRIDVIEW
USING THE STACK
CUSTOMIZING THE CUSTOMSCROLLVIEW WITH SLIVERS
SUMMARY
10 Building Layouts
A HIGH‐LEVEL VIEW OF THE LAYOUT
CREATING THE LAYOUT
SUMMARY
11 Applying Interactivity
SETTING UP GESTUREDETECTOR: THE BASICS
IMPLEMENTING THE DRAGGABLE AND DRAGTARGET WIDGETS
USING THE GESTUREDETECTOR FOR MOVING AND SCALING
USING THE INKWELL AND INKRESPONSE GESTURES
USING THE DISMISSIBLE WIDGET
SUMMARY
12 Writing Platform‐Native Code
UNDERSTANDING PLATFORM CHANNELS
IMPLEMENTING THE CLIENT PLATFORM CHANNEL APP
IMPLEMENTING THE iOS HOST PLATFORM CHANNEL
IMPLEMENTING THE ANDROID HOST PLATFORM CHANNEL
SUMMARY
PART III: Creating Production‐Ready Apps
13 Saving Data with Local Persistence
UNDERSTANDING THE JSON FORMAT
USING DATABASE CLASSES TO WRITE, READ, AND SERIALIZE JSON
FORMATTING DATES
SORTING A LIST OF DATES
RETRIEVING DATA WITH THE FUTUREBUILDER
BUILDING THE JOURNAL APP
SUMMARY
14 Adding the Firebase and Firestore Backend
WHAT ARE FIREBASE AND CLOUD FIRESTORE?
CONFIGURING THE FIREBASE PROJECT
ADDING A CLOUD FIRESTORE DATABASE AND IMPLEMENTING SECURITY
BUILDING THE CLIENT JOURNAL APP
SUMMARY
15 Adding State Management to the Firestore Client App
IMPLEMENTING STATE MANAGEMENT
BUILDING STATE MANAGEMENT
SUMMARY
16 Adding BLoCs to Firestore Client App Pages
ADDING THE LOGIN PAGE
MODIFYING THE MAIN PAGE
MODIFYING THE HOME PAGE
ADDING THE EDIT JOURNAL PAGE
SUMMARY
INDEX
END USER LICENSE AGREEMENT
List of Tables
Chapter 1
TABLE 1.1: StatefulWidget lifecycle
Chapter 3
TABLE 3.1: Arithmetic operators
TABLE 3.2: Equality and relational operators
TABLE 3.3: Type test operators
TABLE 3.4: Assignment operators
TABLE 3.5: Logical operators
TABLE 3.6: Conditional expressions
TABLE 3.7: Cascade notation (..)
TABLE 3.8: ternary operator
Chapter 5
TABLE 5.1: Material Design vs. Cupertino Widgets
Chapter 9
TABLE 9.1: Slivers
TABLE 9.2: Sliver Delegates
Chapter 11
TABLE 11.1: GestureDetector Callbacks
TABLE 11.2:
DismissDirection
Dismiss Options
Chapter 12
TABLE 12.1: StandardMessageCodec‐Supported Value Types
Chapter 13
TABLE 13.1: Key/Value Pairs
TABLE 13.2: Objects and Arrays
TABLE 13.3: Sorting Dates
TABLE 13.4: EditEntry Class Constructor Arguments
TABLE 13.5: Save or Cancel FlatButton
TABLE 13.6: showDatePicker
Chapter 14
TABLE 14.1: Data structure comparison
TABLE 14.2: Cloud Firestore sample data
Chapter 15
TABLE 15.1: Folders and files structure
TABLE 15.2: How to query the database
List of Illustrations
Chapter 1
FIGURE 1.1: StatelessWidget lifecycle
FIGURE 1.2: StatefulWidget lifecycle
FIGURE 1.3: Widget tree and element tree
FIGURE 1.4: StatelessWidget widget tree and element tree
FIGURE 1.5: StatefulWidget widget tree, the element tree, and the state object
FIGURE 1.6: Updating the state process
FIGURE 1.7: Updated state for the widget tree and element tree
Chapter 2
FIGURE 2.1: iOS traits running in Android
FIGURE 2.2: Android traits running in iOS
Chapter 5
FIGURE 5.1: Full widget tree view
Chapter 6
FIGURE 6.1: RichText with TextSpan
FIGURE 6.2: Column widget
FIGURE 6.3: Column widget rendered in app
FIGURE 6.4: Row widget
FIGURE 6.5: Row widget rendered in app
FIGURE 6.6: Column and Row nesting
FIGURE 6.7: Column and Row widgets rendered in app
FIGURE 6.8: FloatingActionButton with notch
FIGURE 6.9: FlatButton
FIGURE 6.10: RaisedButton
FIGURE 6.11: IconButton
FIGURE 6.12: ButtonBar
FIGURE 6.13: Image code completion
FIGURE 6.14: Images loaded locally and from network (web)
FIGURE 6.15: Silhouette‐style image
FIGURE 6.16: Icons with custom sizes
FIGURE 6.17: BoxDecoration applied to a Container
FIGURE 6.18: InputDecoration with OutlineInputBorder and default border
FIGURE 6.19: The Form and TextFormField layout
Chapter 7
FIGURE 7.1: What you're building with AnimationController
Chapter 8
FIGURE 8.1: Final BottomNavigationBar with icons and titles
FIGURE 8.2: BottomAppBar with embedded FloatingActionButton creating a notch
FIGURE 8.3: TabBar in the Scaffold bottomNavigationBar property
FIGURE 8.4: Drawer and ListView
Chapter 9
FIGURE 9.1: Card customizations
FIGURE 9.2: ListView linear layout using the ListTile
FIGURE 9.3: GridView layout
FIGURE 9.4: GridView count with three tiles in portrait and landscape mode
FIGURE 9.5: GridView extent showing the maximum number of tiles that can fit a...
FIGURE 9.6: Stack layout showing Image and Text widgets stacked over the backg...
FIGURE 9.7: FractionalTranslation class showing favorite icon moved to the upp...
FIGURE 9.8: SliverAppBar scrolling parallax effect
Chapter 10
FIGURE 10.1: Journal detail page layout
FIGURE 10.2: High‐level view
FIGURE 10.3: Weather section
FIGURE 10.4: Tags section
FIGURE 10.5: Footer section
FIGURE 10.6: Final layout
Chapter 11
FIGURE 11.1: Vertical, horizontal, and pan gestures error
FIGURE 11.2: Moving and scaling an image
FIGURE 11.3: InkWell and InkResponse splash
FIGURE 11.4: InkWell gradual splash inside rectangular area
FIGURE 11.5: InkResponse gradual splash outside rectangular area
FIGURE 11.6: Dismissible widget showing the swiped row dismissed animation to ...
Chapter 12
FIGURE 12.1: Platform channel messages
FIGURE 12.2: iOS and Android device information
Chapter 13
FIGURE 13.1: Journal app
FIGURE 13.2: Journal app database classes' relationship to the Home and Edit p...
FIGURE 13.3: Date picker calendar
FIGURE 13.4: Keyboard action button for iOS and Android
FIGURE 13.5: Journal entry list
Chapter 14
FIGURE 14.1: SQL Server Database Data Model
FIGURE 14.2: Cloud Firestore Data Model
FIGURE 14.3: Collection and Document
FIGURE 14.4: Firebase Authentication's Sign‐In Providers
FIGURE 14.5: Cloud Firestore Rules
Chapter 15
FIGURE 15.1: App‐wide state management
FIGURE 15.2: Local‐state management
FIGURE 15.3: The final mood journal app
Chapter 16
FIGURE 16.1: Final Login page
FIGURE 16.2: Main page BLoC flow
FIGURE 16.3: Final home page
FIGURE 16.4: Final edit journal page
Guide
Cover
Table of Contents
Begin Reading
Pages
v
xxi
xxii
xxiii
xxiv
xxv
xxvi
xxvii
xxviii
1
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
325
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
489
490
491
492
493
494
495
496
497
498
499
500
vi
vii
ix
xi
xiii
501
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset