Skip to content

eliezerantonio/flutter_responsivity_widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MIT License Open Source Dart Version Flutter Version Null Safety

flutter_responsivity_widget

by: Eliezer Antonio

Voçê pode obter esse resultado totalmente ajustavel ao tamanho da sua tela

normal

Nota

A maioria de nos do Flutter adicionamos tamanhos fixos nos nosso componentes quer seja texto, imagens ou outro widget, e as vezes por causa disso em diferentes tamanhos de tela acabamos por cair no famoso overflow, Com esse package cada componente vai se ajustando em cada diferente tamanho de dispositivo, apesar de existir outras abordagens pra solucionar isso mas uma adaptação automática dando o tamanho certo em cada device pode ser melhor em termos de UX e tem mais outras vantagens

Funcionalidades

  • Width in percent
  • Height in percent
  • Diagonal in percent
  • Detect tablet size

Plataformas suportadas

  • Flutter Android
  • Flutter iOS
  • Flutter web
  • Flutter desktop

Visualização

Instalação

Adicionar flutter_responsivity_widget: ^0.0.1 no seu ficheiro de dependênciaspubspec.yaml. E importa:

import 'package:flutter_responsivity_widget/flutter_responsivity_widget.dart';;

Como usar

Exemplos

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

  @override
  Widget build(BuildContext context) {
    final responsive = Responsive(context);
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset(
          'assets/logo_jp.jpg',
          width: responsive.wp(100), // wp- width em  %
          height: responsive.hp(100), // hp-height em %
        ),
      ),
    );
  }
}

Exemplo com texto

Para textos é recomendado usar a diagonal
class ExamplePage extends StatelessWidget {
const ExamplePage({super.key});

@override
Widget build(BuildContext context) {
  final responsive = Responsive(context);
  return Scaffold(
    backgroundColor: Colors.white,
    body: Center(
      child: Text(
        'Example',
        style: TextStyle(
          fontSize: responsive.dp(8), // dp- diagonal em %
        ),
      ),
    ),
  );
}
}

Resultado do exemplo acima

normal

Exemplo com detectando tamanho da tablet

Caso você queira mostrar conteudos diferentes para uma tablet e um telefone
class ExamplePage extends StatelessWidget {
const ExamplePage({super.key});

@override
Widget build(BuildContext context) {
  final responsive = Responsive(context);
  final isTablet = responsive.isTablet;
  return Scaffold(
    backgroundColor: Colors.white,
    body: Center(
      child: isTablet
          ? Text(
              'iPad',
              style: TextStyle(
                fontSize: responsive.dp(10), /
              ),
            )
          : Text( 'iPhone',
              style: TextStyle(
                fontSize: responsive.dp(10), 
              )
            ),
    ),
  );
}
}

resultado do exemplo acima

normal

My Packages

flutter_carousel_intro