Beginning Flutter 3.0 with Dart A Beginner to Pro. Learn how to build Advanced Flutter 3.0 Apps Sanjib Sinha Thisbookisforsaleathttp://leanpub.com/beginningflutterwithdart Thisversionwaspublishedon2022-05-29 ThisisaLeanpubbook.LeanpubempowersauthorsandpublisherswiththeLeanPublishing process.LeanPublishingistheactofpublishinganin-progressebookusinglightweighttoolsand manyiterationstogetreaderfeedback,pivotuntilyouhavetherightbookandbuildtractiononce youdo. ©2020-2022SanjibSinha Contents 1.GettingStarted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 DownloadlatestFlutter3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 WhatisnewinFlutter3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Whoshouldreadthisbook? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 FlutterforWindows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 FlutterformacOSandLinux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 WhatareimportantconceptsinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 AFewWordsAboutDARTIDE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 WhyDartLanguage? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 VariableinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 WhatisnullsafetyinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 WhatisNullSafetyinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Whatis“type”inDartandFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 HowtoimplementtypesinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Differencebetweenfinalandconstant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 IntroductiontocorelibrariesinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 WhatisaBooleaninDartandFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 WhatareStringvaluesinDartandFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 ListsinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 WhyMapisimportantinDart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 ArithmeticOperatorsinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Equalityandrelationaloperators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 WhatareLogicalOperators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 LogicalOperatorsinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 AssignmentOperators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 WhatisConditionalExpressionsinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 RelationbetweenFlutterandDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 FunctionsandObjects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Buildingthemobileapplicationfromscratch . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 2.FlutterandDartArchitecture:UnderstandingClassandObject . . . . . . . . . . . . . . . 83 DoesFlutterrequireDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 WhatisDartandFlutterfunction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 CONTENTS WhatareparametersinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 WhataretoplevelfunctionsinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 WhatisClassinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 HowtouseDartandFlutterClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 FlutterStructureforBeginner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 MoreIn-DepthIntroductiontoClassandObjects . . . . . . . . . . . . . . . . . . . . . . . . . 115 Howtwoobjectsinteract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Moreaboutclassesandobjects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 HowFlutterandDartworktogether . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 PositionalandNamedargument . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 3.DartLanguageBasicanditsimplementationinFlutter . . . . . . . . . . . . . . . . . . . . . 133 VariablesStoreReferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Built-inTypesinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Suppose,youdon’tlikeVariables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Moreaboutbuilt-intypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 UnderstandingStrings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 TobeTrueortobeFalse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 IntroductiontoCollections:ArraysareListsinDart . . . . . . . . . . . . . . . . . . . . . . . 142 Get,SetandGo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 OperatorsareUseful . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Equalityandrelationaloperators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Typetestoperators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Assignmentoperators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 SummaryofthisPart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 ImplementingDartconceptstoFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 4.DiggingDeepintoDarttolearnFlutterLogic . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Controltheflowofyourcode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 IfandElse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 ConditionalExpression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 LookingatLooping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 WhileandDo-While . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 UnderstandingtheLoopingPatterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 ForLoopLabels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 ContinuewithForLoop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 DecisionmakingwithSwitchandcase. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 DiggingDeepintoObject-OrientedProgramming . . . . . . . . . . . . . . . . . . . . . . . . . 179 MoreaboutConstructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 HowtoimplementClasses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 MoreonFunctionsorMethods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 LexicalScopeinFunction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 AfewwordsaboutGetterandSetter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 CONTENTS MorethanoneConstructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 ChangingtheUIoftheFlutterprojects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Whatareconstraintsinflutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 WhatareBoxConstraintsinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 WhatiswidgetinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 WhatiselementinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 5.HowtobuildFlutterUIusingWidgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 CommonWidgetsinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 PowerfulBasicWidgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 AnonymousFunctions:Lambda,HigherOrderFunctions,andLexicalClosures. . . . . . . 241 ExploringHigher-OrderFunctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 InheritanceandMixinsinDart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Mixins:AddingmoreFeaturestoaClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 6.LayoutsinFlutter,Tips andTricks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 CustomizechildWidgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 LayoutmechanismofFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Libraryoflayoutwidgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 AbstractClassandMethods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 AdvantageofInterfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 StaticVariablesandMethods. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 The‘Closure’isaSpecialFunction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 DataStructuresandCollections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Lists:FixedLengthandGrowable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 Set:AnUnorderedCollectionsofUniqueItems . . . . . . . . . . . . . . . . . . . . . . . . . . 292 Maps:theKey,ValuePair . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 QueueisOpen-Ended . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 CallableClasses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 ExceptionHandling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 DartPackagesandLibraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 7.IntroductiontoStateManagementandFormValidationinFlutterandDart . . . . . . . 306 Stateismutable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 LifecycleofState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 RoleofControllerinTextFieldWidget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 HowListandMapusedinStateFulDropdownButtonWidget . . . . . . . . . . . . . . . . . 326 HowtoValiadateaFormusingStateManagement . . . . . . . . . . . . . . . . . . . . . . . . 328 8. Provider: A recommended approach to manage State and Model-View-Controller Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Differentapproachestostatemanagement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 AStepbyStepguidetouseProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 CONTENTS Riverpod, another state management package, Riverpod migration, WidgetRef ref, and WhatisnewinRiverpod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 WhyweneedthelatestFlutterandDartSDK? . . . . . . . . . . . . . . . . . . . . . . . . . . . 363 IsRiverpodbetterthanProvider? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364 WhatisaWidgetRef? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365 ModelclasswithStateNotifierProviderinnewRiverpod . . . . . . . . . . . . . . . . . . . . . 368 Model-View-ControllerPatterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371 9.EverythingaboutFlutterNavigationandRoute . . . . . . . . . . . . . . . . . . . . . . . . . . 390 WhydoyouuseonGenerateRouteinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 HowdoyouuseonGenerateRouteinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . 391 Howtouseadynamicinitialroute? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391 WhatisFlutterNavigationandhowdoesFlutterNavigatorwork?. . . . . . . . . . . . . . . 392 Howdoyoupassdatafromoneclasstoanotherinflutter? . . . . . . . . . . . . . . . . . . . 396 WhatisenuminDartflutter?HowtouseenuminFlutter? . . . . . . . . . . . . . . . . . . . 400 HowdoyouchangethethemeonFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 HowdoyounamearouteinFlutter?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404 Howdoyoupassdatafromonescreentoanotherinflutter? . . . . . . . . . . . . . . . . . . 408 HowdoyoumakeaFlutterappfromscratch? . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 10.MoreonFlutterUI,List,Map,andProviderBestPractices . . . . . . . . . . . . . . . . . . 418 HowdoyouusedecorationinacontainerinFlutter? . . . . . . . . . . . . . . . . . . . . . . . 418 WhatisaRichTextinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 StatefulvsStatelessFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 WhatisGridTileFlutter?HowdoyouusegridtilesinFlutter? . . . . . . . . . . . . . . . . . 431 WhatischangenotifierproviderinFlutter?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 Howdoyouchangethefontonflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439 HowdoIstorepersistentdatainFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 WhatisdatamodelinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 Howdoyoupassdatabetweenscreensinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . 454 HowdoyoupassdatawithproviderinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . 460 WhatisproviderpatternFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 HowdoyouuseChangeNotifierProviderinFlutter? . . . . . . . . . . . . . . . . . . . . . . . 473 WhatisChangeNotifierProvidervalue? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480 WhatisnavigatorandrouteinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485 HowdoyoupassargumentsinNavigatorpushNamed? . . . . . . . . . . . . . . . . . . . . . 488 11.Google’sFlutter2.5andDart2.14,What’sNew . . . . . . . . . . . . . . . . . . . . . . . . . 493 WhatisMaterialBanner? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493 HowdoyouMapadartlistinFlutter2.5?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496 HowtostartwithanapptemplateinFlutter2.5 . . . . . . . . . . . . . . . . . . . . . . . . . . 504 ThelatestversionofFluttercomeswithmanynewfeatures. . . . . . . . . . . . . . . . . . . 507 Howdoyoudolocalizationinflutter2.5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512 Howdoyoupassdatatoawidgetinflutter2.5? . . . . . . . . . . . . . . . . . . . . . . . . . . 514 CONTENTS HowtoPassandReceivedatainFlutter2.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518 12.UnderstandingMaterialDesigninFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 WhatisMaterialDesigninflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 AppBarFlutter:HowDoIuseAppBar? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 HowdoIuseBottomNavigationBarinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . 536 Whatisadrawerinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542 WhatisMaterialAppinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 WhatisathemeinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554 WhatisscaffoldinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563 HowdoyoumakeaTabBarinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572 HowdoIcreateaDropdownButtoninflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 WhatisMaterialStateinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582 HowdoIaddacheckboxinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584 HowdoIuseacheckboxwidgetinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588 WhatiselevatedButtoninflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591 WhatistextbuttoninFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595 Whatisoutlinedbuttoninflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 598 Howdoyouusetheiconbuttonflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 601 HowdoyouuseaTextFieldinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605 Howdoyoumakeafluttercard? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610 WhatisthegridviewinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613 WhatisGridViewcountinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615 WhatisGridView.extentinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620 Howdoyouusechipinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624 13.SliversandScrollingWidgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630 WhatisSliverAppBarinflutter?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630 HowdoImakemycollapsingtoolbarflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . 633 WhatisSliverGridinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636 SliverPersistentHeaderFlutter,asliverwhosesizevaries . . . . . . . . . . . . . . . . . . . . . 641 Howdoyouusesliversflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645 HowtouseCustomScrollViewinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648 HowtouseNestedScrollViewinflutter?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 652 HowtousePageViewinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656 WhatisPageViewbuilderinflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659 WhatisPageViewcustominflutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663 HowtouseDraggableScrollableSheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666 FlutterScrollbarInteractive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674 HowtouseScrollbarinflutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681 HowtouseReorderableListView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686 Howtorearrangelistinflutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691 WhatisScrollableinflutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695 CONTENTS WhatisListViewinflutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 697 WhatisListViewbuilderinflutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701 WhatisListViewseparated . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705 WhatisListViewcustom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709 WhatissinglechildScrollViewinflutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714 14.ACloseEncounterwithProviderpackageandStateManagement . . . . . . . . . . . . . 720 WhatisproviderinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 720 WhatisConsumerFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 729 WhatisFlutterSelector? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 737 HowtouseSelectorFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 742 WhatisFlutterSelectorchild . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 748 15.UserInterface,Style,ThemeandAppDesign. . . . . . . . . . . . . . . . . . . . . . . . . . . 757 Whatareconstraintsinflutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757 WhatareBoxConstraintsinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 761 WhatiswidgetinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 767 WhatiselementinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769 WhatisAligninFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 771 Howtouseaspectratiowidget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775 WhatisBaselineinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 777 HowtousethemeinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 782 HowtousethemewithProvideronflutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 786 16.Flutter2.8,Future,await,asyncandDatabase . . . . . . . . . . . . . . . . . . . . . . . . . . 793 WhatisnewinFlutter2.8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 793 Future,awaitandasync . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 796 WhichdatabaseweuseinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 799 SQLiteDatabaseandFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 807 17. Create, Retrieve, Update and Delete with SQLite Database: Build A Blog and My DiaryApplicationinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 820 SQLiteBloginFlutter:FirstPart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 820 SQLiteBlog,Flutter:SecondPart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 829 SQLiteBlog,Flutter:FinalPart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 840 18.ScopedModel,Provider,SQLiteDatabaseandFutureBuilder . . . . . . . . . . . . . . . . 862 SQLitewithProviderinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 862 WhatisScopedModelinflutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 874 ScopedModelandSQLiteinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 888 WhatisfuturebuilderinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 898 19.Futurethen,aync,await,API,JSON:Let’sbuildaCurrentWeatherTrackerApp . . . 911 FutureFlutter:WithHerApp–Step1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 911 CONTENTS Geolocatorpluginmakesourlifeeasier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 912 Whatisasynchronousprogramming? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 915 WhatisFutureinFlutter?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 916 Whatareasyncandawait? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 917 FlutterState:WithHerApp–Step2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 919 APIFlutter:WithHerApp–Step3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 923 WhatisanAPI? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 923 HowcanweuseAPIinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 924 JSONFlutter:WithHerApp–Step4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 928 WhatisJSONinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 928 FutureThen:WithHerApp–Step5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 935 WhatisFuture.then()method?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 936 ThedifferencebetweenFuturethenandasync,await. . . . . . . . . . . . . . . . . . . . . . . 939 FutureinFlutter:WithHerApp–Step6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 941 WhatisFutureinFlutter?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 941 DisplaydatawithFutureinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 945 PassdatatoStateFlutter:FinalWeatherApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . 948 PassingdatafromaStatefulWidget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 950 PassdatatoaStateobjectinFlutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 952 20.BuildingTwoFlutterChatAppswithFirebase,andFirestore-FirstappwithStateful Widget,SecondAppwithProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 957 ChatAppwithStatefulwidget–StepOne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 957 IsFlutterandFirebasefullstack? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 963 IsFirebaseeasytolearn? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 963 HowtoInitialiseChatAppandAvoidErrors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 965 WhatisFirebaseinFlutter?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 965 InitialiseAppandavoiderrors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 966 FirebaseChatAppauthentication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 967 HowFirebaseauthenticationworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 969 StatefulChatAppFinalStep . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 982 HowdoesFirestoreworkinFlutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 982 HowdoyoufetchdatafromFirestoredatabaseinFlutter?. . . . . . . . . . . . . . . . . . . . 985 FlutterChatappwithProvider,FirebaseandFirestore . . . . . . . . . . . . . . . . . . . . . . 991 Firebase,FirestorerulesforFlutterChatApp . . . . . . . . . . . . . . . . . . . . . . . . . . . .1006 Firestorecollectionrulesplayground . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1006 HowtodealwiththeBusinesslogic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1008 TheBusinessLogicandProvider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1008 TheAuthenticationflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1013 FlutterChatappUI:designingthepages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1017 HowFlutterChatappUIworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1021 ChatAppsforAndroidwithFlutterandFirebase . . . . . . . . . . . . . . . . . . . . . . . . .1022 CONTENTS 21.WhatNext? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1028