Using Flutter Packages

Packages are certainly one of the greatest features that Flutter offers. Both the Flutter team and third-party developers add and maintain packages in the Flutter ecosystem daily. This makes building apps much faster and more reliable, as you can focus on the specific features of your app while leveraging classes and functions that have been created and tested by other developers.

Packages are published at https://pub.dev. This is the hub where you can go to search for packages and verify their platform compatibility (iOS, Android, web, and desktop), popularity, versions, and use cases. Chances are that you’ve already used pub.dev several times before reading this chapter.

Here is the current home of the pub.dev repository, with the search box at the center of the screen:

Figure 11.1: pub.dev home page

In this chapter, we will cover the following topics:

• Importing packages and dependencies
• Using dev packages
...

Technical requirements

To follow along with the recipes in this chapter, you should have the following software installed on your Windows, Mac, Linux, or ChromeOS device:

• The Flutter SDK
• The Android SDK when developing for Android
• macOS and Xcode when developing for iOS
• An emulator or simulator, or a connected mobile device enabled for debugging
• Your favorite code editor, with the Flutter/Dart extensions installed

You’ll find the code for the recipes in this chapter on GitHub at https://github.com/PacktPublishing/Flutter-Cookbook/tree/master/chapter_11.

Importing packages and dependencies

This recipe shows you how to get packages and plugins from https://pub.dev and integrate them into your app’s pubspec.yaml file.

Specifically, you will check the version and package name from pub.dev, import a package into the pubspec.yaml file in your project, download it, and use it in your classes.

By the end of this recipe, you will know how to import any package available in the pub.dev hub into your apps.

Getting ready

In this recipe, you will create a new project. There are no prerequisites to follow along.

How to do it...

When you install a package from pub.dev, the process is very simple. For this example, we will install the http package and connect to a Git repository:

1. Create a new Flutter project, called plugins.
2. Go to https://pub.dev.
3. In the search box, type http.
4. Click on the http package on the results page.
5. From the http package’s home page, click on the Installing...

Using dev dependencies

In Flutter, dev dependencies are packages that you only need during development, and not in production. In this recipe you will see how to add and use a common Flutter linting package, unsurprisingly called lint.

Getting ready

In this recipe, you will use the project created in the previous one: Importing packages and dependencies.

How to do it...

In this recipe you will add the lint package to your Flutter project and configure it to use linting rules:

1. Add the latest version of the lint package as a dev dependency in your pubspec.yaml, and remove any other linting packages you may find there:

   dev_dependencies: 
     flutter_test: 
       sdk: flutter 
     lint: ^2.0.0
   

2. In the console, run flutter pub get to download the package.
3. If required, create a new file, called analysis_options.yaml, in the root of your project.
4. Alternatively, open analysis_options.yaml, and edit its content so that it only contains...

Creating your own package (part 1)

While using packages made by other developers can really boost your app creation speed, sometimes you need to create your own packages. Some of the main reasons for creating a new package are as follows:

• Modularity
• Code reuse
• Encapsulation
• Low-level interaction with a specific environment

Packages help you write modular code, as you can include several files and dependencies in a single package, and use it in your app. At the same time, reusing code is made extremely simple, as packages can be shared among different apps. Also, when you make changes to a package, you only need to make them in one place, and they will automatically cascade to all the apps that point to that package.

There is a special type of package, called a plugin, that contains platform-specific implementations for iOS, Android, web, or desktop. You generally create a plugin when you need to interact with specific low-level features of...

Creating your own package (part 2)

The previous recipe works when your package is contained within your project. In this second part of the Creating your own package recipe, you will see how to create a package made of multiple files and depend on a Git repository in the main project.

Getting ready

You should have completed the previous recipe, Creating your own package (part 1), before following this one.

How to do it...

For this recipe, first, we will separate the functions we created in the area.dart file into two separate files, using the part and part of keywords. Then, for the dependency, we will use a Git repository instead of a package inside the project’s folder:

1. In your package’s lib folder, create a new file, called rectangle.dart.
2. Still there, create another file, called triangle.dart.
3. In the rectangle.dart file, at the top of the file, specify that this is part of the area package:

   part of area;
   

...

Creating your own package (part 3)

If you want to contribute to the Flutter community, you can share your packages in the pub.dev repository. In this recipe, you will see the steps required in order to achieve this.

Getting ready

You should have completed the previous recipes, Creating your own package (part 1) and Creating your own package (part 2).

How to do it...

Let’s look at the steps to publish a package to pub.dev:

1. In a terminal window, move to the area directory:

   cd packages/area
   

2. Run the flutter pub publish --dry-run command. This will give you some information about the changes required before publishing.
3. Copy the BSD license, available at the following link: https://opensource.org/licenses/BSD-3-Clause.

   BSD licenses are open source licenses that allow almost any legitimate use of the software, cover the author from any liability, and only add minimal restrictions on the use and distribution of the software...

Adding Google Maps to your app

Most packages and plugins don’t require any configuration other than typing flutter pub add in a Terminal window. But a few plugins require additional steps, like getting API keys or adding platform-specific configurations. One of these plugins is also one of the most useful: the Google Maps plugin. This recipe shows you how to add it to a Flutter app.

Specifically, you will see how to get a Google Maps API key, how to add Google Maps to your Android and iOS project, and how to show a map on the screen.

By the end of this recipe, you’ll know how to integrate Google Maps into your projects.

Getting ready

In this recipe, you will create a new project.

How to do it...

In this recipe, you will add Google Maps to your app. Follow the instructions below:

1. Create a new Flutter app, and call it map_recipe.
2. Add the Google Maps package dependency to the project’s pubspec.yaml file. The name of the package...

Using location services

In the previous recipe, you learned how to show and position a map using Google Maps, with fixed coordinates. In this recipe, you will find the current position of a user so that the map will change based on the user’s position.

Specifically, you will add the location package to your project, retrieve the coordinates of the device’s position, and set the map’s position to the coordinates you have retrieved.

By the end of this recipe, you will understand how to leverage the user’s location in your apps.

Getting ready

You should have completed the previous recipe, Adding Google Maps to your app, before following this one.

How to do it...

There’s a Flutter package called location that you can use to access the platform-specific location services:

1. Add the latest version of the location package in the dependencies to the pubspec.yaml file:

   location: ^4.4.0
   

2. On Android, add...

Adding markers to a map

In this recipe, you will see how to make a query to the Google Maps Places service and add markers to the map in the app. Specifically, you will search for all restaurants near the user’s location within a radius of 1,000 meters.

By the end of this recipe, you will know how to query the huge Google Places archive and point to any place in your maps with a marker.

Getting ready

You should have completed two previous recipes from this chapter, Adding Google Maps to your app and Using location services, before following this one.

How to do it...

To add markers to the map in your project, perform the following steps:

1. Navigate to the Google Maps API console and enable the Places API for your app. Make sure that your Flutter Maps project is selected, and then click the Enable button.
2. Import the http package to your pubspec.yaml.
3. At the top of the main.dart file, add two new imports, one for http and another for...

Summary

In this chapter, you’ve learned how to import packages into your project, leveraging community-developed tools and saving you time and effort.

You’ve also delved into the specifics of using development packages, which allow you to access features that are useful during development but not required in production.

Throughout the chapter, you’ve seen how to create your own package. First, you set up the basic structure of your package and learned about the necessary files and directories. Then you implemented the core functionality of your package, and finally, you saw how to share it with others.

You saw how to integrate Google Maps into your apps, which allows you to display interactive maps. You used the location services and learned how to add markers to a map, giving your users the ability to visualize and interact with specific points of interest.