flutter_responsivity_widget 0.0.7 copy "flutter_responsivity_widget: ^0.0.7" to clipboard
flutter_responsivity_widget: ^0.0.7 copied to clipboard

A package for responsivity.

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

5
likes
120
pub points
36%
popularity

Publisher

unverified uploader

A package for responsivity.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_responsivity_widget