Day 11: Assets – Images, Fonts & Custom Icons!

Working-with-Assets-Images-Fonts-Custom-Icons
Day 11: Working with Assets – Images, Fonts & Custom Icons

Day 11: Working with Assets – Images, Fonts & Custom Icons!

Welcome to Day 11 of your Flutter journey! So far, you’ve learned how to build interactive UIs, manage state, and create dynamic lists. Your apps are functional, but what about making them truly beautiful and unique?

Today, we’re diving into Assets! Assets are files that are bundled with your application and can include images, fonts, audio files, and more. They are crucial for giving your app its distinct look and feel.

We’ll focus on the most common visual assets: Images, Custom Fonts, and Custom Icons. Let’s make your app shine!

What are Assets and Why Use Them?

Assets are simply resources that your app needs at runtime. Instead of being generated by code, they are pre-made files that you include in your project.

  • Images: Logos, background graphics, product photos, user avatars.
  • Fonts: To give your text a unique style beyond the default system fonts.
  • Icons: Custom icons that aren’t available in Flutter’s built-in Icons class.

Using assets allows for rich, branded, and visually appealing user interfaces.

1. Adding Images: Local and Network

Images are fundamental to almost any app. Flutter supports both local images (bundled with your app) and network images (downloaded from the internet).

a) Local Images (Image.asset)

These are images you include directly in your Flutter project. Here, we simulate loading a local asset.

Local Asset Demo

Steps:

  1. Create an `assets` folder: In the root of your Flutter project, create a new folder (e.g., `assets/images`).
  2. Add your image: Place your image files (e.g., `logo.png`, `background.jpg`) into this folder.
  3. Declare assets in `pubspec.yaml`: This is crucial! You need to tell Flutter where to find your assets.
flutter: uses-material-design: true assets: – assets/images/ – assets/images/logo.png
Image.asset( ‘assets/images/logo.png’, width: 150, height: 150, fit: BoxFit.contain, )

b) Network Images (Image.network)

These images are fetched from a URL on the internet. Try pasting an image URL and click “Load Image”.

Image.network( ‘https://example.com/image.jpg’, loadingBuilder: (context, child, loadingProgress) { if (loadingProgress == null) return child; return Center( child: CircularProgressIndicator( value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null, ), ); }, errorBuilder: (context, error, stackTrace) { return Text(‘Failed to load image’); }, )

2. Integrating Custom Fonts

Flutter uses the system font by default, but custom fonts can greatly enhance your app’s branding and aesthetic.

Hello, Custom Font!

Steps:

  1. Create a `fonts` folder: In your project root, create `assets/fonts`.
  2. Add font files: Place your `.ttf` or `.otf` font files into this folder.
  3. Declare fonts in `pubspec.yaml`: Tell Flutter about each font family.
flutter: fonts: – family: Roboto fonts: – asset: assets/fonts/Roboto-Regular.ttf – asset: assets/fonts/Roboto-Bold.ttf weight: 700
Text( ‘Hello, Custom Font!’, style: TextStyle( fontFamily: ‘Roboto’, fontSize: 24, fontWeight: FontWeight.bold, color: Colors.deepPurple, ), )

3. Using Custom Icon Fonts or SVG Icons

While Flutter’s `Icons` class provides a vast collection, you might need highly specific icons for branding or unique features.

❤️ 🚀

These are standard emojis, but imagine them as custom icons!

a) Custom Icon Fonts

You can convert SVG icons into a font file and use them like Flutter’s built-in icons.

// Using font_awesome_flutter package FaIcon( FontAwesomeIcons.solidHeart, color: Colors.red, size: 30, ) // Custom icon font static const IconData myCustomIcon = IconData( 0xe900, fontFamily: ‘MyCustomIcons’ ); Icon(myCustomIcon, size: 40, color: Colors.blue)

b) SVG Icons

Use packages like `flutter_svg` for vector-based icons that scale perfectly.

// Using flutter_svg package SvgPicture.asset( ‘assets/icons/my_custom_icon.svg’, width: 50, height: 50, color: Colors.purple, )

Congratulations! You’ve learned how to enrich your Flutter apps with various assets!

You can now confidently display local images, load network images, integrate custom fonts, and use custom icons to create professional, branded applications.

Next up: Responsive Design – making your app look great on any device!

Share