Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
In this codelab, you'll build and test a simple Flutter app. The app will use the Provider package for managing state.
What you'll learn
- How to create a unit test to test widgets using the widget testing framework
- How to create an integration test to test the app's UI and performance using Flutter Driver
- How to test data classes (providers) with the help of unit tests
This video is a tutorial on how to develop and test ios app without mac and also run hot reload on ios device.If your ios device is not detected by cydia imp. Flutter is a cross-platform mobile application development framework that enables to develop iOS and Android apps from the same source code. However, Apple's native frameworks used for developing iOS apps cannot compile on other platforms like Linux or Windows. Google LLC today rolled out a new stable release of its Flutter development tool that adds support for iOS 14, the latest version of Apple Inc. 's smartphone operating system, and includes several And.
What you'll build
In this codelab, you'll start by building a simple application with a list of items. We provide the source code for you so you can get right to the testing. The app supports the following operations:
- Adding the items to favorites
- Viewing the list of favorites
- Removing items from the favorites list
Once the app is complete, you will write the following tests:
| GIF of the app running on Android |
What would you like to learn from this codelab?
I'm new to the topic, and I want a good overview.I know something about this topic, but I want a refresher.I'm looking for an example code to use in my project.I'm looking for an explanation of something specific.You need two pieces of software to complete this lab: the Flutter SDK, and an editor.
You can run this codelab using any of the following devices:
- A physical device (Android or iOS) connected to your computer and set to developer mode.
- The iOS simulator. (Requires installing Xcode tools.)
- The Android emulator. (Requires setup in Android Studio.)
Create a new Flutter app & update dependencies
This codelab focuses on testing a Flutter mobile app. You will quickly create the app to be tested using source files that you copy and paste. The rest of the codelab then focuses on learning different kinds of testing.
Create a simple templated Flutter app, using the instructions in Getting Started with your first Flutter app. Name the project testing_app
(instead of myapp
). You'll be modifying this starter app to create the finished app.
Note: If you don't see 'New Flutter Project' as an option in your IDE, make sure that you have the plugins installed for Flutter and Dart.
In your IDE or editor, open the pubspec.yaml
file. Add the following dependencies marked as new
, then save the file. (You can delete the comments to make the file more readable.)
- Click the Pub get button in your IDE or, at the command line, run
flutter pub get
from the top of the project.
If this results in an error, make sure that the indentation in your dependencies
block is exactly the same as shown above, using spaces (not tabs). YAML files are sensitive to white space.
Next, you'll build out the app so that you can test it. The app contains the following files:
lib/main.dart
- the main file where the app startslib/screens/home.dart
- creates a list of itemslib/screens/favorites.dart
- creates the layout for the favorites listlib/models/favorites.dart
- creates the model class for favorites list
Replace the contents of lib/main.dart
Replace the contents of lib/main.dart
with the following code:
Add the Home page in lib/screens/home.dart
Create a new directory, screens
, in the lib
directory and, in that newly created directory, create a new file named home.dart
. In lib/screens/home.dart
add the following code:
Add the Favorites page in lib/screens/favorites.dart
In the lib/screens
directory create another new file named favorites.dart
. In that file add the following code:
Lastly, create the Favorites
model in lib/models/favorites.dart
Create a new directory, models
and, in that directory, create a new file named favorites.dart
. In that file add the following code:
The app is now complete, but untested.
Run the app by clicking the Run icon in the editor . The first time you run an app, it can take a while. The app is faster in later steps. It should look like the following screenshot:
The app shows a list of items. Tap the heart-shaped icon on any row to fill in the heart and add the item to the favorites list. The Favorites button on the AppBar
takes you to a second screen containing the favorites list.
The app is now ready for testing. You'll start testing it from the next step.
You'll start by unit testing the favorites
model. What is a unit test? A unit test verifies that every individual unit of software (often a function) performs its intended task correctly.
All the test files in a Flutter app (except for those using Flutter Driver) are placed in the test
directory.
Note: These instructions use the command line to run the tests. However, you can also use the options provided by VS Code and Android Studio for running unit and widget tests on your application.
Remove test/widget_test.dart
Before you begin testing, delete the widget_test.dart
file. You'll be adding your own test files.
Create a new test file
First, you'll test the add()
method in the Favorites
model to verify that a new item gets added to the list, and that the list reflects the change. By convention, the directory structure in the test
directory mimics that in the lib
directory and the Dart files have the same name, but appended with _test
.
Create a models
directory in the test
directory. In this new directory, create a favourites_test.dart
file with the following content:
The Flutter testing framework allows you to bind similar tests related to each other in a group. There can be multiple groups in a single test file intended to test different parts of the corresponding file in the /lib
directory.
The test()
method takes two positional parameters: the description
of the test and the callback
where you actually write the test.
Test removing an item from the list. Copy and paste the following test in the same test group. Add the following code to the test file:
Run the test
If your app is running in your emulator or device, close it before continuing.
At the command line, navigate to the project's root directory and enter the following command:
If everything works, you should see a message similar to the following:
The complete test file: test/models/favorites_test.dart
.
Tip: You can run all the tests in the test
directory at once by running:
$ flutter test
For more information on unit testing, visit An introduction to unit testing.
In this step you'll be performing widget tests. Widget testing is unique to Flutter, where you can test each and every individual widget of your choice. This step tests the screens (HomePage
and FavoritesPage
) individually.
Widget testing uses the testWidget()
function instead of the test()
function. It also takes two parameters: the description,
and the callback
. But here, the callback takes a WidgetTester
as an argument.
Widget tests use TestFlutterWidgetsBinding
, a class that provides the same resources to your widgets that they would have in a running app (information about screen size, the ability to schedule animations, and so on), but without the actual app. Instead, a virtual environment is used to run the widget, measure it, and so on, then tests the results. Here, pumpWidget
kicks off the process by telling the framework to mount and measure a particular widget just as it would in a complete application.
The widget testing framework provides finders to find widgets (for example, text()
, byType()
, byIcon()
) and also matchers to verify the results. Buy undertale pc.
Start by testing the HomePage
widget.
Create a new test file
The first test verifies whether scrolling the HomePage
works properly.
Create a new file in the test
directory and name it home_test.dart
. In the newly created file, add the following code:
The createHomeScreen()
function is used to create an app that loads the widget to be tested in a MaterialApp, wrapped into a ChangeNotifierProvider. The HomePage widget needs both of these widgets to be present above it in the widget tree so it can inherit from them and get access to the data they offer. This function is passed as a parameter to the pumpWidget()
function.
Next, test whether the framework can find a ListView
rendered onto the screen.
Note: This test is supposed to be run before the scrolling test as you are performing actions on the ListView
in it. However, to give you a general idea of how widgets tests are written we wrote the scrolling test first.
Add the following code snippet to home_test.dart
:
Run the test
You can run widget tests in the same way as unit tests, but using a device or an emulator allows you to watch the test running. It also gives you the ability to use hot restart.
Plug-in your device or start your emulator.
From the command line, navigate to the project's root directory and enter the following command:
If everything works you should see an output similar to the following:
Next, you'll make changes to the test file and enter Shift + R
to hot restart the app and re-run all the tests.
Add more tests to the group that tests the HomePage widgets. Copy the following test to your file:
This test verifies that tapping the IconButton
changes from Icons.favorite_border
(an open heart) to Icons.favorite
(a filled-in heart) and then back to Icons.favorite_border
when tapped again.
Enter Shift + R
. This hot restarts the app and re-runs all the tests.
The complete test file: test/home_test.dart
.
Use the same process to test the FavoritesPage
with the following code. Follow the same steps and run it.
This test verifies whether an item disappears when the close (remove) button is pressed.
For more information on widget testing, visit:
- The
flutter_test
library - The
WidgetTester
class
The Flutter Driver is used to test how individual pieces work together as a whole. This is Flutter's version of Selenium WebDriver (generic web), Protractor (Angular), Espresso (Android), or Earl Gray (iOS).
Flutter Driver tests require the flutter_driver
dev_dependency
, which you added to pubspec.yaml
when setting up the project in the Getting started step.
Instrument the app
In order to write a Flutter Driver test, you must first instrument the app. Instrumenting the app means configuring the app so that the driver can access its GUI and functions for the purpose of creating and running an automated test. Flutter driver tests are placed in a directory called test_driver
. In this step, you'll add the following files for integration testing:
- test_driver/app.dart - Instruments the app
- test_driver/app_test.dart - Runs the actual tests on the app
Create a directory called test_driver
in the project's root directory. In that newly created directory, create an app.dart
file and add the following code:
This code enables the Flutter Driver extension and then runs the app's main()
function. You can also call runApp()
with any widget you are interested in testing.
Write the test
Create a new file and name it app_test.dart
. The name of the test file must correspond to the name of the file that contains the instrumented app, with _test
added at the end. Therefore, in this example, name it test_driver/app_test.dart
.
The setUpAll()
function connects the app to the driver extension that you enabled in app.dart
. The tearDownAll()
function closes the connection after the tests have completed.
Next, test the scrolling performance of the app and record it using the traceAction()
function.
Paste the following code into the test group you just created:
This test scrolls through the list of items really fast and then scrolls all the way up. The traceAction()
function records the actions and generates a Timeline
object out of it. Then, the Timeline
is converted into a TimelineSummary
and stored to disk in the form of JSON summaries.
Next, test the add
and remove
operations and record their performance in a similar way.
Paste the following test into the same group:
Run the test
Flutter Run Ios
Plug-in your device or start your emulator.
At the command line, navigate to the project's root directory and enter the following command:
Tip:
- It is recommended that you always run performance tests on a physical Android/iOS device in profile mode as it gives you the best understanding of your app's performance.
- Using
--profile
on iOS requires you to have a valid Team ID to sign the code. You can remove this option from the command or use an Android device. - The
--trace-startup
option can be used to avoid flushing older timeline events when the timeline gets long.
Flutter Ios App
If everything works, you should see an output similar to the following:
After the test completes successfully, the build
directory at the root of the project should contain two timeline summary files and two timeline files:
scrolling.timeline_summary.json
andfavorites_operations.timeline_summary.json
contain the summary. Open the files with any text editor to view the information. With a more advanced setup, you could save a summary every time the test runs and create a graph of the results.scrolling.timeline.json
andfavorites_operations.timeline.json
contain the complete timeline data. Open the files using the Chrome browser's tracing tools found atchrome://tracing
. The tracing tools provide a convenient interface for inspecting the timeline data to discover the source of a performance issue.
The complete test file: test_driver/app_test.dart
.
For more details on Flutter Driver (Integration) testing, visit:
You've completed the codelab and have learned different ways to test a Flutter app.
What you've learned
- How to test widgets using the Widget testing framework
- How to test the app's UI using Flutter Driver
- How to test the app's performance using Flutter Driver
- How to test providers with the help of unit tests
To learn more about testing in Flutter, visit Is el capitan good.