I am new to Flutter and I am having some problems when it comes to making a responsive web app. The layout I'm trying to make is similar to the one shown below,
but when I resize the screens, everything gets distorted. I have tried using the responsive widgets but there is no case.
PD: Sorry for my bad english !
class _ScreenState extends State<Screen> {
@override
Widget build(BuildContext context) {
final childrenHorizontal = [
Expanded(flex: 2150, child: RectanguloIzquierdaHorizontal()),
Expanded(flex: 1850, child: RectanguloDerechaHorizontal()),
];
final childrenVertical = [
Expanded(child: RectanguloIzquierdaVertical()),
Expanded(child: RectanguloDerechaVertical())
];
final _screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
actions: [
IconButton(
onPressed: null,
icon: Icon(
Icons.menu_rounded,
color: Colors.white,
size: 35,
),
padding: EdgeInsets.only(right: 30)),
],
// leading: Icon(Icons.menu, color: Colors.white,),#
centerTitle: true,
title: Text(
'Title',
style: TextStyle(
fontSize: 16),
),
backgroundColor: Colors.grey,
elevation: 1,
),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constrains) {
return (constrains.maxWidth < 600)
? Column(
children: childrenVertical,
)
: SingleChildScrollView(
child: Row(
children: childrenHorizontal,
),
);
},
),
backgroundColor: Color.cyan,
bottomNavigationBar: ScreenFooter(screenSize: _screenSize),
);
}
}
class RectanguloIzquierdaHorizontal extends StatefulWidget {
@override
_RectanguloIzquierdaHorizontalState createState() =>
_RectanguloIzquierdaHorizontalState();
}
class _RectanguloIzquierdaHorizontalState
extends State<RectanguloIzquierdaHorizontal> {
@override
Widget build(BuildContext context) {
final _screenSize = MediaQuery.of(context).size;
final padding = _screenSize.width * .1;
return Padding(
padding: EdgeInsets.only(left: padding),
child: Container(
width: _screenSize.width * 1.2,
height: 800,
decoration: BoxDecoration(
color: Colors.orange,
),
child: Column(
children: [
Padding(padding: EdgeInsets.only(top: _screenSize.height * .125)),
Container(
margin: EdgeInsets.only(
left: _screenSize.width * .03,
right: _screenSize.width * .04),
child: AutoSizeText(
"TEXT TEXT TEXT" ,
style: TextStyle(
fontSize: 16,
color: Colors.white),
maxFontSize: 16,
minFontSize: 12,
maxLines: 6,
),
),
Container(
margin: EdgeInsets.only(
left: _screenSize.width * .02,
right: _screenSize.width * .13),
child: AutoSizeText(
"TEXT TEX TEX",
style: TextStyle(
fontSize: 100,
),
maxFontSize: 100,
minFontSize: 30,
maxLines: 1,
),
),
Container(
margin: EdgeInsets.only(top: 50, left: 45, right: 50),
height: _screenSize.height * .50,
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
spreadRadius: 2.0,
offset: Offset(2.0, 10),
)
],
),
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
spreadRadius: 2.0,
offset: Offset(2.0, 10),
)
],
),
margin: EdgeInsets.only(top: 7, left: 7, right: 7),
height: _screenSize.width * .50,
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
spreadRadius: 2.0,
offset: Offset(2.0, 10),
)
],
),
margin: EdgeInsets.only(top: 7, left: 7, right: 7),
height: _screenSize.height * .50,
),
),
)
],
),
),
);
}
}
class RectanguloDerechaHorizontal extends StatefulWidget {
@override
_RectanguloDerechaHorizontalState createState() =>
_RectanguloDerechaHorizontalState();
}
class _RectanguloDerechaHorizontalState
extends State<RectanguloDerechaHorizontal> {
@override
Widget build(BuildContext context) {
final _screenSize = MediaQuery.of(context).size;
final padding = _screenSize.width * .1;
return Padding(
padding: EdgeInsets.only(right: padding),
child: Container(
width: double.infinity,
height: 800,
decoration: BoxDecoration(color: Colors.white),
child: Column(children: [
Padding(padding: EdgeInsets.only(top: _screenSize.height * .06)),
Expanded(
flex: 100,
child: Container(
//color: Colors.red,
child: Row(
children: [
Padding(
padding: EdgeInsets.only(top: _screenSize.height * .2)),
Container(
margin: EdgeInsets.only(
top: _screenSize.height * .01,
left: _screenSize.width * .03),
child: Image(
image: AssetImage(
'image'),
)),
],
),
),
),
Padding(padding: EdgeInsets.only(top: _screenSize.height * .05)),
Expanded(
flex: 50,
child: Container(
margin: EdgeInsets.only(right: _screenSize.width * .050),
child: AutoSizeText(
'TEXT',
style: TextStyle(
fontSize: 80,
height: 0.85),
maxFontSize: 80,
minFontSize: 30,
maxLines: 1,
),
),
),
Expanded(
flex: 50,
child: Container(
margin: EdgeInsets.only(right: _screenSize.width * 0.010),
child: AutoSizeText(
'TEXT',
style: TextStyle(
fontSize: 80,
color: Colors.red,
height: 0.85),
maxFontSize: 80,
minFontSize: 30,
maxLines: 1,
),
),
),
Expanded(
flex: 50,
child: Container(
margin: EdgeInsets.only(right: _screenSize.width * 0.165),
child: AutoSizeText(
'TEXT',
style: TextStyle(
fontSize: 80,
height: 0.85),
maxFontSize: 80,
minFontSize: 30,
maxLines: 1,
),
),
),
Expanded(
flex: 300,
child: Container(
child: Row(
children: [
Container(
margin: EdgeInsets.only(
bottom: 265, left: _screenSize.width * .040),
child: Text(
'TEXT',
style: TextStyle(
fontSize: 60,
height: 0.85),
),
),
Expanded(
child: Container(
child: Column(
children: [
Container(
child: Image(
image: AssetImage(
'image'),
height: 288,
width: 288,
)),
Container(
child: TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SelectAge()),
);
},
child: Text(
'BUTTON',
style: TextStyle(
fontSize: 20,
decoration: TextDecoration.underline,
),
),
)
],
),
),
),
],
),
),
),
])),
);
}
}
Aucun commentaire:
Enregistrer un commentaire