Como adicionar ícones personalizados no flutter

Olá bom dia,

Para adicionar ícones personalizados criados por você aos ícones já existentes no Flutter, você pode seguir os passos abaixo. Vamos usar um exemplo onde você cria ícones personalizados e os integra ao Flutter usando a biblioteca flutter_svg para ícones SVG ou ImageIcon para ícones de imagem.

1. Adicionando Ícones SVG Personalizados Se os seus ícones estão em formato SVG, você pode usar a biblioteca flutter_svg.

Passo 1: Adicionar Dependência Adicione a dependência flutter_svg ao seu arquivo pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^1.0.0

Passo 2: Adicionar os Ícones SVG ao Projeto Coloque os arquivos SVG na pasta assets/icons (ou qualquer outra pasta de sua escolha) do seu projeto.

Passo 3: Registrar os Assets No arquivo pubspec.yaml, registre os arquivos SVG:

flutter:
  assets:
    - assets/icons/

Passo 4: Usar os Ícones SVG no Código Utilize a biblioteca flutter_svg para carregar e exibir os ícones SVG:

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

class CustomIconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ícones Personalizados'),
      ),
      body: Center(
        child: SvgPicture.asset(
          'assets/icons/my_custom_icon.svg',
          width: 100,
          height: 100,
        ),
      ),
    );
  }
}

1. Adicionando Ícones de Imagem Personalizados Se os seus ícones estão em formato de imagem (PNG, JPG, etc.), você pode usar a classe ImageIcon.

Passo 1: Adicionar os Ícones de Imagem ao Projeto Coloque os arquivos de imagem na pasta assets/icons (ou qualquer outra pasta de sua escolha) do seu projeto.

Passo 2: Registrar os Assets No arquivo pubspec.yaml, registre os arquivos de imagem:

flutter:
  assets:
    - assets/icons/

Passo 3: Usar os Ícones de Imagem no Código Utilize a classe ImageIcon para carregar e exibir os ícones de imagem:

import 'package:flutter/material.dart';

class CustomIconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ícones Personalizados'),
      ),
      body: Center(
        child: ImageIcon(
          AssetImage('assets/icons/my_custom_icon.png'),
          size: 100,
        ),
      ),
    );
  }
}

1. Adicionando Fontes de Ícones Personalizadas Se você tem uma fonte de ícones personalizada (como as criadas pelo Icomoon ou Fontello), você pode adicionar a fonte ao Flutter e usá-la como qualquer outra fonte de ícones.

Passo 1: Adicionar a Fonte ao Projeto Coloque o arquivo de fonte (por exemplo, my_custom_icons.ttf) na pasta assets/fonts.

Passo 2: Registrar a Fonte No arquivo pubspec.yaml, registre a fonte:

flutter:
  fonts:
    - family: MyCustomIcons
      fonts:
        - asset: assets/fonts/my_custom_icons.ttf

Passo 3: Usar a Fonte de Ícones no Código Defina os ícones na sua fonte personalizada e use a classe Icon com a fonte personalizada:

import 'package:flutter/material.dart';

class CustomIconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ícones Personalizados'),
      ),
      body: Center(
        child: Icon(
          IconData(itemCode, fontFamily: 'MyCustomIcons'), // Substitua pelo código do ícone
          size: 100,
        ),
      ),
    );
  }
}

Substitua "itemCode" pelo código do ícone que você deseja usar na sua fonte personalizada.

Seguindo esses passos, você poderá adicionar e utilizar ícones personalizados no seu projeto Flutter.