The Complete 2021 Flutter Development Bootcamp with Dart

The Complete 2021 Flutter Development Bootcamp with Dart
Officially created in collaboration with the Google Flutter team.
Created by	Dr. Angela Yu
Language	English

• 1. Introduction to the Course 00:02:05
• 2. Download the Course Syllabus .html

  Click on the button below to download the entire course syllabus and see all the topics that are covered in this gigantic course.

  
  

  

  
  

  P.S. Occasionally the downloads might fail because there are too many people trying to download it at the same time. Just try again later.

  
  

• 2.1 Flutter Dev Syllabus .pdf
• 3. What is Flutter 00:07:52
• 4. Why Flutter 00:12:11
• 5. The Anatomy of a Flutter App 00:05:27
• 6. How to Watch the Course in High Definition .html

  Course Resources

  Throughout the course, I'll be pointing you towards starting projects, downloadable resources and background reading. All these links are collated on one page, so you can find them easily.

  Head over to the link below and bookmark it, so whenever I mention something in the course, you'll find it in the course resources.

  Course Resources

  
  

  How to Watch the Course in HD

  All the lessons are recorded and uploaded in 1080p HD video format. If you find your videos blurry then you can change the quality by going to the gear icon at the bottom right and select the highest definition you see. Udemy's video player is coded up quite strangely, sometimes it won't show you the 1080p option because it thinks your internet is too slow. In this case be sure to click on the "Report technical issue" in the same menu and get the Udemy support team to help you.

  

  How to Download the Course for Offline Viewing

  You can download all the lessons in the course to watch offline by getting the Udemy app for iOS or Android. Here are the links:

  iOS App

  Android App

  
  

  
  

  All the best,

  Your instructor, Angela.

  
  

  
  

• 7. How to Get the Most Out of the Course 00:09:33
• 8. Join the Student Community .html

  

  Hey,

  As a part of this course you also get access to our student Discord channel, where you'll find other people working through the same course as well as Google Flutter experts who are here to help you.

  You can use this forum to ask questions, find a study buddy to work through the course together, or just hang out and meet some like-minded learners.

  To join us, first navigate to the link below then go to #select-role and pick your level and your course.

  Request Membership

  
  

  All the best,

  Your instructor, Angela

  
  

  P.S. If you've had any issues with the course in the module, you can let us know using the feedback form here.

• 8.1 Course Fixes Report an Issue .html

• 1. Prerequisites for Flutter Development 00:06:22
• 2. Overview of the Process .html

  If you have a PC

  Outcome: You will be set up to develop Flutter apps for Android.

  There are quite a few steps involved in installing Flutter, I've compiled a list of things that can go wrong and how to solve them at the following page. So before you start, first bookmark the troubleshooting page and head over if you encounter any issues:

  Check Here for Troubleshooting

  Steps:

  1. Install the Flutter SDK

  2. Install Android Studio

  3. Install the Android Emulator

  Start Here For Step-by-Step Installation Videos

  If you prefer to use a written guide, the Flutter team have created a comprehensive one here:

  https://flutter.dev/docs/get-started/install/windows

  
  

  If you have a Mac

  Outcome: You will be set up to develop Flutter apps for both iOS and Android.

  There are quite a few steps involved in installing Flutter, I've compiled a list of things that can go wrong and how to solve them at the following page. So before you start,  first bookmark the troubleshooting page and head over if you encounter any issues:

  Check here for troubleshooting

  Steps

  1. Install the Flutter SDK

  2. Install Android Studio

  3. Install the Android Emulator

  4. Install Xcode and command-line tools

  5. Test the iOS Simulator

  Start Here For Step-by-Step Installation VideosIf you prefer to use a written guide, the Flutter team have created a comprehensive one here:

  https://flutter.dev/docs/get-started/install/macos

  
  

  If you have Linux

  Linux users are usually really good with installing things, so I'll just point you to the official Flutter installation guide for Linux:

  https://flutter.dev/docs/get-started/install/linux

  
  

  NOTE: If you are based in China where the google domain is blocked, the Flutter community has set up mirrors and more information can be found here.

• 3. Windows Setup Step 1 - Install the Flutter SDK 00:07:19
• 4. Windows Setup Step 2 - Install Android Studio 00:02:39
• 5. Windows Setup Step 3 - Install the Android Emulator 00:05:44
• 6. Windows Installation Troubleshooting .html

  If you have completed all the setup without any issues then you can now get started configuring Android Studio for flutter development. Skip the next lessons on Mac installation and head straight here:

  https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14481920/

  NOTE: All the videos in this course are uploaded in 1080p full HD. If you are seeing blurry videos, please let Udemy know and their support team will be able to help you.

  However, if you have issues installing any of the components mentioned in the previous lectures or you're getting errors then continue reading:

  Problem: If you are seeing an error relating to licenses have not been accepted, e.g.

  

  Solution: First make sure that you have updated Android studio to the latest version.

  Next, you need to accept the Android studio licenses, see here: https://stackoverflow.com/questions/48604914/flutter-run-error-you-have-not-accepted-the-license-agreements

  
  

  Problem: Error after typing flutter --version and getting "not recognized as an internal or external command" e.g.

  

  Solution: First check that you've typed flutter --version with a space between flutter and --version.

  Next, Make sure you have added the path to the flutter/bin directory correctly as seen in this video lesson at the 4 minute time mark.

  Next, check the accepted answer by Brandon here: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14481772#questions/7203546

  
  

  Problem: If you are seeing an error relating to Error connecting to the service protocol. e.g.

  

  Solution: Downgrade your Android emulator to P instead of Q.

  See this link for more details: https://github.com/flutter/flutter/issues/32696

  
  

  Problem: If you are trying to create an Android emulator and get and error about "Intel HAXM" e.g.

  

  Solution: You need to enable virtualisation in your BIOS. See this: https://www.howtogeek.com/213795/how-to-enable-intel-vt-x-in-your-computers-bios-or-uefi-firmware/

  If that still doesn't work, try this: https://www.thecodecity.com/2017/01/intel-haxm-is-required-to-run-this-avd.html

  
  

  Problem: When you try to run an app and get an error about a SKIA shader compilation error. e.g.

  

  Solution: This seems to be an issue with the latest Flutter SDK rather than anything you've done. See the top answer here from Flavio to fix: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14481776#questions/8414414

  Also see the discussion on the Flutter GitHub: https://github.com/flutter/flutter/issues/33018

  
  

  Problem: Getting an error from gradle when you try to run your app about Java heap space. e.g.

  

  Solution: Check out this StackOverflow answer on this exact topic: https://stackoverflow.com/questions/41645747/android-studio-gradle-build-failing-java-heap-space

  Other Problems: Programming and development always involve lots of problems and solving problems is the main skill. If you get a different problem, be sure to check out all of these places where other flutter developers can help you:

  Flutter GitHub Repository

  Flutter Google Community

  StackOverflow Flutter Related Issues

  Flutter Slack Chat

  And remember always show add a screenshot of your error, otherwise it will be really hard to help.

