Line-of-Business Mobile Apps with Flutter and Dart (Isaac Lyman) (z-library.sk, 1lib.sk, z-lib.sk)

📄 File Format: PDF

💾 File Size: 14.3 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

Line of Business Mobile Apps with Flutter and Dart Distribute and Deploy to iOS and Android from a Single Codebase Written by Isaac Lyman Edited by Zao Yang © 2025 Fullstack.io All rights reserved. No portion of the book manuscript may be reproduced, stored in a retrieval system, or transmitted in any form or by any means beyond the number of purchased copies, except for a single backup or archival copy. The code may be used freely in your projects, commercial or otherwise. The authors and publisher have taken care in preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damagers in connection with or arising out of the use of the information or programs container herein. Published by \newline

📄 Page 3

Contents Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 About this course . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Getting the most out of this course . . . . . . . . . . . . . . . . . . . . . . . . 5 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Module 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 What is Flutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 What is Dart? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Hardware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Verifying your setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 flutter create . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Flutter project structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 main.dart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Development target setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Seeing available targets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Running in debug mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Running in release mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Running in profile mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 What is pub.dev? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Evaluating Pub packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Installing a package . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Using a package . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Android configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

📄 Page 4

CONTENTS iOS configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Build commands . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Distributing your app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Creating A Seed App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Module 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Dart overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Cheat sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 The Widget Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 What is a Widget? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Types of Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Creating Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Why manage state? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Why set up a theme? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 theme_provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Download updated files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Why use a navigation library? . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 go_router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Download updated files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 What is the Scaffold? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Setting it up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 The Profile Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Module 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

📄 Page 5

CONTENTS Profile widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Widget keys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Profile GoRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 AppBar and Scaffold refactoring . . . . . . . . . . . . . . . . . . . . . . . . . . 63 AppBar actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 The User object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Futures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 The Client object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 FutureBuilder and StatefulWidget . . . . . . . . . . . . . . . . . . . . . . . . 73 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Column . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Expanded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Logical pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Widget inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Center . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Table column widths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 ExpansionPanelList and ExpansionPanel . . . . . . . . . . . . . . . . . . . . 99 Number formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Text.rich . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Choosing a scrolling widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 ListView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 SingleChildScrollView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Scrollbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 How to think about layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 RenderConstrainedBox object was given an infinite size during layout . . 113

📄 Page 6

CONTENTS RenderFlex children have non-zero flex but incoming height constraints are unbounded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Vertical viewport was given unbounded height . . . . . . . . . . . . . . . . 116 BoxConstraints forces an infinite height . . . . . . . . . . . . . . . . . . . . . 117 Flutter is not the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 A final piece of advice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 TextButton, OutlinedButton, and ElevatedButton . . . . . . . . . . . . . . . 119 Styling buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 MaterialStateProperty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Drop shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Download profile.page.dart . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Module 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Testing on iOS Simulator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Checking accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Installing TalkBack on the emulator . . . . . . . . . . . . . . . . . . . . . . . 127 Checking accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Tooltip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Semantic and label . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 ExcludeSemantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 MergeSemantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Storage and HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Module 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Local data storage solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Using shared_preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 HTTP setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

📄 Page 7

CONTENTS Sending an HTTP request . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Securing the server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Login HTTP methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 The login overlay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 TextField and TextEditingController . . . . . . . . . . . . . . . . . . . . . . . 142 Handling authorization failures . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Managing cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Logging out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Creating a state object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Adding a provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Consuming state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Error: setState() or markNeedsBuild() called during build . . . . . . . . . . 157 Unloading state on logout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Tables and Charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Module 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Overview page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Fetching data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 DataTable and PaginatedDataTable . . . . . . . . . . . . . . . . . . . . . . . . 164 Sorting DataTables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 The page and route . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Lifting transactions into state . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Filtering transactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 fl_chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Line chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Pie chart (purchasers) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Pie chart (products) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Showing the right charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

📄 Page 8

CONTENTS Module 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 AnimatedSwitcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 AnimatedDefaultTextStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Other animations and transitions . . . . . . . . . . . . . . . . . . . . . . . . . 200 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Preparing for a new sort icon . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 CustomPaint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 TweenAnimationBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 AnimationController, SingleTickerProviderStateMixin, and Tween . . . . . 210 TweenSequence and Interval . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Module 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 flutter_test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Unit tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 testWidgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Rendering more frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Assertions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 integration_test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Don’t forget the server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Testing login and profile page . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

📄 Page 9

