Learn Assets, Fonts, App Themes

Definition

In Flutter, assets are external files such as images, fonts, or other resources that your app uses at runtime. These files are bundled with your app and accessed through asset paths.

To display images in your Flutter app, you first need to add them as assets in your project. Place your image files (like PNG or JPG) in a folder, often named assets/images, inside your project directory. Then, declare these images in your pubspec.yaml file under the assets section. This step makes Flutter aware of the files so you can use them in your app's widgets.

main.dart


              12345678910111213141516171819
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Asset Image Example'),
        ),
        body: Center(
          child: Image.asset('assets/images/flutter_logo.png'),
        ),
      ),
    );
  }
}

To use custom fonts, download the font files (such as .ttf or .otf) and place them in a folder like assets/fonts within your project. Next, update your pubspec.yaml file to declare the fonts under the fonts section. After declaring the font, you can set it in your widgets using the style property of Text widgets.

main.dart


              12345678910111213141516171819202122232425
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'Lobster',
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Font Example'),
        ),
        body: Center(
          child: Text(
            'Hello with Lobster Font!',
            style: TextStyle(fontSize: 32),
          ),
        ),
      ),
    );
  }
}

Themes in Flutter let you define colors, fonts, and visual styles for your entire app using the ThemeData class. By setting properties like primarySwatch, accentColor, and fontFamily in ThemeData, you can ensure a consistent look and feel across all screens and widgets.

Note

Keep your assets organized in clearly named folders (like assets/images or assets/fonts). This makes your project easier to maintain and helps prevent mistakes when referencing asset paths in your code.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 3

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Swipe to show menu

Definition

In Flutter, assets are external files such as images, fonts, or other resources that your app uses at runtime. These files are bundled with your app and accessed through asset paths.

main.dart


              12345678910111213141516171819
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Asset Image Example'),
        ),
        body: Center(
          child: Image.asset('assets/images/flutter_logo.png'),
        ),
      ),
    );
  }
}

main.dart


              12345678910111213141516171819202122232425
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'Lobster',
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Font Example'),
        ),
        body: Center(
          child: Text(
            'Hello with Lobster Font!',
            style: TextStyle(fontSize: 32),
          ),
        ),
      ),
    );
  }
}

Note

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 3