• 7. A Quick Note About macOS Catalina .html

  If you are using a Mac computer with the macOS Catalina operating system, your installation requires a few extra steps.

  1. Check your macOS version:

  Go to the Apple icon at the top left, then select About This Mac.

  

  If the version is macOS Catalina then you should continue to the steps below. If it's lower than 10.15 e.g. 10.14 (Mojave) or 10.13 (High Sierra) then you can skip this lesson and continue to the next.

  

  2. Open up Terminal

  Click on Spotlight at the top right and search for the Terminal application. Double click on it to open. (Terminal is installed by default in macOS.

  

  

  3. Change your Terminal shell

  If you see a message in Terminal that looks like this:

  

  Then you can remove the message by going to Terminal --> Preferences

  

  and changing the "Shells open with" to the "Command" radio button and change the text to

  /bin/zsh

  and hit enter.

  

  4. Confirm you are using zsh

  Close down Terminal and re-open it using Spotlight (see Step 2). Check the shell that is used in this new window by typing the following command into the Terminal and hit enter.

  echo $SHELL

  e.g.

  

  If you see /bin/zsh like in the screenshot above then congratulations, you can continue to the next lesson.

  If you see /bin/bash then go through Step 3 until it reads /bin/zsh.

  
  

  The reason why we have to do this is because of licensing changes. You can read more about it here:

  Why does macOS Catalina use Zsh instead of Bash? Licensing

• 8. Mac Setup Step 1 - Install the Flutter SDK 00:13:46
• 9. Mac Setup Step 2 - Install Android Studio 00:04:10
• 10. Mac Setup Step 3 - Install the Android Emulator 00:03:54
• 11. Mac Setup Step 4 - Install Xcode and Command Line Tools 00:02:25
• 12. Mac Setup Step 5 - Test the iOS Simulator 00:03:16
• 13. Mac Installation Troubleshooting .html

  If you have completed all the setup without any issues then you can now get started configuring Android Studio for flutter development.  You can skip ahead to the next lesson.

  However, if you have issues installing any of the components mentioned in the previous lectures or you're getting errors then continue reading:

  NOTE: All the videos in this course are uploaded in 1080p full HD. If you are seeing blurry videos, please let Udemy know and their support team will be able to help you.

  
  

  Problem: When you try to run the command flutter --version and you get an error saying zsh command not found. e.g.

  

  Solution: This means you have not set up your Path correctly. First, check that you have a space between flutter and

  --version

  Next, check out this video lesson at 3:42 where we go through how to set the Path on Catalina with zsh:

  https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14481780#questions/8733294

  
  

  Problem: You run the command flutter --version and get the error invalid active developer path. e.g.

  

  Solution: You need to install the Xcode command-line tools.

  Type the command xcode-select --install into the Terminal as you see in the above screenshot and then hit enter.

  
  

  Problem: You're trying to edit the .bash_profile or .bashrc or .zshrc files and you get an error about a swap file. e.g.

  

  Solution: Check out this post that solves this: https://discussions.apple.com/thread/1972793

  
  

  Problem: You try to run your app but get errors in Android Studio, and under "What went wrong" it lists something about Execution failed for task ':app:compileFlutterBuildDebugX86' e.g.

  

  Solution: Try typing the command flutter clean into the Terminal. See this post regarding this problem: https://github.com/flutter/flutter/issues/42573

  
  

  Other Problems: Programming and development always involve lots of problems and solving problems is the main skill. If you get a different problem, be sure to check out all of these places where other flutter developers can help you:

  Flutter GitHub Repository

  Flutter Google Community

  StackOverflow Flutter Related Issues

  Flutter Slack Chat

  And remember always show add a screenshot of your error, otherwise it will be really hard to help.

• 14. Optional Configure Android Studio for Flutter Development 00:09:51
• 15. Optional Guided Tour of Android Studio for Flutter Development 00:13:15
• 15.1 Course Fixes Report an Issue .html

• 1. Creating a New Flutter Project from Scratch 00:15:32
• 1.1 Course Resources and Links .html
• 2. A quick note about Hot Reload .html

  You might have heard about hot reload in the introductory videos and you are keen to get your apps to hot reload in Android Studio. But until we learn a few fundamental concepts Hot Reload will not work. We will get it to work very soon in the MiCard app (https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482110/?instructorPreviewMode=student_v4#content).

  But meanwhile, just continue with the videos. Trust in the curriculum!

• 3. Scaffolding a Flutter App 00:22:12
• 4. Working with Assets in Flutter the Pubspec file 00:09:24
• 4.1 Diamond Image Asset .html
• 5. How to Add App Icons to the iOS and Android Apps 00:09:10
• 5.1 App Icons .html
• 5.2 Course Fixes Report an Issue .html
• 6. How to Ace this Course 00:01:24
• 6.1 Goal Setting Questions .pdf

• 1. Deploying Your Flutter Apps to a Physical Device .html

  The next two lessons will show you how to run your Flutter apps on to a physical device.

  If you have an Android phone go here.

  If you have an iPhone go here.

  Remember that in order to run your apps on an iPhone, you will need to have a Mac and have gone through all the set up steps in module 2.

• 2. Deploying Flutter Apps to an Android Phone 00:06:19
• 2.1 Troubleshooting Android Device Testing for Flutter .html
• 3. Deploying Flutter Apps to iPhonesiPads 00:16:23
• 3.1 Course Fixes Report an Issue .html
• 3.1 Troubleshooting iOS Device Testing for Flutter .html
• 3.2 Course Fixes Report an Issue .html
• 3.2 Troubleshooting iOS Device Testing for Flutter .html
• 4. Tip from Angela - Habit Building with the Calendar Trick 00:02:52

• 1. What are App Challenges 00:04:24
• 2. The I Am Poor Challenge .html

  Using what you have learnt from the I Am Rich app, you'll be building a simple Flutter app from scratch. If you head over to this link, you can download the Widget tree structure:

  https://drive.google.com/uc?export=download&id=1DcvqcMiRD9GA9Cci9akfSMDfPd9Nrn3e

  Using the Widget tree structure, create an app called I Am Poor, using everything you have learnt so far. Try to customise the app as much as you can to make it your own!

  You can use your own images, or simply find one from the internet.

• 3. Show Off Your Work .html

  I hope you enjoyed that challenge and you're now familiar with the basics of building Flutter apps.

  I really encourage you to take the opportunity and fully customize the design of your app. Once you're done and proud of it, post an image or gif of it in the Q&A section so I can personally congratulate you on your work!

  I'm looking forwards to judging the best designs!

  Your instructor, Angela

• 3.1 Course Fixes Report an Issue .html
• 4. Tip from Angela - Dealing with Distractions 00:02:28
• 5. Do You Want This .html

  Hey guys,
  

  Angela here, just wanted to let you know about something new we're bringing to all our app brewery students worldwide.

  At our in-person app development courses, I tend to share a lot of the best articles I've come-across on programming, design or startup growth. The tech world moves very fast and it's difficult to keep on top of all the new developments, tools and skills.

  So I'm hand-crafting an email every month-or-so, that teaches you 5 new things. You can see a sample below and decide whether if this is something you would want to read every month.

  I don't want to bombard your inbox and send you something you don't want. We're also quite keen on conserving our email server quota. So take a look at this month's issue and you can sign up for the newsletter here only if it is something you truly want.

  Hope you're all doing well and powering through the tutorials!

  Best wishes,

  Your Instructor Angela

  
  

  

  

  

• 1. MiCard - A Single Screen Personal Business Card App 00:05:31
• 1.1 Course Resources .html
• 2. Hot Reload and Hot Restart - Flutter Power Tools 00:13:49
• 3. How to Use Container Widgets 00:11:16
• 4. How to use Column Row Widgets for Layout 00:14:00
• 5. Flutter Layouts Challenge .html

  Now that you have learnt about Column and Row Widgets and how to use them to layout your app, it's time to test your understanding. Head over to the link below and download a layout that I would like you to try and replicate with code. I recommend using the existing Mi Card app to create this layout and once you've achieved the desired look and you're satisfied with the solution then you can delete the challenge code from the project.

  https://drive.google.com/uc?export=download&id=1k7oW5qVLJqzw_lEFsOFS_qKmkGjBX1pL

• 6. Tapping into Widget Properties 00:09:14
• 7. Incorporating Custom Fonts in Your Flutter App 00:10:59
• 7.1 pubscpec.yaml File .html
• 8. Adding Material Icons with the Icon Widget 00:12:35
• 9. Flutter Card ListTile Widgets 00:13:19
• 10. Download the Completed Project .html

  You can find the completed project under the course resources: https://github.com/londonappbrewery/Flutter-Course-Resources/

  
  

  If you've got some niggling bugs or there is something wrong with your code that you can't figure out, compare your code against the finished version of the app.

  
  

  To open the project inside Android Studio, simply clone the project from Github using VCS → Checkout from Version Control → Git. If you need a refresher on cloning repos, have a look at the first lesson from the MiCard module: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482104

  
  

• 10.1 Course Fixes Report an Issue .html
• 11. Tip from Angela - Nothing Easy is Worth Doing 00:03:35

• 1. Dicee - A Stateful Dice App 00:04:28
• 1.1 Course Resources .html
• 2. Using the Expanded Widget to Create Flexible Layouts 00:12:00
• 3. How to Use Intention Actions 00:08:30
• 4. Adding Gesture Detection with Flutter Button Widges 00:12:41
• 5. Dart Functions - Part 1 00:05:38
• 6. Making the Dice Image Change Reactively 00:04:00
• 7. Dart Variables 00:07:24
• 8. Dart Data Types 00:12:23
• 9. Stateful vs. Stateless Widgets - Whats the Difference 00:14:58
• 10. Randomising the Dice 00:08:26
• 11. Challenge 1 Solution 00:03:09
• 12. Challenge 2 Solution 00:01:57
• 13. Challenge 3 Solution 00:02:34
• 14. Download the Completed Project .html

  You can find the completed project under the course resources: https://github.com/londonappbrewery/Flutter-Course-Resources/

  
  

  If you've got some niggling bugs or there is something wrong with your code that you can't figure out, compare your code against the finished version of the app.

  
  

  
  

  To open the project inside Android Studio, simply clone the project from Github using VCS → Checkout from Version Control → Git. If you need a refresher on cloning repos, have a look at the first lesson from the MiCard module: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482104

• 14.1 Course Fixes Report an Issue .html
• 15. Tip from Angela - How to Deal with Procrastination 00:04:08

• 1. Magic 8 Ball - A Decision Making App 00:00:56
• 1.1 Course Resources .html
• 2. Step 1 - Set Up The Project .html

  Go to https://github.com/londonappbrewery/magic-8-ball-flutter and clone the starting project to your local computer. Open it using Android Studio and take a look around the project.

  
  

  • There is an images folder with all the ball images you will need.

  • There are a total of 5 images.

• 3. Step 2 - Create a Stateless Widget .html

  • Create a new Stateless widget called BallPage in your main.dart file.

  • Â Replace the word null with the new Stateless Widget you created.

  

  • Your BallPage should have a Scaffold with an AppBar and an empty Container as the body.

  • The AppBar should have a dark blue backgroundColor and a title that says 'Ask Me Anything'.

  • The background your Scaffold should have a blue color.

  • Once you run the app this is what you're aiming for:

  

• 3.1 Solution .html
• 4. Step 3 - Create a Stateful Widget .html

  • Create a new Stateful Widget called Ball in your main.dart file.

  • Instead of BallPage having a body of Container() replace it with your new Stateful Widget.

    

    • Your Ball Stateful Widget should display a the ball1.png image. (You don't have to touch the pubscpec.yaml file)

    • Make sure the image is centred.

    • When you run the app this is what you're aiming for:

  

• 4.1 Solution .html
• 5. Step 4 - Make it Interactive .html

  • Use a FlatButton Widget to make the Image clickable.

  • Add a print statement that gets triggered when the button is pressed. It should print 'I got clicked'.

  • When you run the app and click on the ball image you should see the words "I got clicked" into the console like this:

  
  

  • 

    
    

  
  

• 5.1 Solution .html
• 6. Step 5 - Randomise it .html

  • Inside the curly braces of _BallState create a variable called ballNumber that can only hold integers (int), set it to equal 0.

  
  

  

  • Instead of hard coding the ball image name that's being displayed on screen, use the ballNumber variable you just created instead.

  • Add the dart:math library to your main.dart file.

  • When the button gets pressed, use the Random() generator and the nextInt() method from the dart:math library to generate a new ballNumber between 0 - 4.

  • print the ballNumber to the console when the button gets pressed.

  • When you run the app and click on the ball image you should see random number between 0 - 4 printed in the console like this:

  

• 6.1 Solution .html
• 7. Step 6 - Update the State .html

  • Change the random numbers that are generated for ballNumber from 0 - 4 to 1 - 5 to match our ball image names.Â

  • Instead of using a hard coded image name to display the ball image that's shown on screen, use String interpolation and the ballNumber variable instead to make it show a random image.

  • Use setState() to update the state of the image when the ballNumber variable updates.

  • All going well, you should now have the full functionality of the Magic 8 Ball app, it should look like this:

  

• 7.1 Solution .html
• 8. Customise It .html

  I hope you enjoyed that challenge and you're now familiar with the basics of building Flutter apps that have state and functionality.

  I really encourage you to take the opportunity and fully customize the design of your app. Once you're done and proud of it, post an image or gif of it in the Q&A section so I can personally congratulate you on your work!

  I'm looking forward to judging the best designs!

  Your instructor, Angela

• 8.1 Course Fixes Report an Issue .html
• 9. Tip from Angela - Building a Programming Habit00:02:46

• 1. Xylophone - A Simple Musical Instrument App 00:03:36
• 1.1 Course Resources .html
• 2. What are Flutter Dart Packages 00:13:22
• 3. How to Play Sound Across Platforms 00:09:46
• 4. How to Play Multiple Sounds 00:09:00
• 5. Dart Functions - Part 2 00:10:32
• 6. Updating the UI of Our App 00:09:15
• 7. Dart Functions - Part 3 00:10:54
• 8. Dart Functions Challenge 00:06:52
• 9. Refactoring Our App 00:06:18
• 10. Dart Arrow Functions 00:06:27
• 11. Customise It .html

  Now that you've built the app, it's time to customise it to make it your own.

  There's a large collection of free sounds at https://freesound.org/

  You can download collections of various sounds, e.g. birds/fart sounds/atmospheric sounds.

  Maybe you'll want to build a personal sound track to turn your life into a movie. Want to investigate a strange movement in your backyard? Click on the tense string ensemble. Hit with a flash of inspiration? Click on the corresponding sound effect.

  Perhaps a bit too much of a narcissistic app idea, I'll leave you to come up with the ideas to customise the app.

  If you build something cool, I'd love to know about it. Share a preview video on Twitter with the hashtag #FlutterBrew to show it off!

• 12. Download the Completed Project .html

  You can find the completed project under the course resources: https://github.com/londonappbrewery/Flutter-Course-Resources/

  
  

  If you've got some niggling bugs or there is something wrong with your code that you can't figure out, compare your code against the finished version of the app.

  
  

  
  

  To open the project inside Android Studio, simply clone the project from Github using VCS → Checkout from Version Control → Git. If you need a refresher on cloning repos, have a look at the first lesson from the MiCard module: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482104

• 12.1 Course Fixes Report an Issue .html
• 13. Tip from Angela - The 20 Minute Method 00:02:39

• 1. Quizzler - A TrueFalse Quiz App 00:03:14
• 1.1 Course Resources .html
• 2. Building a Score Keeper 00:12:08
• 3. Dart Lists 00:08:25
• 4. Displaying the Questions 00:17:04
• 5. Checking User Answers 00:06:28
• 6. Dart Conditionals - IFELSE 00:15:36
• 7. More Dart Programming Challenges .html

  If you are already familiar with OOP and want to quickly get up to speed with the Dart programming language. I recommend heading over to the Dart Track on Exercism and completing the track as well as extra exercises.

  or

  If you are completely new to programming and want to test yourself as you progress through the course, I recommend starting with the first 3 exercises in the Dart Track on Exercism and progressing as your capability grows. This might mean coming back to Exercism when you learn more Dart concepts through the course.

  
  

  

• 8. Creating a Question Class 00:12:39
• 9. Dart Classes and Objects 00:15:24
• 10. Abstraction in Action 00:16:25
• 11. Encapsulation in Action 00:14:50
• 12. Inheritance in Action 00:07:38
• 13. Polymorphism in Action 00:08:31
• 14. Adding Back the Score Keeper 00:06:50
• 15. Code Challenge 00:03:14
• 15.1 Starting Project .html
• 15.2 Completed Solution .html
• 15.2 rFlutter Alert Package .html
• 15.3 Completed Solution .html
• 15.3 rFlutter Alert Package .html
• 16. Dart Class Constructors 00:14:01
• 17. Download the Completed Project .html

  You can find the completed project under the course resources: https://github.com/londonappbrewery/Flutter-Course-Resources/

  
  

  If you've got some niggling bugs or there is something wrong with your code that you can't figure out, compare your code against the finished version of the app.

  
  

  
  

  To open the project inside Android Studio, simply clone the project from Github using VCS → Checkout from Version Control → Git. If you need a refresher on cloning repos, have a look at the first lesson from the MiCard module: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482104

• 17.1 Course Fixes Report an Issue .html
• 18. Tip from Angela - Learning Before you Eat 00:02:06

• 1. Destini - A Choose Your Own Adventure Game 00:02:17
• 2. Set Up the Project .html

  We'll be working from a starting project that has all the required assets and starting code. Head over to the GitHub page to clone it to your local system and click on "Get Dependencies" to get rid of the errors.

  

  https://github.com/londonappbrewery/destini-challenge-starting

• 3. Familiarise Yourself with the Starting Project .html

  Take a look around the project. These are the most important points to notice:

  1. A list of TODO items have been added to the project. You can view all of them by going to the TODO tab and complete them in order.

  

  2. There is a folder called images and inside there is an image called background.png

  

  3. Inside the lib folder there are 3 files, story.dart, story_brain.dart and main.dart

  

  4. Inside main.dart there is a Column Widget that contains a Text Widget and two FlatButton Widgets. Run the app to see how this looks in the app.

  
  

  5. On line 7 of main.dart there's some squiggly lines under the word Destini, this is because it's not a dictionary word. If it bothers you, right click on it and go to Spelling --> Save 'Destini' to project-level dictionary.

  

  
  

• 4. Step 1 - Adding a Image as a Background .html

  Go into the TODOs pane, making sure that Project TODOs are showing and double click on Step 1. You should be taken to the first TODO in main.dart.

  //TODO: Step 1 - Add background.png to this Container as a background image.

  

  Using the Flutter docs and this StackOverflow post, figure out how to make the background filled by the background.png image.

  NOTE: The pubspec.yaml has already been edited to add the images folder to the project as an asset source.

  When you run the app, the end result should look like this:

  

  If you really can't figure out how to complete the challenge, in every step, there is a link to the solution on GitHub. When you click on the link, you can see the solution on the right hand side. The + in front of the lines of code means that a new line of code was added compared to the last step.

  Step 1 - SOLUTION

• 4.1 Step 1 Solution .html
• 5. Solutions on GitHub .html

  In this challenge, we'll be providing solutions for every step. This is so that if you really get stuck on one step you can check the solution and still continue with the rest of the challenges.

  It's important that you try your hardest to complete the challenges, use the Flutter/Dart docs, Google and StackOverflow to really try and complete the steps by yourself. The tutorials are helpful for students to learn a topic, but it's completing the challenges that takes you closer to mastery!

  The solutions are provided via Github commits.

  A new line added looks like this:

  

  A line removed looks like this:

  

  REMEMBER, the solution is always on the right hand pane, the left hand pane is what the code looked like on the last step, in the right hand pane are the changes that completed the current step (the solution).

  

  If you're confused how GitHub comments work, you can also just look at the files by clicking on browse files when you navigate to the solution.

  

• 6. Step 234 - Create a New Story Class .html

  //TODO: Step 2 - Create a new class called Story.

  Using what you've learnt about classes and objects in the Quizzler module, create a new class called Story in story.dart.

  If you need to review the docs on Dart Classes, you can find it here:

  https://www.dartlang.org/guides/language/language-tour#classes

  If you still can't figure out the solution, be sure to review the lessons on Dart Classes in the Quizzler module.

  Step 2 - SOLUTION

  
  

  //TODO: Step 3 - Create 3 properties for this class, A. storyTitle to store the story text. B. choice1 to store the text for choice 1, C. choice2 to store the text for choice 2.

  HINT: These properties need to be created inside the Story class.

  Properties are variables associated with a class, they are also often referred to as a field or an instance variable.

  https://www.dartlang.org/guides/language/language-tour#instance-variables

  Step 3 - SOLUTION

  
  

  //TODO: Step 4 - Create a Constructor for this class to be able to initialise the properties created in step 3.

  If you need a reminder about Constructors, have a look at the Dart docs here:

  https://www.dartlang.org/guides/language/language-tour#constructors

  Step 4 - SOLUTION

• 6.1 Step 2 Solution .html
• 6.1 Step 3 Solution .html
• 6.2 Step 3 Solution .html
• 6.2 Step 4 Solution .html
• 6.3 Step 2 Solution .html
• 6.3 Step 4 Solution .html
• 7. Step 567 - Create the Story Brain .html

  //TODO: Step 5 - Create a new class called StoryBrain.

  This should be easy, you've already done it in step 2.

  Step 5 - SOLUTION

  
  

  //TODO: Step 6 - import the story.dart file into this file.

  Step 6 - SOLUTION

  
  

  //TODO: Step 7 - Uncomment the lines below to include storyData as a private property in StoryBrain. 
      Hint: You might need to import something to make this work.

  Remember, the shortcut for uncommenting multiple lines in Android Studio is command + / for mac, and control + / for windows.

  Step 7 - SOLUTION

• 7.1 Step 5 Solution .html
• 7.1 Step 6 Solution .html
• 7.2 Step 5 Solution .html
• 7.2 Step 7 Solution .html
• 7.3 Step 6 Solution .html
• 7.3 Step 7 Solution .html
• 8. Display the Story in the App .html

  //TODO: Step 8 - Create a method called getStory() that returns the first storyTitle from _storyData.

  If you need to refresh yourself on how methods are declared head over here:

  https://www.dartlang.org/guides/language/language-tour#methods

  Step 8 SOLUTION

  
  

  //TODO: Step 9 - Create a new storyBrain object from the StoryBrain class.

  Heading back into the main.dart file, we'll need to use the StoryBrain class to create a new storyBrain object to work with.

  Step 9 SOLUTION

  
  

  //TODO: Step 10 - use the storyBrain to get the first story title and display it in this Text Widget.

  Instead of having the hard coded 'Story text will go here.', use the storyBrain to provide the story title to display here.

  Step 10 SOLUTION

• 8.1 Step 9 Solution .html
• 8.1 Step 10 Solution .html
• 8.2 Step 9 Solution .html
• 8.2 Step 10 Solution .html
• 8.3 Step 8 Solution .html
• 9. Step 11121314 - Display the Choices in the App .html

  //TODO: Step 11 - Create a method called getChoice1() that returns the text for the first choice1 from _storyData.

  Step 11 SOLUTION

  
  

  //TODO: Step 12 - Create a method called getChoice2() that returns the text for the first choice2 from _storyData.

  Step 12 SOLUTION

  
  

  //TODO: Step 13 - Use the storyBrain to get the text for choice 1.

  Step 13 SOLUTION

  
  

  //TODO: Step 14 - Use the storyBrain to get the text for choice 1.

  Step 14 SOLUTION

  
  

  //TODO: Step 15 - Run the app and see if you can see the screen update with the first story. 

• 9.1 Step 12 Solution .html
• 9.1 Step 13 Solution .html
• 9.2 Step 14 Solution .html
• 9.3 Step 11 Solution .html
• 9.4 Step 12 Solution .html
• 9.4 Step 13 Solution .html
• 10. Update the Story Based on User Choice .html

  //TODO: Step 16 - Create a property called storyNumber which starts with a value of 0. This will be used to track which story the user is currently viewing.

  Step 16 SOLUTION

  
  

  //TODO: Step 17 - Create a method called nextStory(), it should not have any outputs but it should have 1 input which will be the choice number (int) made by the user.

  Leave the body of the method empty, we'll get to it later.

  Step 17 SOLUTION

  
  

  //TODO: Step 18 - Call the nextStory() method from storyBrain and pass the number 1 as the choice made by the user.

  Step 18 SOLUTION

  
  

  //TODO: Step 19 - Call the nextStory() method from storyBrain and pass the number 2 as the choice made by the user.

  Step 19 SOLUTION

  
  

  NOTE: At this stage our app won't do anything yet. We'll test it in the next challenge lesson.

• 10.1 Step 16 Solution .html
• 10.1 Step 18 Solution .html
• 10.2 Step 18 Solution .html
• 10.2 Step 19 Solution .html
• 10.3 Step 16 Solution .html
• 10.3 Step 17 Solution .html
• 10.4 Step 17 Solution .html
• 10.4 Step 19 Solution .html
• 11. Step 21 - Use the Story Plan to Progress through the Story .html

  //TODO: Step 20 - Download the story plan here: https://drive.google.com/uc?export=download&id=1KU6EghkO9Hf2hRM0756xFHgNaZyGCou3

  Head over here to download the story plan:

  https://drive.google.com/uc?export=download&id=1KU6EghkO9Hf2hRM0756xFHgNaZyGCou3

  
  

  //TODO: Step 21 - Using the story plan, update nextStory to change the storyNumber depending on the choice made by the user.

  

  This plan will determine how the user will progress through the story. If you're not familiar with how choose your own adventure games work, be sure to read it up here:

  https://en.wikipedia.org/wiki/Choose_Your_Own_Adventure

  
  

  The user will start on story 0, the first story in the _storyData List.

  If they click on the top button (red), they made Choice1 and the screen should refresh to show Story 2 and 2 new choices. But if they picked Choice 2, it should take them to story 1 instead.

  
  

  This is how the whole story will play out at a glance:

  If the user chooses choice 1 when they see Story0, they will be taken to Story2, from there, if they choose choice1 again, they get taken to story5 and the game ends there.

  

  

  You can download this story outline as a PDFÂ here:

  https://drive.google.com/uc?export=download&id=1XgnMqvQ7AldYUM-wS0wX5rDNT_GwxSjU

  
  

  HINT: You'll need to use what you've learn about Dart conditionals (IF/ELSEÂ IF/ELSE) to map out different pathways for the user.

  
  

  Step 21 SOLUTION

• 11.1 Step 21 Solution .html
• 12. Step 222324 - Restart the Game When the User Reaches the End .html

  So far, the nextStory method covers what should happen if the user needs to progress through the story. But what should happen when they reach one of the end points of the story, namely story 3, 4 or 5?

  //TODO: Step 22 - In nextStory() if the storyNumber is equal to 3 or 4 or 5, that means it's the end of the game and it should call a method called restart() that resets the storyNumber to 0.

  HINT: You'll need to add some conditions to the nextStory() method to achieve this.

  Step 22 SOLUTION

  
  

  //TODO: Step 23 - Use the storyNumber property inside getStory(), getChoice1() and getChoice2() so that it gets the updated story and choices rather than always just the first (0th) one.

  Now that we have a storyNumber that tracks where the user is at in the storyline, it's time to put it to use in the methods that get the information for our screen. So instead of always just showing the 0th story, first choice and second choice, we need to update it using the storyNumber.

  Step 23 SOLUTION

  
  

  //TODO: Step 24 - Run the app and try to figure out what code you need to add to this file to make the story change when you press on the choice buttons.

  If you run your app at this stage, you'll see that nothing happens when you press on the choice buttons. Why is this?

  HINT

  Step 24 SOLUTION

  
  

• 12.1 Step 22 Solution .html
• 12.1 Step 24 Solution .html
• 12.2 Step 23 Solution .html
• 12.3 Step 22 Solution .html
• 12.3 Step 24 Solution .html
• 13. Step 25 - Renaming and Refactoring Using Android Studio .html

  Android Studio makes it really easy for you to rename things that are scattered all over your project.

  In our story_brain.dart we want to make the storyNumber into a private property. But storyNumber is used in a lot of places. Without Android Studio, we would have to change it manually in over 10 places. But let's see what we can do using Android Studio's refactoring capabilities.

  //TODO: Step 25 - Change the storyNumber property into a private property so that only story_brain.dart has access to it. You can do this by right clicking on the name (storyNumber) and selecting Refactor -> Rename to make the change across all the places where it's used.

  

  Now when you rename the property, the changes will be made to every storyNumber that is used in the project.

  

  
  

  HINT

  
  

  Step 25 SOLUTION

• 13.1 Step 25 Solution .html
• 14. Step 262728 - Hiding Buttons .html

  If you run the app now, everything should work as expected and the app has all the functionality it needs. But when the user reaches the end of the storyline, the top button reads Restart, but the bottom button doesn't say anything. There is no second choice for the user to make. So it makes more sense to hide the second button. But how do we do this using Flutter?

  Let's google this: https://www.google.com/search?q=flutter+hide+widget

  
  

  //TODO: Step 26 - Use a Flutter Visibility Widget to wrap this FlatButton.

  Remember, in order to wrap a Widget in another Widget, you can use the light bulb or

  the Show Intention Actions shortcut:

  mac: ⌥ + ↩︎

  windows: Alt + Enter

  

  HINT

  Step 26 SOLUTION

  
  

  //TODO: Step 27 - Create a method called buttonShouldBeVisible() which checks to see if storyNumber is 0 or 1 or 2 (when both buttons should show choices) and return true if that is the case, else it should return false.

  We need a way of checking if at this current point in the storyline if the bottom blue button should be visible or should be hidden. We'll create a method in the story_brain.dart to do this.

  Step 27 SOLUTION

  
  

  //TODO: Step 28 - Set the "visible" property of the Visibility Widget to equal the output from the buttonShouldBeVisible() method in the storyBrain.

  The Visibility Widget accepts a property called visible. When this is set to true, the child of the Visibility Widget will be visible, if it's false, it will remove the child Widget from the screen.

  Step 28 SOLUTION

• 14.1 Step 26 Solution .html
• 14.1 Step 27 Solution .html
• 14.2 Step 26 Solution .html
• 14.2 Step 27 Solution .html
• 14.3 Step 28 Solution .html
• 15. Download the Completed App .html

  //TODO: Step 29 - Run the app and test it against the Story Outline to make sure you've completed all the steps. The code for the completed app can be found here: https://github.com/londonappbrewery/destini-challenge-completed/

  You can find the completed project under the course resources: https://github.com/londonappbrewery/Flutter-Course-Resources/

  
  

  If you've got some niggling bugs or there is something wrong with your code that you can't figure out, compare your code against the finished version of the app.

  
  

  
  

  To open the project inside Android Studio, simply clone the project from Github using VCS → Checkout from Version Control → Git. If you need a refresher on cloning repos, have a look at the first lesson from the MiCard module: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482104

  
  

• 15.1 Course Fixes Report an Issue .html
• 16. Tip from Angela - Retrieval is How You Learn 00:02:52

• 1. BMI Calculator - A Beautiful Health App 00:02:02
• 2. How to Use Flutter Themes 00:24:05
• 3. How to Refactor Flutter Widgets 00:20:05
• 4. Dart Final vs. Const 00:18:24
• 5. Creating Custom Flutter Widgets 00:18:25
• 6. The GestureDetector Widget 00:12:03
• 7. Dart Enums 00:11:19
• 8. Dart Ternary Operator 00:13:07
• 9. Dart Functions as First Order Objects 00:15:04
• 10. The Flutter Slider Widget 00:25:24
• 11. Customising Widgets with Themes 00:11:49
• 12. Composition vs. Inheritance - Building Flutter Widgets From Scratch 00:27:43
• 13. Multi-Screen Apps Using Routes and Navigation 00:21:39
• 14. Dart Maps 00:07:53
• 15. Designing the Result Page 00:20:57
• 16. Adding the BMI Calculator Functionality 00:13:22
• 17. Download the Completed Project .html

  You can find the completed project under the course resources: https://github.com/londonappbrewery/Flutter-Course-Resources/

  
  

  If you've got some niggling bugs or there is something wrong with your code that you can't figure out, compare your code against the finished version of the app.

  
  

  
  

  To open the project inside Android Studio, simply clone the project from Github using VCS → Checkout from Version Control → Git. If you need a refresher on cloning repos, have a look at the first lesson from the MiCard module: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482104

• 17.1 Course Fixes Report an Issue .html
• 18. Tip from Angela - Dealing with Lack of Progress 00:03:08

• 1. Clima - A Modern Weather App 00:00:56
• 2. Getting Location Data From Across Platforms 00:16:08
• 3. Dart Futures Async Await 00:23:58
• 4. Stateful Widget Lifecycle Methods 00:13:29
• 5. Dart Exception Handling Null Aware Operators 00:20:32
• 6. AsyncAwait Challenge 00:05:26
• 7. Application Programming Interfaces (APIs) Explained 00:09:00
• 8. Networking in Flutter Apps with the HTTP Package 00:13:50
• 9. JSON Parsing and Dynamic Types 00:16:20
• 10. Getting Actual Weather Data from the OpenWeatherMap API 00:10:19
• 11. Showing a Spinner While the User Waits 00:06:10
• 12. Passing Data to a State Object 00:11:18
• 13. Updating the Weather with the WeatherModel 00:08:41
• 14. Refactoring the Location Methods 00:15:13
• 15. Creating and Styling a TextField Widget for Text Entry 00:10:06
• 16. Passing Data Backwards Through the Navigation Stack 00:13:31
• 17. Download the Completed Project .html

  You can find the completed project under the course resources: https://github.com/londonappbrewery/Flutter-Course-Resources/

  
  

  If you've got some niggling bugs or there is something wrong with your code that you can't figure out, compare your code against the finished version of the app.

  
  

  
  

  To open the project inside Android Studio, simply clone the project from Github using VCS → Checkout from Version Control → Git. If you need a refresher on cloning repos, have a look at the first lesson from the MiCard module: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482104

• 17.1 Course Fixes Report an Issue .html
• 18. Tip from Angela - Mixing Knowledge 00:02:20

• 1. Bitcoin Ticker - A Simple Cryptocurrency Price Tracker 00:02:39
• 2. The Material DropdownButton Widget 00:08:22
• 3. Dart Loops 00:24:16
• 4. Building Widgets with Loops Solution 00:07:00
• 5. Introducing Cupertino Widgets 00:10:30
• 6. Building Platform Specific UI (iOS Android) 00:09:42
• 7. Introduction to Boss Level Challenge 3 00:05:15
• 8. Level 1 - Bronze Medal .html

  Complete this challenge to get the bronze medal. After completing this challenge, you can push yourself further by continuing to complete the silver medal in the next lesson.

  
  

  1. Start by cloning a fresh copy of the app that includes all the code up until this point:

  https://github.com/londonappbrewery/bitcoin-flutter-challenge-start

  
  

  2. Run the app, it currently has a single Text Widget, that displays 1 BTC = ? USD

  

  3. Using what you have learnt in previous modules to display the latest price of 1 Bitcoin (BTC) in US dollars (USD).

  You'll need the coinapi.io API for the Exchange Rate to achieve this:

  https://docs.coinapi.io/#get-specific-rate

  The value we're interested from the API is the rate of Bitcoin in USD.

  

  You'll want to write all the networking/request/parsing code inside a method called getCoinData() in the CoinData class in the coin_data.dart file.

  Goal: By the end of this challenge, this is the functionality you should end up with:

  

  NOTE: The CupertinoPicker/DropdownMenu is not supposed to work yet.

  Hint: You'll need the http and dart:convert packages.

  
  

  You can check your answer against the solution by cloning this repository. Go through the comments in order starting from //1 in the Pubspec.yaml file.

  Solution: https://github.com/londonappbrewery/bitcoin-flutter-bronze-solution

  
  

• 9. Level 2 - Silver Medal .html

  If you've managed to complete the level 1 - bronze challenge without looking at the solution code, then it's time to push yourself and increase the difficulty. Complete this level 2 challenge to get the silver medal.

  
  

  1. Start by cloning a fresh copy of the app that includes all the code up until this point:

  https://github.com/londonappbrewery/bitcoin-flutter-silver-start

  
  

  2. Run the app, notice that it can only fetch the bitcoin price in US dollars.

  

  3. Using what you have learnt in previous modules to display the latest price of 1 Bitcoin (BTC) in any currency selected by the user.

  You'll need to look inside the onChanged for the DropdownButton and the onSelectedItemChanged for the CupertinoPicker to see what the user selected as the currency.

  The coinapi.io API supports all the currencies in our currenciesList.

  The URL is structured like this:

  https://rest.coinapi.io/v1/exchangerate/BTC/<Currency>?apikey=YOUR_API_KEY

  e.g. For GBP (UK Pounds), the URL would look like this.

  https://rest.coinapi.io/v1/exchangerate/BTC/GBP?apikey=YOUR_API_KEY

  Goal: By the end of this challenge, this is the functionality you should end up with:

   

  

  
  

  You can check your answer against the solution by cloning this repository. Go through the comments in order starting from //1

  Solution: https://github.com/londonappbrewery/bitcoin-flutter-silver-solution

• 10. Level 3 - Gold Medal .html

  If you've managed to complete the level 2 - silver challenge without looking at the solution code, then it's time to push yourself and increase the difficulty even more. Complete this final challenge to get the gold medal.

  
  

  1. Start by cloning a fresh copy of the app that includes all the code up until this point:

  https://github.com/londonappbrewery/bitcoin-flutter-gold-start

  
  

  At the moment our app can only fetch the bitcoin price depending on the selected currency.

  But what if we wanted other cryptocurrency prices too?

  
  

  2. If you look inside the coin_data.dart file, you'll find a const called cryptoList. This contains a List of Strings that represent 3 cryptocurrency symbols. BTC - Bitcoin, ETH - Ethereum and LTC - Litecoin.

  

  
  

  3. Using what you have learnt in previous modules, update the code in the gold starter project to be able to display all three cryptocurrency prices in any selected currency.

  Goal: By the end of this challenge, this is the functionality you should end up with:

  

  You can check your answer against the solution by cloning this repository. Go through the comments in order starting from //1

  Solution: https://github.com/londonappbrewery/bitcoin-flutter-gold-solution

• 11. Check out the completed app .html

  Now that you've completed the challenge, it's time to personalise the app. Add more currencies, change up the styling and check dribbble for inspiration.

  The world is your oyster!

  Be sure to share your best work with the community so we can marvel at your amazing work. Tweet your best screenshots with the hashtag #flutterbrew and we'll judge who's got the best designs and implementation!

  
  

  
  

  You can find the completed project under the course resources: https://github.com/londonappbrewery/Flutter-Course-Resources/

  
  

  If you've got some niggling bugs or there is something wrong with your code that you can't figure out, compare your code against the finished version of the app.

  
  

  
  

  To open the project inside Android Studio, simply clone the project from Github using VCS → Checkout from Version Control → Git. If you need a refresher on cloning repos, have a look at the first lesson from the MiCard module: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482104

  
  

• 11.1 Course Fixes Report an Issue .html
• 12. Tip from Angela - Dealing with Frustration 00:02:31

• 1. Flash Chat - A Lightning Fast Messaging App 00:01:29
• 2. Named Routes Challenge 00:08:18
• 3. Dart Static Modifier 00:13:03
• 4. Refactor Routes with the Static Const 00:06:29
• 5. Flutter Hero Animations 00:08:46
• 6. Custom Flutter Animations with the Animation Controller 00:28:55
• 7. Dart Mixins 00:10:49
• 8. Prepackaged Flutter Animations 00:04:32
• 9. Code Refactoring Challenge 00:16:36
• 10. Creating a New Firebase Project 00:02:46
• 11. Potential Problems When Incorporating Firebase .html

  Making a Flutter App work with Firebase Cloud Firestore is no simple feat, it relies on a lot of setup steps to be carried out successfully. If you experience errors/warnings at any point in the upcoming setup lessons, be sure to visit the troubleshooting page located here:

  https://blog.londonappbrewery.com/troubleshooting-firebase-x-flutter-a974b2645689

• 12. Android Firebase Project Setup 00:06:27
• 13. iOS Firebase Project Setup 00:05:35
• 14. Firebase Flutter Packages Setup (iOS Android) 00:07:32
• 15. Registering Users with Firebase using FirebaseAuth 00:15:57
• 16. Authenticating Users with FirebaseAuth 00:05:44
• 17. Showing a Spinner while the User Waits 00:05:25
• 18. Saving Data into Cloud Firestore 00:08:12
• 19. Listening for Data from Firebase using Streams 00:13:13
• 20. Dart Streams 00:07:24
• 21. Turning Streams into Widgets Using the StreamBuilder 00:16:56
• 22. The Flutter ListView00:16:38
• 23. A Different UI for Different Senders 00:16:54
• 24. Cloud Firestore Authorisation and Security Rules 00:03:36
• 25. Download the Completed Project .html

  You can find the completed project under the course resources: https://github.com/londonappbrewery/Flutter-Course-Resources/

  
  

  If you've got some niggling bugs or there is something wrong with your code that you can't figure out, compare your code against the finished version of the app.

  
  

  
  

  To open the project inside Android Studio, simply clone the project from Github using VCS → Checkout from Version Control → Git. If you need a refresher on cloning repos, have a look at the first lesson from the MiCard module: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482104

• 25.1 Course Fixes Report an Issue .html
• 26. Tip from Angela - Sleep is My Secret Weapon 00:03:48

• 1. Todoey - Your very own To-Do List App 00:01:31
• 1.1 Course Resources and Links .html
• 2. Designing the To-Do List App 00:24:40
• 3. The ListView Challenge 00:09:54
• 4. The BottomSheet Widget 00:19:41
• 5. Positioning the BottomSheet above the Keyboard .html

  By default, the BottomSheet will take up half the screen:

    onPressed: () {
      showModalBottomSheet(
        context: context,
        builder: (context) => AddTaskScreen(),
      );
  }

  

  For certain screen sizes, this may mean the Add button is obscured. Setting the isScrolledControlled property to true you can make the modal take up the full screen:

    onPressed: () {
      showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (context) => AddTaskScreen(),
      );
  }

  

  To have the AddTaskScreen sit just above the keyboard, you can wrap it inside a SingleChildScrollView, which determines the padding at the bottom using a MediaQuery.

  onPressed: () {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) => SingleChildScrollView(
        child:Container(
          padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: AddTaskScreen(),
        )
      )
    );
  }

  
  

  