Introduction About this course Hello and welcome to Line-of-Business Apps with Flutter 3. I’m Isaac Lyman. Why Flutter? Here’s my elevator pitch for Flutter: you can publish an app for iPhone, Android, Windows, MacOS, and Linux from a single codebase, but unlike other cross- platform frameworks, Flutter actually delivers on the promise of near-native performance without having to write any native code. It’s also a really simple framework and includes almost everything you need off the shelf, so you spend less time struggling with third-party packages and gluing APIs together. Flutter Native app React Native Progressive Web App Speed ￿ Compiled code ￿ Compiled, native code ￿ Interpreted JavaScript with a bridge ￿ Interpreted JavaScript in a mobile browser Native UX Widgets are based on Google/Ap- ple design languages, but don’t render native com- ponents ￿ Native UX if using standard views and compo- nents Renders native com- ponents but perfor- mance and responsive- ness are often noticeably worse ￿ Renders web elements with web perfor- mance Type safety ￿ Runtime type safety ￿ Objective- C, Swift, Java, and Kotlin are type-safe Compile- time types with TypeScript Compile- time types with TypeScript

📄 Page 10

Introduction 2 Flutter Native app React Native Progressive Web App Null safety ￿ Dart 3 is null safe Null safety varies by language ￿ JavaScript is not null safe ￿ JavaScript is not null safe Consistency ￿ Renders identically across mobile and desktop platforms ￿ Different compo- nents and behaviors for each platform ￿ Renders different compo- nents depending on platform ￿ Usually renders the same across standards- compliant browsers Off-the- shelf usability ￿ Hundreds of built-in widgets Platform- dependent ￿ Heavy de- pendence on 3rd-party packages HTML5 has many built-in compo- nents Convenience ￿ Requires building from scratch with a niche pro- gramming language and framework ￿ Separate view languages, program- ming languages, and codebases per platform Uses JavaScript; compo- nents are similar to React for web ￿ Any website can become a PWA without much de- velopment effort Popularity Slightly less popular than React Native; much less popular than web apps ￿ Native app devel- opment is well- established and popular Popular, but not as popular as web apps ￿ Extremely popular and well- known

📄 Page 11

