Skip to main content ppwriters

#30DaysMasterFlutter

Day 13

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.

quotes ui

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

Resources

Enjoying? Tell your friends.

#30DaysMasterFlutter

Learn the basics of Flutter and Dart in 30 days! We provide a roadmap, resources, and project ideas to help you along your journey.

back to 30 Days to Master Flutter

Join our community on Discord to connect with fellow learners, share your progress, and get help with any questions you may have throughout the #30DaysMasterFlutter challenge. Join now and get started on your journey to mastering Dart and Flutter!

join now