• 6. What is State and How do we Manage it 00:21:02
• 7. How do Callbacks work in Dart 00:06:34
• 8. The ListView Builder 00:20:13
• 9. Lifting State Up Challenge 00:15:34
• 10. Flutter App Architecture Patterns 00:10:59
• 11. Introducing the Provider Package 00:26:50
• 12. Using a Provider and a ChangeNotifier to Manage State 00:20:35
• 13. Adding New To-Do List Tasks 00:14:32
• 14. Checking off To-Do List Tasks00:06:44
• 15. Deleting Tasks using the Provider Design Pattern 00:05:45
• 16. Download the Completed Project .html

  You can find the completed project under the course resources: https://github.com/londonappbrewery/Flutter-Course-Resources/

  
  

  If you've got some niggling bugs or there is something wrong with your code that you can't figure out, compare your code against the finished version of the app.

  
  

  
  

  To open the project inside Android Studio, simply clone the project from Github using VCS → Checkout from Version Control → Git. If you need a refresher on cloning repos, have a look at the first lesson from the MiCard module: https://www.udemy.com/course/flutter-bootcamp-with-dart/learn/lecture/14482104

• 16.1 Course Fixes Report an Issue .html
• 17. Tip from Angela - How to Solidify Your Knowledge 00:02:55