Introduction 3 Flutter Native app React Native Progressive Web App App store ￿ Compiles to standard packages for every mo- bile/desk- top app store ￿ The default way to publish to mo- bile/desk- top app stores ￿ Compiles to standard packages for mobile app stores; desktop via 3rd party ￿ Not well supported in app stores Development speed ￿ Minimal configura- tion; powerful IDE inte- grations; stream- lined CLI tools Good tooling and IDE support, but separate for each platform ￿ First-party tools are very minimal; community has to fill in the gaps The web is a more powerful platform than ever, but has a lot of room to improve Visual appeal ￿ Custom- drawn widget- s/anima- tions are powerful and easy to build; several animations are built in ￿ Native apps have good support for custom compo- nents and animations ￿ Doing anything custom is difficult and may require native code Web elements are extremely customiz- able and styleable, but very little is built in If Flutter sounds like the right choice for you, great! You’ll be building an complete Flutter app from scratch. It’s called Revenue Explorer, and it’s the sort of thing you might build if you were working on an internal tools team for a small or mid-sized corporation. Prerequisites For this course, I’m assuming: • You’ve used a statically typed, object-oriented programming language before (like TypeScript, C#, Kotlin, or Java). • You’re familiar with asynchronous code (async/await).

📄 Page 12

Introduction 4 • You know how to find and use the terminal (command line) on your operating system. I won’t be covering programming fundamentals, the difference between int and char, or what an IDE is. You’re still welcome to follow along if those things are new to you, but you might need to take some detours to other courses or reach out for help. You do not need any prior experience with Dart or Flutter. This course will cover those from the ground up. Why this course? Flutter is an extremely popular framework right now, neck and neck with React Native in the latest Stack Overflow Developer Survey. Out of all the Flutter courses you could take, here’s what makes this one unique: • It’s fast and compact. It doesn’t waste any time rehashing what you already know from other programming languages. • It doesn’t use Firebase. Nearly all Flutter tutorials use Firebase, but most corporate Flutter apps don’t. This course comes with an HTTP server you can connect to, log in with, and retrieve data from. If you wanted to, you could write a web app that uses the same server; it’s just a web API. • It goes in depth about the most confusing parts of Flutter development, like infinite constraint errors and custom-drawn widgets. By the end, you’ll have the skills to build API-backed pages, forms, and data visualizations in Flutter. There won’t be anything standing between you and the Android and iOS app stores; you’ll be able to build and publish any app ideas you may have. (And if you want to build desktop apps, you’ll be 99% of the way there, too.) Module overview • Module 1: What you’re reading right now. • Module 2: You’ll set up your development environment and the Flutter tem- plate app. By the end, you’ll have iOS and Android app packages that you can deploy to either app store at any time. • Module 3: You’ll get a brief overview of Dart, the programming language used in Flutter apps. You’ll also add some basic packages to your template app for theming, state management, routing, and deep linking.

📄 Page 13

Introduction 5 • Module 4: You’ll create a widget, retrieve data asynchronously to populate it, and learn about layouts. • Module 5: You’ll make your app accessible to people who use a screen reader. • Module 6: You’ll store app configuration settings on-device and communicate with a web API over HTTP. • Module 7: You’ll build tables and charts to represent data. • Module 8: You’ll create custom widgets and animations. • Module 9: You’ll write unit, integration, and end-to-end tests for your app. Getting the most out of this course Some people like to read a course from beginning to end like a book. I sure don’t. Feel free to skip around, jump into the parts that seem most interesting, and hack on the example app until it’s all screwed up. Don’t let me hold you back. I’ll try to keep each lesson small and focused so it’s easy to find what you need when you need it. You’ll learn better if you’re building and experimenting along the way, so even if you do follow each lesson in order, I encourage you to build the app as you go along instead of just downloading the code samples. Further reading Flutter vs. React Native: Which is the right cross-platform framework for you? (Isaac Lyman, Stack Overflow Blog) Flutter is better than React Native…in all the ways that don’t matter. (Jamon Holmgren, Red Shift on Medium.com) React Native vs Flutter - I built the same chat app with both (Fireship on YouTube)

📄 Page 14

Getting Started Module 2 In this module, you’ll do three things: • Set up your development environment and the Flutter starter project. • Learn how to run your project on any device. • Configure your app and package it for release. This will get you into the groove of a Flutter development cycle. You’ll be able to see your app in action as you make changes, and it will be ready to publish and distribute at any time. If you just want to skip the setup and sink your teeth into some code, Module 1 will teach you Dart, and Module 2 will get you into the basics of Flutter. Good luck! Let’s start with a quick introduction to the Flutter framework and Dart, the programming language it uses. What is Flutter? Flutter is an open-source project maintained by Google. Version 1.0 was released in 2018. Google uses Flutter for several of its own apps, such as Google Pay and AdSense. Flutter runs the user interface on their Nest thermostat as well. One thing that makes Flutter unique is it ships with its own rendering engine and doesn’t output native components, which means visual consistency across platforms is almost never a problem. The downside, of course, is that your app won’t look and feel exactly like a native app unless you put in the extra work to customize it to each platform. A lot of the time, you may not care. I certainly don’t. What is Dart? Dart is a high-level programming language also developed by Google. What’s useful about Dart is it can compile on the fly while you’re developing or ahead of time when you’re ready to publish. It also transpiles to JavaScript for deployment to the

📄 Page 15

Getting Started 7 web. The main thing you’ll notice about it is it’s very ergonomic: most of the things you’ll want to do are built in and pretty concise. If you already know C#, Kotlin, or TypeScript, you’ll be able to read most Dart code without even taking a tutorial. Flutter apps are written entirely in Dart. The structure, user interface, styles, and logic are all 100% Dart. So unlike native web apps, where you have to learn some form of HTML, CSS, JavaScript, and usually a framework, here you only have to learn Dart and Flutter. You’ll be surprised how simple it is. Dart has a robust open-source package ecosystem called Pub. You can find it at pub.dev. We’ll discuss it in depth in a later lesson. Further reading Showcase: Flutter apps in production (flutter.dev) Why did Flutter choose to use Dart? (docs.flutter.dev) Flutter’s rendering model (docs.flutter.dev) Impeller rendering engine (docs.flutter.dev) Hardware Let’s go over the hardware you’ll need to build a Flutter app. This course is focused on smartphone apps. You can test and package Android apps from any desktop OS, but to package iPhone apps, you’ll need Xcode, which only runs on MacOS. So, if you’re developing mobile apps, my top recommendation is a Mac. It can do it all. The base model M1 Macbook Air is a rock-solid development machine, though if you can afford some extra RAM, you’ll be glad to have it. If you don’t have a Mac, that’s okay; you can still publish for Android using Windows or Linux. And even though you won’t be able to test in an iPhone simulator, there are online services like CodeMagic that can help you package your app for iOS. I want to stress that this will be a massive headache when you’re trying to fix a bug that only happens on iPhones. But it’s not impossible. It’s also important to test on a physical device, so make sure you have a cord to connect your smartphone or tablet to your computer. Software :::tip Keep track of the install location for everything you’re about to install.

📄 Page 16

Getting Started 8 ::: IDE You can develop Flutter apps with any text editor or IDE, but for the best tooling and support, you’ll want to use either Android Studio or VS Code. I prefer VS Code since that’s what I use most of the time anyway. If you don’t already have one of these installed, no sweat; you’ll be downloading Android Studio here in a moment. Whatever IDE you use, make sure to get the Flutter and Dart plugins. They’ll help you check syntax, refactor code, and run your app. If you look up “Flutter” and “Dart” in your extension browser, they’ll be the first ones that come up. Screenshot of the Dart and Flutter extensions in VS Code’s extension browser Xcode If you’re on a Mac, start by installing Xcode. It’s a big app, so it might take a while; go ahead and take a break while the installer is running. When it’s done, start up Xcode to make sure it is installed correctly. Android Studio and CLI tools Next (or first, if you’re not on Mac), download and install Android Studio. This will install the Android SDK, which you need to package Android apps. You should also install the Android command-line tools. When you’re done, make sure Android Studio starts up without any issues. Google Chrome If you want to deploy your app to the web, you’ll need Google Chrome. It’s the only browser supported by the Flutter debugger.

📄 Page 17

Getting Started 9 Note that the Flutter experience on the web isn’t quite as fast or smooth as on mobile and desktop, and since Flutter apps aren’t statically generated, they’re hard for search engines to crawl. If you just want to build a website, Flutter may not be the best choice. Flutter SDK You’ll need the Flutter SDK, of course. Head over to the install page at the Flutter docs and run the install package. Additional tools If you use your computer for development already, there’s a good chance you already have all the additional tools you need. But if you want to debug on your desktop, here’s a quick checklist to run through (see the docs for details): • Windows: Visual Studio 2022 or Visual Studio Build Tools 2022 (Desktop development with C++ workload) • MacOS: CocoaPods • Linux: Clang, CMake, GTK development headers, Ninja build, pkg-config, liblzma-dev (if you installed Flutter using snapd, you should already have all of these) Environment variables You’ll want to add some folders to your PATH environment variable. The Flutter install page includes instructions for the flutter binary. You should also add the pub binary and Android CLI tools. My preferred terminal for Mac is Oh My Zsh, so these are the magic lines I use in my .zshrc file: 1 export PATH="$PATH":"$HOME/code/flutter/bin" 2 export PATH="$PATH":"$HOME/code/flutter/.pub-cache/bin" 3 export PATH="$PATH":"$HOME/Library/Android/sdk/cmdline-tools/latest/bin" 4 export PATH="$PATH":"$HOME/Library/Android/sdk/emulator" 5 export PATH="$PATH":"$HOME/Library/Android/sdk/platform-tools" 6 export PUB_CACHE=$HOME/code/flutter/.pub-cache :::tip On Windows, the Android SDK is installed by default toC:\Users\yourUserName\AppData\Local\Android\sdk\. :::

📄 Page 18

Getting Started 10 These same lines should also work in a .bashrc file if you use vanilla bash. Whatever your preferred folder structure is, just make sure these point to the install locations for Flutter and the Android SDK. The last one (PUB_CACHE) is optional; it tells Dart where to cache Pub packages. Verifying your setup To make sure everything’s in place, start up a terminal and run the flutter doctor command. It will check that it’s got access to what it needs and let you know if anything is missing. You should see a line of green checkmarks if everything’s in order. Screenshot of a terminal with the output from ‘flutter doctor‘, showing that all the above software tools have been installed correctly. :::note It’s okay if your terminal output doesn’t look exactly like mine. Why do I have two versions of VS Code installed? Who even knows? The checkmarks are what matters. ::: Let’s create a Flutter app.

📄 Page 19

Getting Started 11 flutter create Find the folder where you keep your code projects and start up a terminal. Then type: 1 flutter create revenue_explorer :::tip The preferred file and folder naming convention in Dart is snake_case. ::: The Flutter CLI will create the revenue_explorer folder, which you can open in your IDE. Flutter project structure Your Flutter project may look a little overwhelming at first.

📄 Page 20

Getting Started 12 A screenshot of VS Code, listing all the files and folders described below, with lib/main.dart displayed in the editor window Let’s review what each folder is for. :::warning You can ignore many of the files and folders below, but that doesn’t mean you should add them to .gitignore. They’re important files to keep in your repository. When the Flutter CLI changes them, you should commit those changes. ::: lib/ The lib/ folder is where your Flutter and Dart code live. You’ll be doing almost all your work here. This is the first place you should go when you open the project.