Top 15 Packages de Widgets e UI para Flutter 🎨

Publicado em por

1. Font Awesome Flutter

O pacote de ícones mais popular do mundo, adaptado para Flutter.

  • O que faz: Oferece milhares de ícones adicionais além dos ícones padrões do Material e Cupertino.

  • Destaque: Ícones de marcas (Google, WhatsApp, etc.) e estilos variados (solid, regular, light).

    FaIcon(FontAwesomeIcons.whatsapp, color: Colors.green)

     

2. Lottie

Transforma animações complexas feitas no Adobe After Effects em widgets leves.

  • O que faz: Renderiza animações baseadas em vetores (JSON).

  • Destaque: Ideal para telas de onboarding, feedbacks de sucesso/erro e ícones animados.

    Lottie.network('https://assets5.lottiefiles.com/packages/lf20_tp59v6.json')

     

3. GetWidget

Uma biblioteca de componentes de código aberto com mais de 1000 widgets pré-estilizados.

  • O que faz: Oferece botões, cards, avatares, carrosséis e barras de busca prontos.

  • Destaque: Extremamente rápido para criar interfaces bonitas sem configurar cada detalhe do zero.

    GFButton(
  onPressed: () {},
  text: "Enviar",
  shape: GFButtonShape.pills,
)

4. Flutter Slidable

Adiciona ações de deslizar (swipe) a itens de uma lista.

  • O que faz: Permite que o usuário deslize um item para revelar botões como “Deletar”, “Editar” ou “Arquivar”.

  • Destaque: Altamente personalizável e essencial para listas de tarefas ou e-mails.

    Slidable(
  endActionPane: ActionPane(
    motion: ScrollMotion(),
    children: [SlidableAction(onPressed: (context) {}, icon: Icons.delete, label: 'Deletar')],
  ),
  child: ListTile(title: Text('Deslize-me')),
)

     

5. Shimmer

Cria aquele efeito de “carregamento brilhante” enquanto os dados não chegam.

  • O que faz: Adiciona uma animação de gradiente que passa sobre widgets cinzas (esqueletos).

  • Destaque: Melhora drasticamente a percepção de performance do app (UX de carregamento).

    Shimmer.fromColors(
  baseColor: Colors.grey[300]!,
  highlightColor: Colors.white,
  child: Container(width: 200, height: 20, color: Colors.grey),
)

     

6. Glassmorphism

Implementa o efeito de “vidro jateado” que é tendência no design moderno.

  • O que faz: Cria recipientes com transparência, desfoque de fundo e bordas brilhantes.

  • Destaque: Excelente para criar interfaces futuristas e elegantes.

    GlassmorphicContainer(
  width: 200, height: 200,
  borderRadius: 20, blur: 20,
  alignment: Alignment.center,
  border: 2, linearGradient: LinearGradient(colors: [Colors.white.withOpacity(0.1), Colors.white.withOpacity(0.05)]),
  borderGradient: LinearGradient(colors: [Colors.white24, Colors.white10]),
  child: Text("Glass"),
)

     

7. Intro Slider

A forma mais rápida de criar telas de introdução (onboarding).

  • O que faz: Gerencia a paginação, os pontos indicadores e os botões de “Pular” ou “Próximo”.

  • Destaque: Muito fácil de configurar para apresentar as funções do seu app ao novo usuário.

    IntroSlider(
  listContentConfig: [
    ContentConfig(title: "Bem-vindo", description: "Explicação do app aqui."),
  ],
)

8. Flutter Spinkit

Uma coleção de indicadores de carregamento (loaders) animados.

  • O que faz: Substitui o CircularProgressIndicator padrão por animações criativas.

  • Destaque: Diversos estilos (cubos, pontos, ondas) que combinam com qualquer identidade visual.

    SpinKitRotatingCircle(color: Colors.blue, size: 50.0)

     

9. Salomon Bottom Bar

