Flutter Tips, Tricks, and Techniques
2.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
15 students enrolled

Flutter Tips, Tricks, and Techniques

Easy tips and tricks to improve your skills with Flutter
2.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
15 students enrolled
Created by Packt Publishing
Last updated 12/2019
English
English
Current price: $86.99 Original price: $124.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Explore Flutter widget trees, understand existing layouts, and diagnose layout issues
  • Learn best practices to ensure that your app is performant
  • Access control and collaboration features such as bug tracking, feature requests, task management, and wikis for your projects
  • Build custom widgets; incorporate images, assets, and animations; and add navigation and routing
  • Learn how to integrate Fastlane, an open-source tool suite, with existing testing and continuous integration workflows
  • Use tips to improve your app-building process by using Material Design to enhance your app UIs
Course content
Expand all 26 lectures 01:54:32
+ Tips to Improve Your App Building
5 lectures 15:42

This video will give you an overview about the course.

Preview 02:33

In this video, we are going to first discuss Flutter’s hot reload feature and explain how it works. Then, we are going to demonstrate how to use it while debugging an app. Finally, we will discuss the limitations of hot reload.

   •  Discuss Flutter's hot reload feature

   •  Use hot reload while debugging an app

   •  Discuss limitations of hot reload

How to Use Hot Reload?
02:38

In this video, we setup the Android device for USB debugging. Then, ensure that the Android SDK, Platform-Tools, and SDK Build-Tools are installed. Later, we connect an Android device and an iOS device, and install Flutter on both devices.

   •  Setup Android Studio and XCode for Flutter development

   •  Install a Flutter app on an Android device

   •  Install a Flutter app on an IOS device

How to Run App on a Physical Device?
04:01

In this video, we first need to explain why code formatting is important to developers. Then, we will show examples of badly formatted code versus properly formatted code. Then, we will learn how to format code in Android Studio. We then format the same code in VSCode.

   •  Discuss what code formatting is

   •  Apply code formatting to a project in Android Studio

   •  Apply code formatting to a project in VSCode

How to Use Code Formatting?
02:34

In this video, we first need to explain what a package is and how to generate one. Then, we will explain what a plugin is, and show how to create one. We then take the package and add it to our project.

   •  Define packages and plugins

   •  Create a package

   •  Add a package to a project

How to Develop Packages and Plugins?
03:56
Test Your Knowledge
4 questions
+ Development Tips and Tricks
5 lectures 21:12

In this video, we first define what a widget in Flutter is. Then, we combine a few widgets to make a completely new widget. Finally, we will store this new widget in a separate folder, so that it can be easily reused.

   •  Discuss what a widget is

   •  Combine widgets to build a custom widget

   •  Store the widget in a separate folder

Preview 04:47

Before we can use any image files, we need to declare them in pubspec.yaml. Also, using images from a network location requires a url. To use a custom font, the font file needs to be declared in pubspec.yaml as well.

   •  Use images from a local folder

   •  Use images from a network location

   •  Use a custom font

Using Assets and Images
04:03

Navigation only comes into effect when an app has multiple screens. Navigator pop can be used to close the entire screen stack. Navigator push can go to a specific screen. Navigator pushNamedAndRemoveUntil can close all other screens and go to a specific screen.

   •  Create three stateless screens and create routes for each

   •  Show how to navigate to one screen and back

   •  Navigate to a specific route

How to Add Navigation and Routing?
04:10

A hero animation requires a tag property, and a child which is usually a gesture detector or an inkwell. When the hero widget is tapped, you are navigated to a screen or another part of a screen, which has another hero widget with the same tag.

   •  Define a hero animation

   •  Build a hero animation

   •  Use a hero navigation to navigate to another screen

Using Hero Animation
03:10

Once the dependency has been defined in pubspec.yaml, we need to declare a controller and a sequence animation object. Initialize these objects in the init state. Create a function to start the animation.

   •  Define a staggered animation and explain the sequence animation package

   •  Add the dependency to pubspec.yaml

   •  Build a function to start the animation

Using Staggered Animations
05:02
Test Your Knowledge
5 questions
+ User Accessibility Tips
5 lectures 27:45

In this video, we are going to define a responsive layout, and also create a widget that scales with the size of the phone, create a theme that scales with the size of the phone, and also deploy to more than two devices at once.

   •  Define a responsive layout

   •  Create a widget and theme that scales with the size of the phone

   •  Deploy the app to more than two devices at once

Preview 03:21

In this video, we are going to lock apps to portrait or landscape, discuss, expanded and flex widgets, and build an app that is compatible with portrait and landscape.

   •  Show how to lock apps to portrait and landscape

   •  Discuss expanded and flex widgets

   •  Build an app that is compatible with portrait and landscape

How to Adapt Screens for Portrait and Landscape?
04:30

In this video, we discuss tips on building apps for people with visual impairments, mention tools that could be used by people with visual impairments, and discuss a few examples on the same.

   •  Discuss tips on building apps for people with visual impairments

   •  Mention tools that could be used by people with visual impairments

   •  Discuss a few examples

Tips on Building Apps for People with Visual Impairments
04:07

In this video, we define localization, create JSON files to hold language assets, and build an app which can support multiple languages

   •  Define localization

   •  Create JSON files to hold language assets

   •  Build an app which can support multiple languages

