Assets and Packages In Flutter

Assets And Packages In Flutter

Assets :

Assets are components of the app that are not coded by us but are required in the app, such as images and fonts.

Adding Assets

To add assets in our app we will follow these steps :

• First create an assets folder in the root directory of the app, and add the image(s) or fonts required by your app in this folder
  
• Now open the pubspec.yaml file. This file specifies all the dependencies, assets, etc. which are needed for your app. Here is the code for the pubspec.yaml file:

  name: myapp
  description: A new Flutter project.
  
  publish_to: "none"
  
  version: 1.0.0+1
  
  environment:
    sdk: ">=2.7.0 <3.0.0"
  
  dependencies:
    flutter:
      sdk: flutter
  
    cupertino_icons: ^1.0.1
  
  dev_dependencies:
    flutter_test:
      sdk: flutter
    integration_test:
      sdk: flutter
  
  flutter:
    uses-material-design: true
  
    assets:
      - assets/sunflower.jpeg

Importing Assets

To use the assets, we must use the necessary Widgets to display them. For example:

Image.asset("assets/sunflower.jpeg"),

Packages

A package is a namespace that contains a group of similar types of classes, interfaces, and sub-packages. We can think of packages as similar to different folders on our computers where we might keep movies in one folder, images in another folder, software in another folder, etc. In Flutter, Dart organizes and shares a set of functionality through a package. Flutter always supports shared packages, which is contributed by other developers to the Flutter and Dart ecosystem. The packages allow us to build the app without having to develop everything from scratch.

Adding Packages

To add packages to our app, we add the necessary code to the pubspec.yaml file, in the dependencies section as follows. Here we are adding the package url_launcher as an example.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.1
  url_launcher: ^5.7.10

There is an easier way to add packages to pubspec.yaml in VSCode. For this, you must install the Pubspec Assist plugin from the VSCode Marketplace. To use this plugin, use the keyboard shortcut Ctrl + Shift + P. This opens up a command line at the top of the screen. Type Pubspec Assist: Add/update dependencies and press Enter. You will be prompted to type the name of the package you want to include in the app. This command will automatically fetch the latest version of the package. Head over to pub.dev to explore different packages.
Another way to add packages is to type in the package name, without mentioning the version. This instructs pub to automatically fetch the latest version of the package.

cupertino_icons:
url_launcher:

But, for both of these methods to work, you need to be connected to the Internet.

Importing Packages

To use these packages, we have to import them in our main.dart file.

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

After importing the packages, you can now use them as you like. For example, to use the url_launcher package, we add the following code to the Column widget in the children parameter.

IconButton(
  icon: Icon(Icons.info),
    onPressed: () {
      launch("https://flutter.dev/");
    },
),

Here, an IconButton widget is added. Therefore, on clicking the widget, the launch() method redirects to the flutter.dev website.