Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Detalhes do pacotev1.0.5

flutter_sizer

O Flutter Sizer ajuda a implementar um layout responsivo fornecendo widgets auxiliares e extensões.

AndroidiOSWebmacOSWindowsLinux
pub.dev Documentação da API Código-fonte
Downloads em 30 dias
942
Curtidas
24
Pontos Pub
150

Instalar pacote

flutter pub add flutter_sizer

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Flutter Sizer é um pacote de interface responsiva que permite layouts adaptáveis em diferentes tamanhos e orientações de tela. Ele fornece widgets auxiliares e extensões para escalar facilmente fontes, tamanhos e margens com base nas dimensões da tela do dispositivo. Ao aproveitar a largura e altura da tela, garante uma aparência consistente no design em diversos dispositivos sem cálculos manuais. Ideal para desenvolvedores que buscam criar interfaces fluidas e escaláveis com o mínimo de código boilerplate.

Casos de uso

  • Criando layouts responsivos para múltiplos tamanhos de tela
  • Dimensionar elementos da interface proporcionalmente entre dispositivos
  • Simplificando o design responsivo em aplicativos móveis e web
  • Manter espaçamento e tipografia consistentes
  • Criando aplicativos multiplataforma com aparência uniforme
  • Reduzindo cálculos manuais de tamanho no código da interface

Principais recursos

  • Dimensionamento automático de widgets com base no tamanho da tela
  • Extensões auxiliares para conversão de unidades fácil
  • Suporte para os modos retrato e paisagem
  • Configuração mínima com apenas algumas linhas de código
  • Compatibilidade multiplataforma
  • Suporte integrado para Android, iOS, Web, macOS, Windows e Linux

Indicado para

  • Desenvolvedores construindo aplicativos responsivos do Flutter
  • Equipes priorizando interface do usuário consistente entre dispositivos
  • Projetos que exigem implementação rápida de layouts responsivos
  • Aplicativos direcionados a múltiplas plataformas com tamanhos de tela variados
  • Designers trabalhando em estreita colaboração com desenvolvedores em layouts pixel-perfeitos
  • Iniciantes aprendendo padrões responsivos do Flutter

Considerações

  • Pode exigir ajustes ao usar restrições de layout personalizadas
  • Não ideal para layouts altamente complexos ou não uniformes
  • Impacto potencial no desempenho com aninhamento excessivo de widgets
  • Requer testes cuidadosos em diversos tamanhos de tela
  • Melhor usado com um sistema de design consistente
  • Personalização limitada para lógica avançada de escalonamento

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Flutter Sizer

Flutter Sizer helps implement a responsive layout by providing helper widgets and extensions

Responsive Image

Responsive Image

Content

Installation

Add flutter_sizer to pubspec.yaml

dependencies:
  flutter_sizer: ^1.0.4

Parameters

  • Adaptive.h() - Returns a calculated height based on the device
  • Adaptive.w() - Returns a calculated width based on the device
  • Adaptive.sp() - Returns a calculated sp based on the device (deprecated)
  • Adaptive.dp() - Returns a calculated dp based on the device
  • .h - Returns a calculated height based on the device
  • .w - Returns a calculated width based on the device
  • .sp - Returns a calculated sp based on the device (deprecated)
  • .dp - Returns a calculated dp based on the device
  • Device.boxConstraints - Returns the Device's BoxConstraints
  • Device.orientation - Returns the Screen Orientation (portrait or landscape)
  • Device.screenType - Returns the Screen Type (mobile or tablet)
  • Device.devicePixelRatio - Returns the devicePixel Ratio or (1.0)

Usage

Import the Package

import 'package:flutter_sizer/flutter_sizer.dart';

Wrap MaterialApp with FlutterSizer widget

 FlutterSizer(
      builder: (context, orientation, screenType) {
        return MaterialApp();
      }
 )

Widget Size

Container(
  width: Adaptive.w(20),    // This will take 20% of the screen's width
  height: 30.5.h     // This will take 30.5% of the screen's height
)

Font size

Text(
  'Flutter Sizer', 
  style: TextStyle(fontSize: 15.dp),
)

Orientation

If you want to support both portrait and landscape orientations

Device.orientation == Orientation.portrait
  ? Container(   // Widget for Portrait
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // Widget for Landscape
      width: 100.w,
      height: 12.5.h,
   )

DeviceType

If you want the same layout to look different in tablet and mobile, use the Device.screenType method:

Device.screenType == ScreenType.tablet
  ? Container(   // Widget for Tablet
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // Widget for Mobile
      width: 100.w,
      height: 12.5.h,
   )

Take Note

You need to import flutter_sizer package in order to access number.h, number.w, and number.dp

Auto import in VSCode and Android Studio doesn't work for dart extension methods. Typing 10.h would not bring up auto import suggestion for this package

One workaround is to type Device so that the auto import suggestion would show up:

import 'package:flutter_sizer/flutter_sizer.dart';

Community Support

If you have any suggestions or issues, feel free to open an issue

If you would like to contribute, feel free to create a PR

Categorias

Interface do usuário responsiva

Repositório-fonte

Projetos que usam este pacote

Ainda não há dados.