Assets: Imagens e Fontes

Assets são recursos estáticos que fazem parte da aplicação, como imagens, fontes, ícones e outros arquivos. No Flutter, esses recursos precisam ser declarados no arquivo pubspec.yaml para serem utilizados.

Estrutura de Assets

A estrutura recomendada para organizar assets:

projeto/
  assets/
    images/
      logo.png
      background.jpg
    fonts/
      minha_fonte.ttf

Configurando Assets no pubspec.yaml

Para usar assets, você precisa declará-los no arquivo pubspec.yaml:

flutter:
  assets:
    - assets/images/
    - assets/images/logo.png
  
  fonts:
    - family: MinhaFonte
      fonts:
        - asset: assets/fonts/minha_fonte.ttf

Assets de imagens

Para adicionar imagens, declare a pasta ou arquivo específico:

flutter:
  assets:
    - assets/images/
    - assets/images/logo.png
    - assets/images/background.jpg

Assets de fontes

Para adicionar fontes customizadas:

flutter:
  fonts:
    - family: Outfit
      fonts:
        - asset: assets/fonts/outfit/Outfit-Regular.ttf
        - asset: assets/fonts/outfit/Outfit-Bold.ttf
          weight: 700
        - asset: assets/fonts/outfit/Outfit-Light.ttf
          weight: 300

Usando Imagens

Image.asset

Para exibir imagens dos assets:

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

Image.asset(
  'assets/images/background.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

Exemplo completo

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Imagens')),
      body: Center(
        child: Image.asset(
          'assets/images/logo.png',
          width: 200,
          height: 200,
        ),
      ),
    ),
  ));
}

Usando Fontes Customizadas

Configurando no MaterialApp

MaterialApp(
  theme: ThemeData(
    fontFamily: 'Outfit',
    textTheme: TextTheme(
      headlineLarge: TextStyle(fontFamily: 'Outfit'),
      bodyLarge: TextStyle(fontFamily: 'Outfit'),
    ),
  ),
  home: MinhaTela(),
)

Usando em Text widgets

Text(
  'Texto com fonte customizada',
  style: TextStyle(
    fontFamily: 'Outfit',
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
)

Exemplo completo

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      fontFamily: 'Outfit',
    ),
    home: Scaffold(
      body: Center(
        child: Text(
          'Texto com fonte Outfit',
          style: TextStyle(
            fontFamily: 'Outfit',
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
  ));
}

Download de Assets para Exercícios

Para praticar os exercícios desta seção, você pode baixar os seguintes arquivos:

Fontes

Imagens da Nalla

Nalla - 10 fotos (ZIP)

Nota: Após baixar os arquivos, crie a estrutura de pastas assets/images/ e assets/fonts/ no seu projeto Flutter e coloque os arquivos nas respectivas pastas.

Exercícios

Configuração de assets: Baixe as imagens da Nalla e configure o pubspec.yaml para incluir a pasta assets/images/. Crie um aplicativo que exiba uma das imagens usando Image.asset.
Múltiplas imagens: Configure o projeto para usar múltiplas imagens. Crie um aplicativo que exiba três imagens diferentes em uma Column ou Row.
Fonte customizada: Baixe a fonte Outfit e configure o pubspec.yaml para incluir a fonte. Crie um aplicativo que use a fonte Outfit em todos os textos.
Fonte com diferentes pesos: Configure a fonte Outfit com diferentes pesos (Regular, Bold, Light). Crie um aplicativo que exiba textos usando diferentes pesos da mesma fonte.
Galeria de imagens: Crie um aplicativo que exiba todas as 10 imagens nalla em um GridView com 2 colunas. Cada imagem deve ter um tamanho fixo e usar BoxFit.cover.

Soluções

Ver solução do exercício 1

pubspec.yaml:

name: meu_app
description: Aplicativo com assets
version: 1.0.0+1

dependencies:
  flutter:
    sdk: flutter

flutter:
  uses-material-design: true
  assets:
    - assets/images/

lib/main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Imagem Asset')),
      body: Center(
        child: Image.asset(
          'assets/images/nalla-1.jpg',
          width: 300,
          height: 300,
          fit: BoxFit.cover,
        ),
      ),
    ),
  ));
}

Importante: Após adicionar assets no pubspec.yaml, execute flutter pub get no terminal.

Ver solução do exercício 2

pubspec.yaml:

name: meu_app
description: Aplicativo com múltiplas imagens
version: 1.0.0+1

dependencies:
  flutter:
    sdk: flutter

flutter:
  uses-material-design: true
  assets:
    - assets/images/

