Assets & Fonts

1. How to include assets in your app :

(Images for example)

1. Create an assets/images folder

• This should be located in the root of your project, in the same folder as your pubspec.yaml file.

• You don't have to call it assets or images. You don't even need to make images a subfolder. Whatever name you use, though, is what you will regester in the pubspec.yaml file.

2. Add your image to the new folder

You can just copy your image into assets/images. The relative path of heart.jpg, for example, would be assets/images/lake.jpg.

3. Register the assets folder in pubspec.yaml

• Open the pubspec.yaml file that is in the root of your project.

• Add an assets subsection to the flutter section like this:

flutter:

  assets:

    - assets/images/heart.jpg




• If you have multiple images that you want to include then you can leave off the file name and just use the directory name (include the final / ):

flutter:

  assets:

    - assets/images/



4. Use the image in code

Get the asset in an Image widget with Image.asset('assets/images/heart.jpg')

import 'package:flutter/material.dart';

 

void main() => runApp(MyApp());

 

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        title: 'Asset Image Test',

        theme: ThemeData(

          primarySwatch: Colors.blue,

          visualDensity: VisualDensity.adaptivePlatformDensity,

        ),

        home: HomeWidget());

  }

}

 

class HomeWidget extends StatelessWidget {

  const HomeWidget({Key key}) : super(key: key);

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(

          title: Text("Asset Image"),

        ),

        body: Image.asset("assets/images/heart.jpg"));

  }

}

 



5. Restart your app

When making changes to pubspec.yaml, you may often need to completely stop the app and restart it again, especially when adding assets. Otherwise you may get a crash.

Running the app now you should have this:






2. Use a custom font :


1. Import the font files.

To work with a font, import the font files into the project. It’s common practice to put font files in a fonts or assets/fonts folder at the root of a Flutter project.

Supported font formats : .ttf & .otf

Visit Google Fonts and choose the font that you like.

2. Declare the font in the pubspec.

Once you’ve identified a font, tell Flutter where to find it. You can do this by including a font definition in the pubspec.yaml file.

flutter:

  fonts:

    - family: Audiowide

      fonts:

        - asset: assets/fonts/Audiowide-Regular.ttf




The family determines the name of the font, which you use in the fontFamily property of a TextStyle object.

The asset is a path to the font file, relative to the pubspec.yaml file.

You have two options for how to apply fonts to text: as the default font or only within specific widgets.

3. Set a font as the default.

To use a font as the default, set the fontFamily property as part of the app’s theme. The value provided to fontFamily must match the family name declared in the pubspec.yaml.

      MaterialApp(

        title: 'Custom Font',

        theme: ThemeData(fontFamily: 'Audiowide'),

        home: HomeWidget()

      );





4. Use a font in a specific widget.

If you want to apply the font to a specific widget, such as a Text widget, provide a TextStyle to the widget.

        Text(

          "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",

          style: TextStyle(fontFamily: "Audiowide"),

        )