Pubspec.yaml in the Flutter application

Good day everyone, my name is Dmitriy. I’m a Flutter Developer at AppVesto. In this article, I will tell you why you need pubspec.yaml in a Flutter application. In advance, let me tell you that this article won’t be of much use to experienced Flutter users, as it’s more intended for newcomers to the field.

After creating a new web, mobile, or desktop application, we will always come across the pubspec.yaml file.

Let’s see what’s inside pubspec.yaml:

# General Section 
name: new_flutter_app 
description: flutter is amazing. 
publish_to: 'none' 
version: 1.0.0+1 
 
# Environment 
environment: 
  sdk: ">=2.7.0 <3.0.0" 
 
# Dependencies 
dependencies: 
  flutter: 
    sdk: flutter 
 
  cupertino_icons: ^1.0.0 
 
dev_dependencies: 
  flutter_test: 
    sdk: flutter 
 
# Flutter configurations 
flutter: 
 
  uses-material-design: true

As you may have noticed, it is divided into four sections. Now let’s take a look at each of them in turn.

General Section (General Information about the application)

At the top of the file, the name field tells you the package’s name and how you want to import the files into your application. An example is the import of the main.dart file, normally found in lib/:

import ‘package:new_flutter_app/main.dart’

You should also understand that after we change the name of our package, we have to change it in our imports. As an example take the new name old_flutter_app: import ‘package:old_flutter_app/main.dart’

Next, we see a line description. This is an optional field that allows you to add a description for the project. If we create a library for pub.dev, this description will be visible to other users when searching on this site description: A new Flutter project.

The next line publish_to, prevents the user from accidentally putting his application on pub.dev, but if you need to create a package for pub.dev, you remove this line: publish_to: ‘none’.

Let’s move on to the version line, which is responsible for version control. For mobile applications, this will be the version that will be available on the App Store and Google Play. You might have previously seen versions like 1.0.0 + 1, which means 1.0.0 version with build 1.

version: 1.0.0+1

The next field is the environment, which contains another field that allows us to add a version limitation Dart and Flutter. It means that the application will only run on a version higher than 2.7.0 or the same version, but not lower than 3.0.0.

environment: 
  sdk: ">=2.7.0 <3.0.0"

We can also specify ourselves the version of Flutter we wish to work on, but we will only have to work on that version, because we will get an error:

environment: 
  sdk: ">=2.7.0 <3.0.0" 
  flutter: "1.22.0"

Dependencies

The next section serves to connect packages to your application, so let’s look at how we can add the packages we need.
The first and easiest way is to add using pub.dev, where we choose the package we want and add it to our dependencies, for example, let’s take Provider, go to the website and go to the “Installing” tab, there we see the line we want:

Then copy it into our dependencies:

dependencies: 
  flutter: 
    sdk: flutter 
 
  cupertino_icons: ^1.0.0 
  provider: ^4.3.2+3

We use the flutter pub get command and see a successful installation of the package:
And already in the project we can see that this package is available to us:
import ‘package:provider/provider.dart’;
The second way is to add the package through the directory, mainly we will use it when we need to work with the package locally, to do this we go to the repository of the required package, clone and add it to our project, then in dependencies we add a string to connect the package:

dependencies: 
  flutter_test: 
    sdk: flutter 
  provider: 
    path: ../

After we saw the 2 main ways of adding packages to the project, let us see the difference between dependencies and dev_dependencies:

In dependencies, only the packages we need to compile the application later on while dev_dependencies is only used by our application during its development such as tests environments or code generating packages.

Flutter configurations

At the very bottom of our file we see the flutter section, where we already see the standard uses-material-design parameter:

flutter: 
  uses-material-design: true

Denotes that in this section we use the third-party resources we need, such as assents and fonts:

flutter: 
  uses-material-design: true 
 
  assets: 
    - assets/svg/dog.svg 
    - assets/svg/dialog/ 
 
    - family: SFProDisplay 
      fonts: 
        - asset: assets/SFPD/SFProDisplay-Black.ttf 
        - asset: assets/SFPD/SFProDisplay-Medium.ttf 
        - asset: assets/SFPD/SFProDisplay-Regular.ttf

As an example, you can see that for the one image we need, we add a field with the specified full name:
— assets/svg/dog.svg
We can also not specify a name, then we will take all elements that are in this path:
— assets/svg/dialog/

Conclusion

The file pubspec.yaml is responsible for versions, packages and adding third party resources, as we could see here, we have full control over our application. Because of the structure of this article, I might have missed some fields in this file, but we can always go to the documentation :)