Flutter Tips, Tricks, and Techniques
- 2 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
- Prior experience of Flutter, as well as Dart, is assumed.
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
- This course is for developers who want to perfect their skillset and build advanced cross-platform applications with the help of Flutter.