Assets: Images and Fonts

Image and font assets play a crucial role in the design and functionality of Flutter applications. They contribute to a visually appealing UI, improve overall design, and can establish the tone and branding of the app. By optimizing images and selecting appropriate fonts, app developers can enhance the user experience and differentiate their app from others in the market.

Project - Quotes UI

Build the following UI, use two custom fonts (choose any from Google Fonts or use your own), use seperate font for the quote and the author name.

Tips: Try once without using any packages, and again using the google_fonts package.

By the end of the day, you should have a better understanding of the importance of image and font assets in Flutter apps. You will have learned how to add and display different types of image assets, and how to add and use custom fonts to your apps.

Tips

• Adding Image Assets

  • Create a directory in your project’s root directory to store your image assets.
  • Add your image files (e.g. PNG, JPEG, or GIF files) to this directory.
  • In your app’s pubspec.yaml file, specify the location of the image assets directory and the images you want to use, like so:

flutter:
  assets:
    - assets/images/

• To display an image in your app, use the Image widget and specify the location of the image file, like so:

Image.asset('assets/images/my_image.png')

Alternatively, you can use the NetworkImage widget to display an image from a URL or the AssetImage widget to display an image from an asset bundle.

• Adding Custom Fonts
  • Create a directory in your project’s root directory to store your font files.
  • Add your font files (e.g. TrueType or OpenType font files) to this directory.
  • In your app’s pubspec.yaml file, specify the location of the font files directory and the fonts you want to use, like so:

flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: assets/fonts/my_custom_font.ttf
          weight: 400

• To use a custom font in your app, specify the font family and weight when creating a TextStyle, like so:

Text(
  'Hello, World!',
  style: TextStyle(
    fontFamily: 'MyCustomFont',
    fontWeight: FontWeight.w400,
  ),
)

More projects

• Using image assets
• Using custom fonts

Resources

• Flutter documentation on adding assets
• Image Widget
• Image.asset
• Flutter documentation on using custom font
• Google Fonts - free custom fonts
• Fonts in Pubspec
• Google Fonts package

Enjoying? Tell your friends.