• 1. Join the FlutterBrew Contest.html

  

  This is not the end! It's only the beginning of your Flutter journey. We'd love to see how far you can take this course and what amazing Flutter apps you'll build with the knowledge you've acquired. That's why we've teamed up with the Flutter team to put on the #FlutterBrew contest.

  To enter, simply record a video of your own unique Flutter app on iOS or Android and share it to Twitter with the hashtag #FlutterBrew

  We'll be monitoring the entries and sending Flutter prizes and swag to the best creations!

  We're looking for unique concepts, beautiful, fluttery UIs and your ingenious creativity.

  Good luck and I can't wait to see what you'll build!

• 2. Keep Learning .html

  

  To master a skill, the most important teacher will be practice. So now that you've completed the course, the next step is to build your own ideas into Flutter apps. You've got all the skills you need to take an idea and turn it into real apps.

  Start with something simple, something that you want to exist in the world. For example, a past student of ours - Ross, decided that he wanted to wake up everyday at 6AM. But it was too hard. So he built an app that will wake him up 1 minute earlier everyday and over a month he became an early riser!

  Once you've got your idea sorted, the next step is to start somewhere. Break down the problem into smaller chunks. To build the weather app, we first had to figure out how to get the current location. Create a list of tiny problems that once all addressed, will turn into the final app.

  Then start building! Along the way, you'll stumble upon roadblocks. Darn, I don't know how to play video or how to get the camera to work. At this point StackOverflow, the Flutter docs and the Flutter Packages site will be your best friends. There's also an active Flutter community on Gitter, where even the Flutter engineers occasionally browse through.

  Are people not answering your questions on StackOverflow? Try and see how you can become a better S/O user. Is there something you think is amiss in the flutter documentation? Try submitting an issue or even a pull request on the flutter website's GitHub repo.

  Once you get comfortable building simple Flutter apps, push yourself some more. Try something more ambitious. Try teaming up with someone on the Discord channel for this course. See what it's like to collaboratively code up a project.

  I look forwards to your every success!

  Your instructor, Angela

• 3. Publish Your Apps .html

  

  Once you've built your own Flutter apps then it's time to show it off to the world! The Flutter team have compiled a step-by-step guide on how to deploy Flutter apps to the Apple App Store and Google Play Store. As these things are constantly in flux, it's worth reviewing this document at the point when you are ready to release your apps to check out the latest guidance.

  
  

  Deploying your Android apps to the Google Play store

  Deploying you iOS apps to the Apple App Store

  
  

  If you're super proud of what you've built and want our help spreading the word, simply send an email to robots[at]londonappbrewery[dot]com with the subject line: "I Made an App". The best apps we get will get featured in the monthly student newsletter that gets distributed to over 50,000 students.

• 4. Tip from Angela - Review your goals 00:02:20

• 1. Recording of our Live AMA (aka AAA - Ask Angela Anything) 00:59:52