Uma barra de navegação inferior moderna e animada.

  • O que faz: Quando um ícone é clicado, ele expande exibindo o texto com uma transição suave.

  • Destaque: Criado por um dos designers mais influentes da comunidade Flutter.

    SalomonBottomBar(
  items: [
    SalomonBottomBarItem(icon: Icon(Icons.home), title: Text("Home"), selectedColor: Colors.purple),
  ],
)

     

10. Flutter ScreenUtil

O pacote definitivo para responsividade.

  • O que faz: Adapta tamanhos de fontes, margens e widgets baseando-se no tamanho da tela do dispositivo.

  • Destaque: Garante que seu design pareça o mesmo em um iPhone SE e em um Tablet.

    // Definindo altura e largura adaptável
Container(
  width: 200.w, 
  height: 50.h,
  child: Text("Texto", style: TextStyle(fontSize: 16.sp)),
)

11. Animated Text Kit

Dê vida aos textos do seu aplicativo com animações pré-configuradas.

  • O que faz: Efeitos de máquina de escrever, fade, escala, entre outros.

  • Destaque: Ótimo para destacar frases de impacto ou títulos.

    AnimatedTextKit(
  animatedTexts: [TypewriterAnimatedText('Olá, Flutter!')],
)

     

12. Badges

Adiciona pequenos indicadores numéricos ou de status sobre ícones.

  • O que faz: Coloca o famoso “círculo vermelho” com o número de notificações sobre um ícone de sino ou carrinho.

  • Destaque: Indispensável para apps de e-commerce e redes sociais.

    badges.Badge(
  badgeContent: Text('3', style: TextStyle(color: Colors.white)),
  child: Icon(Icons.shopping_cart),
)

     

13. Flutter Platform Widgets

Facilita a criação de apps que parecem nativos tanto no iOS quanto no Android.

  • O que faz: Um único widget que se transforma automaticamente em Material (Android) ou Cupertino (iOS).

  • Destaque: Economiza horas de código condicional (if/else) baseado na plataforma.

    PlatformButton(
  onPressed: () {},
  child: Text("Clique Aqui"), // Vira Material no Android e Cupertino no iOS
)

     

14. Flutter Animate

Uma forma declarativa e simples de adicionar animações a qualquer widget.

  • O que faz: Permite encadear animações como .fadeIn().scale().blur().

  • Destaque: Torna animações complexas legíveis em poucas linhas de código.

    Text("Surpresa!").animate().fadeIn(duration: 500.ms).scale(delay: 500.ms)

     

15. Shadcn UI (Flutter)

A versão para Flutter do famoso sistema de componentes do ecossistema React.

  • O que faz: Oferece componentes altamente acessíveis e com um visual profissional “clean”.

  • Destaque: É a escolha favorita para desenvolvedores que vêm da Web e buscam um design sóbrio e moderno.

    ShadButton(
  child: const Text('Botão Shadcn'),
  onPressed: () {},
)

     

 

Tabela de Uso Rápido

Objetivo Sugestão de Package
Ícones Extras Font Awesome Flutter
Responsividade Flutter ScreenUtil
Feedback de Load Shimmer ou Spinkit
Animações Pro Lottie ou Flutter Animate
Navegação Moderna Salomon Bottom Bar
    Exemplo de uso de alguns dos packages acima
  • flutter_screenutil: Para garantir que o layout fique perfeito em qualquer celular.
  • google_fonts: Para uma tipografia elegante.
  • glassmorphism: Para um cartão de crédito com efeito visual incrível.
  • font_awesome_flutter: Para ícones sociais e financeiros.
  • flutter_animate: Para dar vida aos elementos quando a tela abrir.

📝 Exemplo Prático: Dashboard Financeiro Moderno

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:glassmorphism/glassmorphism.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:flutter_animate/flutter_animate.dart';

void main() => App(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // Inicializa o ScreenUtil para responsividade
    return ScreenUtilInit(
      designSize: const Size(360, 690), // Tamanho base do design (ex: iPhone 13)
      builder: (_, child) => MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(scaffoldBackgroundColor: const Color(0xFF0F0F0F)),
        home: const FinanceDashboard(),
      ),
    );
  }
}

