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