flutter_responsivity_widget

Description:

flutter responsivity widget

flutter_responsivity_widget #
by: Eliezer Antonio
Voçê pode obter esse resultado totalmente ajustavel ao tamanho da sua tela

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';;
copied to clipboard
Como usar #
copied to clipboard
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 %
),
),
);
}
}


copied to clipboard
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 %
),
),
),
);
}
}


copied to clipboard
Resultado do exemplo acima

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),
)
),
),
);
}
}


copied to clipboard
resultado do exemplo acima #

My Packages #
flutter_carousel_intro