class FinanceDashboard extends StatelessWidget {
  const FinanceDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 20.h),
              // Cabeçalho com Animação
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("Olá, Gemini,", 
                        style: GoogleFonts.poppins(color: Colors.white70, fontSize: 14.sp)),
                      Text("Bem-vindo de volta", 
                        style: GoogleFonts.poppins(color: Colors.white, fontSize: 18.sp, fontWeight: FontWeight.bold)),
                    ],
                  ),
                  const CircleAvatar(backgroundColor: Colors.blueAccent, child: Icon(Icons.person)),
                ],
              ).animate().fadeIn(duration: 600.ms).slideX(),

              SizedBox(height: 30.h),

              // Cartão de Crédito com Glassmorphism
              GlassmorphicContainer(
                width: double.infinity,
                height: 180.h,
                borderRadius: 20,
                blur: 15,
                alignment: Alignment.center,
                border: 1.5,
                linearGradient: LinearGradient(
                  colors: [Colors.white.withOpacity(0.1), Colors.white.withOpacity(0.05)],
                ),
                borderGradient: LinearGradient(
                  colors: [Colors.white24, Colors.white10],
                ),
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const FaIcon(FontAwesomeIcons.visa, color: Colors.white, size: 30),
                          Text("Platinum", style: GoogleFonts.poppins(color: Colors.white54)),
                        ],
                      ),
                      Text("R\$ 15.750,00", 
                        style: GoogleFonts.spaceGrotesk(color: Colors.white, fontSize: 24.sp, fontWeight: FontWeight.bold)),
                      Text("**** **** **** 8842", 
                        style: GoogleFonts.shareTechMono(color: Colors.white70, fontSize: 16.sp)),
                    ],
                  ),
                ),
              ).animate().scale(delay: 200.ms, duration: 500.ms),

              SizedBox(height: 30.h),

              Text("Ações Rápidas", 
                style: GoogleFonts.poppins(color: Colors.white, fontSize: 16.sp, fontWeight: FontWeight.w600)),
              
              SizedBox(height: 15.h),

              // Lista de Ações usando FontAwesome e ScreenUtil
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _quickAction(FontAwesomeIcons.paperPlane, "Enviar"),
                  _quickAction(FontAwesomeIcons.qrcode, "Pagar"),
                  _quickAction(FontAwesomeIcons.wallet, "Top up"),
                  _quickAction(FontAwesomeIcons.ellipsis, "Mais"),
                ],
              ).animate().fadeIn(delay: 400.ms).slideY(begin: 0.2),
            ],
          ),
        ),
      ),
    );
  }

  Widget _quickAction(IconData icon, String label) {
    return Column(
      children: [
        Container(
          width: 60.w,
          height: 60.w,
          decoration: BoxDecoration(
            color: const Color(0xFF1E1E1E),
            borderRadius: BorderRadius.circular(15),
          ),
          child: Center(child: FaIcon(icon, color: Colors.blueAccent, size: 20.sp)),
        ),
        SizedBox(height: 8.h),
        Text(label, style: GoogleFonts.poppins(color: Colors.white60, fontSize: 12.sp)),
      ],
    );
  }
}

Excelente escolha! Vamos criar uma Tela de Dashboard Financeiro moderna. Vou combinar os seguintes pacotes para você ver como eles trabalham juntos:

  1. flutter_screenutil: Para garantir que o layout fique perfeito em qualquer celular.

  2. google_fonts: Para uma tipografia elegante.

  3. glassmorphism: Para um cartão de crédito com efeito visual incrível.

  4. font_awesome_flutter: Para ícones sociais e financeiros.

  5. flutter_animate: Para dar vida aos elementos quando a tela abrir.

📝 Exemplo Prático: Dashboard Financeiro Moderno

Dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:glassmorphism/glassmorphism.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:flutter_animate/flutter_animate.dart';

void main() =>运行App(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // Inicializa o ScreenUtil para responsividade
    return ScreenUtilInit(
      designSize: const Size(360, 690), // Tamanho base do design (ex: iPhone 13)
      builder: (_, child) => MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(scaffoldBackgroundColor: const Color(0xFF0F0F0F)),
        home: const FinanceDashboard(),
      ),
    );
  }
}