lib/main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Múltiplas Imagens')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            'assets/images/nalla-1.jpg',
            width: 200,
            height: 150,
            fit: BoxFit.cover,
          ),
          SizedBox(height: 10),
          Image.asset(
            'assets/images/nalla-2.jpg',
            width: 200,
            height: 150,
            fit: BoxFit.cover,
          ),
          SizedBox(height: 10),
          Image.asset(
            'assets/images/nalla-3.jpg',
            width: 200,
            height: 150,
            fit: BoxFit.cover,
          ),
        ],
      ),
    ),
  ));
}

Ver solução do exercício 3

pubspec.yaml:

name: meu_app
description: Aplicativo com fonte customizada
version: 1.0.0+1

dependencies:
  flutter:
    sdk: flutter

flutter:
  uses-material-design: true
  fonts:
    - family: Outfit
      fonts:
        - asset: assets/fonts/outfit/Outfit-Regular.ttf
        - asset: assets/fonts/outfit/Outfit-Bold.ttf
          weight: 700
        - asset: assets/fonts/outfit/Outfit-Light.ttf
          weight: 300

lib/main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      fontFamily: 'Outfit',
      textTheme: TextTheme(
        headlineLarge: TextStyle(fontFamily: 'Outfit'),
        bodyLarge: TextStyle(fontFamily: 'Outfit'),
      ),
    ),
    home: Scaffold(
      appBar: AppBar(title: Text('Fonte Outfit')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Título Grande',
              style: TextStyle(
                fontFamily: 'Outfit',
                fontSize: 32,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20),
            Text(
              'Texto normal com fonte Outfit',
              style: TextStyle(
                fontFamily: 'Outfit',
                fontSize: 18,
              ),
            ),
          ],
        ),
      ),
    ),
  ));
}

Ver solução do exercício 4

pubspec.yaml:

name: meu_app
description: Aplicativo com diferentes pesos de fonte
version: 1.0.0+1

dependencies:
  flutter:
    sdk: flutter

flutter:
  uses-material-design: true
  fonts:
    - family: Outfit
      fonts:
        - asset: assets/fonts/outfit/Outfit-Regular.ttf
          weight: 400
        - asset: assets/fonts/outfit/Outfit-Bold.ttf
          weight: 700
        - asset: assets/fonts/outfit/Outfit-Light.ttf
          weight: 300
        - asset: assets/fonts/outfit/Outfit-Medium.ttf
          weight: 500

lib/main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      fontFamily: 'Outfit',
    ),
    home: Scaffold(
      appBar: AppBar(title: Text('Pesos de Fonte')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Outfit Light (300)',
              style: TextStyle(
                fontFamily: 'Outfit',
                fontSize: 24,
                fontWeight: FontWeight.w300,
              ),
            ),
            SizedBox(height: 10),
            Text(
              'Outfit Regular (400)',
              style: TextStyle(
                fontFamily: 'Outfit',
                fontSize: 24,
                fontWeight: FontWeight.w400,
              ),
            ),
            SizedBox(height: 10),
            Text(
              'Outfit Medium (500)',
              style: TextStyle(
                fontFamily: 'Outfit',
                fontSize: 24,
                fontWeight: FontWeight.w500,
              ),
            ),
            SizedBox(height: 10),
            Text(
              'Outfit Bold (700)',
              style: TextStyle(
                fontFamily: 'Outfit',
                fontSize: 24,
                fontWeight: FontWeight.w700,
              ),
            ),
          ],
        ),
      ),
    ),
  ));
}

Ver solução do exercício 5

pubspec.yaml:

name: meu_app
description: Galeria de imagens
version: 1.0.0+1

dependencies:
  flutter:
    sdk: flutter

flutter:
  uses-material-design: true
  assets:
    - assets/images/

lib/main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Galeria Nalla')),
      body: GridView.builder(
        padding: EdgeInsets.all(10),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
        itemCount: 10,
        itemBuilder: (context, index) {
          return ClipRRect(
            borderRadius: BorderRadius.circular(8),
            child: Image.asset(
              'assets/images/nalla-${index + 1}.jpg',
              fit: BoxFit.cover,
            ),
          );
        },
      ),
    ),
  ));
}

Estrutura de Assets​

Configurando Assets no pubspec.yaml​

Assets de imagens​

Assets de fontes​

Usando Imagens​

Image.asset​

Exemplo completo​

Usando Fontes Customizadas​

Configurando no MaterialApp​

Usando em Text widgets​

Exemplo completo​

Download de Assets para Exercícios​

Fontes​

Imagens da Nalla​

Exercícios​

Soluções​

Estrutura de Assets

Configurando Assets no pubspec.yaml

Assets de imagens

Assets de fontes

Usando Imagens

Image.asset

Exemplo completo

Usando Fontes Customizadas

Configurando no MaterialApp

Usando em Text widgets

Exemplo completo

Download de Assets para Exercícios

Fontes

Imagens da Nalla

Exercícios

Soluções