Detalhes do pacotev0.3.11+11

responsive

Forneça uma maneira fácil de criar interfaces responsivas para aplicativos Flutter em dispositivos móveis, desktop e web, permitindo tamanhos diferentes de widgets para cada tamanho de tela e orientação do dispositivo.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 75
Curtidas: 66
Pontos Pub: 140

Instalar pacote

flutter pub add responsive

Visão geral do pacote

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

O pacote responsivo simplifica a criação de interfaces do usuário adaptativas em aplicativos Flutter para plataformas móveis, desktop e web. Permite que os desenvolvedores definam tamanhos e layouts diferentes de widgets com base no tamanho da tela e na orientação do dispositivo, garantindo experiências de UI consistentes e otimizadas. Com APIs intuitivas, ele simplifica o design responsivo sem exigir lógica condicional complexa ou manipulação manual de consultas de mídia. O pacote é particularmente útil para aplicativos voltados para múltiplos fatores de forma com dimensões de tela variadas.

Casos de uso

Desenvolvimento de aplicativos multiplataforma
Layouts adaptativos para dispositivos móveis e desktop
Dimensionamento dinâmico da interface com base na orientação da tela
Construindo interfaces web escaláveis
Design responsivo para tablets e telas grandes

Principais recursos

Detecção automática do tamanho da tela
Dimensionamento de widget sensível à orientação
API simples para widgets responsivos
Suporte para todas as principais plataformas Flutter
Pontos de interrupção embutidos para dispositivos comuns

Indicado para

Desenvolvedores construindo aplicativos multiplataforma com Flutter
Equipes priorizando consistência da interface em dispositivos
Projetos que exigem ajustes dinâmicos de layout

Considerações

Pode exigir testes em vários tipos de dispositivos
Impacto no desempenho com widgets responsivos excessivamente aninhados
Personalização limitada além dos pontos de quebra pré-definidos

README original

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

responsive

Provide a easy way to make responsive UI for Flutter Applications in mobile, desktop and web, allow different widget size for each screen size and device orientation..

Made by Marvin Quevedo and [Víctor Guardiola](mailto:victor.guardiola@gmail.com) of FlutterEs Community.

Este paquete ha sido creado por la comunidad de Flutter en Español, si deseas ser parte de nosotros, puedes visitar cualquiera de estos links:

Add dependency

dependencies:
  responsive: 0.2.3

Usage

You have two ways of use it:

You can use the ReponsiveRow widget and the FlexResponsive widget to make the layout

you can use the static method Responsive.calcColumns to assign the correct number of columns to a widget like a GridView.

Easy to use

import 'package:flutter/material.dart';
import 'package:responsive/flex_widget.dart';
import 'package:responsive/responsive_row.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: <Widget>[
            ResponsiveRow(
              columnsCount: 12,
              crossAxisAlignment: WrapCrossAlignment.center,
              children: <Widget>[
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.amber,
                  ),
                  xs: 4,
                  xsOffset: 2,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  xsLandOffset: 0,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.red,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.indigo,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.lime,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.teal,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.green,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.deepOrange,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.amber,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.grey,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.black,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.brown,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.cyan,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Categorias

Interface do usuário responsiva

Repositório-fonte

flutter-es/responsive

responsivo

☆ 15 Estrelas⑂ 4 Forks

DartHTML

Projetos que usam este pacote

Ainda não há dados.