class FinanceDashboard extends StatelessWidget {
  const FinanceDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 20.h),
              // Cabeçalho com Animação
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("Olá, Gemini,", 
                        style: GoogleFonts.poppins(color: Colors.white70, fontSize: 14.sp)),
                      Text("Bem-vindo de volta", 
                        style: GoogleFonts.poppins(color: Colors.white, fontSize: 18.sp, fontWeight: FontWeight.bold)),
                    ],
                  ),
                  const CircleAvatar(backgroundColor: Colors.blueAccent, child: Icon(Icons.person)),
                ],
              ).animate().fadeIn(duration: 600.ms).slideX(),

              SizedBox(height: 30.h),

              // Cartão de Crédito com Glassmorphism
              GlassmorphicContainer(
                width: double.infinity,
                height: 180.h,
                borderRadius: 20,
                blur: 15,
                alignment: Alignment.center,
                border: 1.5,
                linearGradient: LinearGradient(
                  colors: [Colors.white.withOpacity(0.1), Colors.white.withOpacity(0.05)],
                ),
                borderGradient: LinearGradient(
                  colors: [Colors.white24, Colors.white10],
                ),
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const FaIcon(FontAwesomeIcons.visa, color: Colors.white, size: 30),
                          Text("Platinum", style: GoogleFonts.poppins(color: Colors.white54)),
                        ],
                      ),
                      Text("R\$ 15.750,00", 
                        style: GoogleFonts.spaceGrotesk(color: Colors.white, fontSize: 24.sp, fontWeight: FontWeight.bold)),
                      Text("**** **** **** 8842", 
                        style: GoogleFonts.shareTechMono(color: Colors.white70, fontSize: 16.sp)),
                    ],
                  ),
                ),
              ).animate().scale(delay: 200.ms, duration: 500.ms),

              SizedBox(height: 30.h),

              Text("Ações Rápidas", 
                style: GoogleFonts.poppins(color: Colors.white, fontSize: 16.sp, fontWeight: FontWeight.w600)),
              
              SizedBox(height: 15.h),

              // Lista de Ações usando FontAwesome e ScreenUtil
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _quickAction(FontAwesomeIcons.paperPlane, "Enviar"),
                  _quickAction(FontAwesomeIcons.qrcode, "Pagar"),
                  _quickAction(FontAwesomeIcons.wallet, "Top up"),
                  _quickAction(FontAwesomeIcons.ellipsis, "Mais"),
                ],
              ).animate().fadeIn(delay: 400.ms).slideY(begin: 0.2),
            ],
          ),
        ),
      ),
    );
  }

  Widget _quickAction(IconData icon, String label) {
    return Column(
      children: [
        Container(
          width: 60.w,
          height: 60.w,
          decoration: BoxDecoration(
            color: const Color(0xFF1E1E1E),
            borderRadius: BorderRadius.circular(15),
          ),
          child: Center(child: FaIcon(icon, color: Colors.blueAccent, size: 20.sp)),
        ),
        SizedBox(height: 8.h),
        Text(label, style: GoogleFonts.poppins(color: Colors.white60, fontSize: 12.sp)),
      ],
    );
  }
}

💡 Por que esse código é “profissional”?

  • Responsividade Adaptativa: Usei .w, .h e .sp do ScreenUtil. Se você rodar esse código em um Tablet ou em um celular pequeno, os ícones e fontes vão se ajustar proporcionalmente.

  • Hierarquia Visual: O Glassmorphism destaca o elemento principal (o saldo), enquanto o GoogleFonts traz uma estética de “Fintech” moderna.

  • Micro-interações: O flutter_animate faz com que os elementos não apenas “apareçam”, mas entrem na tela com fluidez, o que aumenta muito a qualidade percebida do app.

Gostou dessa estrutura? Posso te ajudar a adicionar agora uma camada de dados real usando o pacote Dio para buscar esse saldo de uma API fictícia, ou talvez configurar o SQLite/Hive para salvar as transações localmente.

Please follow and like us:
error0
fb-share-icon
Tweet 20
fb-share-icon20