Beginning Flutter

About the author Marco L. Napoli is the CEO of Pixolini Inc. and an experienced mobile, web and desktop app developer. He has a strong proven record in developing visually elegant and simple to use systems. His work and published apps can be seen at pixolini.com.

Introduction xxi

Part I: The Foundations of Flutter Programming

Chapter 1: Introducing Flutter and Getting Started 3

Introducing Flutter 4

Defining Widgets and Elements 5

Understanding Widget Lifecycle Events 5

The StatelessWidget Lifecycle 6

The StatefulWidget Lifecycle 6

Understanding the Widget Tree and the Element Tree 8

Stateless Widget and Element Trees 9

Stateful Widget and Element Trees 10

Installing the Flutter SDK 13

Installing on macOS 13

System Requirements 13

Get the Flutter SDK 13

Check for Dependencies 14

iOS Setup: Install Xcode 14

Android Setup: Install Android Studio 14

Set Up the Android Emulator 15

Installing on Windows 15

System Requirements 15

Get the Flutter SDK 16

Check for Dependencies 16

Install Android Studio 16

Set Up the Android Emulator 17

Installing on Linux 17

System Requirements 17

Get the Flutter SDK 18

Check for Dependencies 19

Install Android Studio 19

Set Up the Android Emulator 19

Configuring the Android Studio Editor 20

Summary 20

Chapter 2: Creating a Hello World App 25

Setting Up the Project 25

Using Hot Reload 30

Using Themes to Style Your App 33

Using a Global App Theme 33

Using a Theme for Part of an App 35

Understanding Stateless and Stateful Widgets 37

Using External Packages 38

Searching for Packages 39

Using Packages 40

Summary 41

Chapter 3: Learning Dart Basics 43

Why Use Dart? 43

Commenting Code 44

Running the main() Entry Point 45

Referencing Variables 45

Declaring Variables 46

Numbers 47

Strings 47

Booleans 47

Lists 47

Maps 48

Runes 48

Using Operators 49

Using Flow Statements 51

if and else 51

ternary operator 52

for Loops 52

while and do-while 53

while and break 54

continue 54

switch and case 55

Using Functions 55

Import Packages 57

Using Classes 57

Class Inheritance 60

Class Mixins 60

Implementing Asynchronous Programming 61

Summary 62

Chapter 4: Creating a Starter Project Template 65

Creating and Organizing Folders and Files 65

Structuring Widgets 69

Summary 74

Chapter 5: Understanding the Widget Tree 77

Introduction to Widgets 77

Building the Full Widget Tree 79

Building a Shallow Widget Tree 85

Refactoring with a Constant 86

Refactoring with a Method 86

Refactoring with a Widget Class 91

Summary 99

Part II: Intermediate Flutter: Fleshing Out an App

Chapter 6: Using Common Widgets 103

Using Basic Widgets 103

SafeArea 107

Container 108

Text 112

RichText 112

Column 114

Row 115

Column and Row Nesting 115

Buttons 119

FloatingActionButton 119

FlatButton 121

RaisedButton 121

IconButton 122

PopupMenuButton 123

ButtonBar 126

Using Images and Icons 130

AssetBundle 130

Image 131

Icon 132

Using Decorators 135

Using the Form Widget to Validate Text Fields 139

Checking Orientation 143

Summary 149

Chapter 7: Adding Animation to an App 151

Using AnimatedContainer 152

Using AnimatedCrossFade 155

Using AnimatedOpacity 160

Using AnimationController 164

Using Staggered Animations 170

Summary 175

Chapter 8: Creating an App’s Navigation 177

Using the Navigator 178

Using the Named Navigator Route 188

Using Hero Animation 188

Using the BottomNavigationBar 193

Using the BottomAppBar 199

Using the TabBar and TabBarView 203

Using the Drawer and ListView 207

Summary 217

Chapter 9: Creating Scrolling Lists and Effects 221

Using the Card 222

Using the ListView and ListTile 223

Using the GridView 230

Using the GridView.count 230

Using the GridView.extent 232

Using the GridView.builder 233

Using the Stack 237

Customizing the CustomScrollView with Slivers 243

Summary 250

Chapter 10: Building Layouts 253

A High-Level View of the Layout 253

Weather Section Layout 256

Tags Layout 256

Footer Images Layout 257

Final Layout 257

Creating the Layout 257

Summary 265

Chapter 11: Applying Interactivity 267

Setting Up GestureDetector: The Basics 267

Implementing the Draggable and Dragtarget Widgets 275

Using the GestureDetector for Moving and Scaling 278

Using the InkWell and InkResponse Gestures 289

Using the Dismissible Widget 296

Summary 303

Chapter 12: Writing Platform-Native Code 307

Understanding Platform Channels 307

Implementing the Client Platform Channel App 309

Implementing the iOS Host Platform Channel 313

Implementing the Android Host Platform Channel 318

Summary 322

Part III: Creating Production-Ready Apps

Chapter 13: Saving Data with Local Persistence 327

Understanding the JSON Format 328

Using Database Classes to Write, Read, and Serialize JSON 330

Formatting Dates 331

Sorting a List of Dates 332

Retrieving Data with the FutureBuilder 333

Building the Journal App 335

Adding the Journal Database Classes 339

Adding the Journal Entry Page 344

Finishing the Journal Home Page 359

Summary 371

Chapter 14: Adding The Firebase and Firestore Backend 375

What are Firebase and Cloud Firestore? 376

Structuring and Data Modeling Cloud Firestore 377

Viewing Firebase Authentication Capabilities 380

Viewing Cloud Firestore Security Rules 381

Configuring the Firebase Project 383

Adding a Cloud Firestore Database and Implementing Security 391

Building the Client Journal App 395

Adding Authentication and Cloud Firestore Packages to the Client App 395

Adding Basic Layout to the Client App 403

Adding Classes to the Client App 406

Summary 409

Chapter 15: Adding State Management to the Firestore Client App 411

Implementing State Management 412

Implementing an Abstract Class 414

Implementing the InheritedWidget 415

Implementing the Model Class 416

Implementing the Service Class 417

Implementing the BLoC Pattern 417

Implementing StreamController, Streams, Sinks, and StreamBuilder 419

Building State Management 421

Adding the Journal Model Class 422

Adding the Service Classes 424

Adding the Validators Class 430

Adding the BLoC Pattern 432

Adding the AuthenticationBloc 432

Adding the AuthenticationBlocProvider 435

Adding the LoginBloc 436

Adding the HomeBloc 441

Adding the HomeBlocProvider 443

Adding the JournalEditBloc 444

Adding the JournalEditBlocProvider 447

Summary 449

Chapter 16: Adding Blocs to Firestore Client App Pages 453

Adding the Login Page 454

Modifying the Main Page 460

Modifying the Home Page 465

Adding the Edit Journal Page 472

Summary 484

Index 489