How to Translate Your App to Another Language?
08:55

In this video, we are going to add the required dependencies to use the camera feature, access the main camera, initialize the camera controller, and build an app that takes pictures.

   •  Add the required dependencies to use the camera feature

   •  Access the main camera and initialize the camera controller

   •  Build an app that takes pictures

How to Use the Camera?
06:52
Test Your Knowledge
5 questions
+ Debugging and Testing Tips
5 lectures 26:53

In this video, we first need to define debugging, and then, we need to install DevTools before any debugging can be done. We then use the flutter inspector to examine the Flutter layout tree.

   •  Define debugging

   •  List tools and features to help debug Flutter applications

   •  Discuss DevTools and the Flutter Inspector

How to Debug Mobile Apps?
05:03

In this video, we first define what an OEM debugger is, and when to use it. Then, we define what a breakpoint is, and add them to the project.

   •  Explain OEM Debugging

   •  Debug with Android Gradle

   •  Use breakpoints to pause a running app

Using OEM Debugging
04:50

In this video, we discuss the different modes that can be used when compiling an app. These modes include debug, profile, and release. We then switch to Profile mode and afterwards switch to release mode.

   •  Examine the different build modes in Flutter

   •  Switch to Profile mode

   •  Switch to Release mode

How to use Flutter Build Modes?
03:07

In this video, we compare unit testing, widget testing, and integration testing. Then, we discuss unit testing in more detail, and perform a unit test. Then, we discuss widget testing, and then perform a widget test.

   •  Compare unit testing, widget testing, and integration testing

   •  Discuss unit testing and run a unit test

   •  Discuss widget testing and run a widget test

How to Test the App with Unit Testing and Widget Testing?
07:07

In this video, we first discuss what integration testing. Then, we create the two files necessary for testing. After this is complete, we can begin writing our tests.

   •  Discuss Integration testing

   •  Create test files

   •  Run an Integrated test

How to Test the App with Integration Testing?
06:46
Test Your Knowledge
5 questions
+ Best Practices During Development
6 lectures 23:00

In this video, we must first define Flavors in Flutter. Then, we will create an app configuration file which is placed in a separate resources folder. Finally, we create a build configuration for development and production, which would be created as separate files.

   •  Define Flutter Flavors

   •  Create an app configuration file

   •  Create a build configuration for development and production

How to Use Flavors in Flutter?
04:41

In this video, we must first obtain a launcher icon. In order to use this icon, pubspec.yaml will have to be configured. Then, we generate a keystore password, so that the app can be signed. We next enable proguard, review the app manifest, and build configuration. Finally, we build the app for release.

   •  Add a launcher icon and sign the app

   •  Enable Proguard, review app manifest, and build configuration.

   •  Build the app for release

How to Create a Build Release for Android?
04:48

In this video, we must first obtain an icon set using an online icon set generator. Then, we must add these icons to our project using Xcode. Then, we shall review Xcode project settings, and create a build archive.

   •  Use a free online icon generator to create the icon set

   •  Add these icons to the project

   •  Review Xcode project settings and then create a build archive

How to Create a Build Release for iOS?
04:17

Before we can use Fastlane, we should first find out how it can help you as a developer, by explaining what it is, and discussing the benefits. Then, we will setup Fastlane in our Android project.

   •  Explain what Fastlane is

   •  Discuss the benefits of using Fastlane

   •  Setup Fastlane in your project

Using Continuous Deployment for Fast Lane
05:43

We first need to create a build release for iOS. Then, run Fastlane init in the project directory. Then, we shall check the app identifier or bundle identifier, and add our developer account info.

   •  Create a build release for iOS

   •  Run Fastlane init in the project directory

   •  Check the app _identifier and add your account info

How to Setup Continuous Deployment with Flutter on iOS with Fastlane?
01:56

In this video, you’ll be wrapping up the course

   •  Learn the importance of your online presence

Moving Forward
01:35
Test Your Knowledge
5 questions
Requirements
  • Prior experience of Flutter, as well as Dart, is assumed.
Description

This course is a practical and to-the-point guide with each section covering exciting tips, tricks, and techniques to help you develop cross-platform and native applications with Flutter that you can apply in real-world scenarios to make your work easier.

In this course, you will learn to run Flutter on emulators and physical devices and use Flutter Inspector, which allows you to visualize and explore Flutter widget trees and helps you understand existing layouts and how to diagnose layout issues. You will also cover Material Design, use tips to enhance your UIs, and master techniques such as debugging, deployment, and user accessibility to improve your skillset and build advanced applications.

By the end of the course (and after mastering its best practices), you will be able to use Flutter to its fullest extent and will have taken a giant step forward in building advanced applications.

About the Author

Victor Wooding is a teacher and developer from Barbados. He has been teaching for ten years and coding for about eight. His first programming job came in 2011 when he was given the task of developing a website for the school he was attached to. Since then, he has developed skills in Photoshop, Illustrator, and Sketch and has learned Java, JavaScript, Swift, Dart, and Kotlin. Currently, he manages his website kodechamp and uploads video tutorials to YouTube under his name.

Who this course is for:
  • This course is for developers who want to perfect their skillset and build advanced cross-platform applications with the help of Flutter.