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 in the app.

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

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.