Skip to content

Commit 133b090

Browse files
pouyamaroufipouyamaroufi
committed
improvment ui layout
1 parent b4902b2 commit 133b090

File tree

4 files changed

+77
-40
lines changed

4 files changed

+77
-40
lines changed

‎lib/drink_screen.dart‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
55
import 'package:foodapp/btn_widget.dart';
66
import 'package:foodapp/controller.dart';
77
import 'package:foodapp/invoice_screen.dart';
8+
import 'package:foodapp/responsive.dart';
89
import 'package:foodapp/triangle_painter.dart';
910
import 'package:get/get.dart';
1011
import 'package:google_fonts/google_fonts.dart';
@@ -18,10 +19,11 @@ class DrinkScreen extends StatelessWidget {
1819
return Scaffold(
1920
extendBodyBehindAppBar: true,
2021
appBar: AppBar(
22+
centerTitle: true,
2123
title: Text(
2224
'🥤 Drink Mood 🥤',
2325
style: GoogleFonts.getFont('Barlow',
24-
fontSize: 30, fontWeight: FontWeight.bold),
26+
fontSize: resW(25), fontWeight: FontWeight.bold),
2527
),
2628
),
2729
body: Obx(
@@ -67,13 +69,12 @@ class DrinkScreen extends StatelessWidget {
6769
),
6870
),
6971
children: [
70-
const SizedBox(
71-
height: 150,
72-
),
72+
SizedBox(height: resH(120)),
7373
Text(
7474
controller
7575
.drinkList[controller.contentIndex.value].name!,
76-
style: GoogleFonts.getFont('Lobster', fontSize: 25),
76+
style: GoogleFonts.getFont('Lobster',
77+
fontSize: resW(20)),
7778
),
7879
CarouselSlider.builder(
7980
itemCount: controller.drinkList.length,
@@ -85,7 +86,7 @@ class DrinkScreen extends StatelessWidget {
8586
child: Image.asset(
8687
'assets/images/${controller.drinkList[i].image!}')),
8788
options: CarouselOptions(
88-
height: 390,
89+
height: resH(310),
8990
aspectRatio: 1,
9091
viewportFraction: 0.7,
9192
initialPage: 0,
@@ -109,20 +110,21 @@ class DrinkScreen extends StatelessWidget {
109110
Text(
110111
'\$ ${controller.drinkList[controller.contentIndex.value].price!} \$',
111112
style: GoogleFonts.getFont('Barlow',
112-
fontSize: 25, fontWeight: FontWeight.w600),
113+
fontSize: resW(25),
114+
fontWeight: FontWeight.w600),
113115
),
114116
const Icon(
115117
Icons.favorite_rounded,
116118
color: Colors.grey,
117119
),
118120
],
119121
),
120-
const SizedBox(height: 35),
122+
SizedBox(height: resH(35)),
121123
Row(
122124
mainAxisAlignment: MainAxisAlignment.center,
123125
children: [
124126
IconButton(
125-
iconSize: 35,
127+
iconSize: resH(35),
126128
onPressed: () {
127129
if (controller
128130
.drinkList[
@@ -148,7 +150,7 @@ class DrinkScreen extends StatelessWidget {
148150
),
149151
),
150152
CircleAvatar(
151-
radius: 40,
153+
radius: resH(40),
152154
backgroundColor: Colors.red[400]!,
153155
child: Center(
154156
child: Text(
@@ -165,7 +167,7 @@ class DrinkScreen extends StatelessWidget {
165167
),
166168
),
167169
IconButton(
168-
iconSize: 35,
170+
iconSize: resH(35),
169171
onPressed: () {
170172
controller
171173
.drinkList[controller.contentIndex.value]
@@ -203,7 +205,7 @@ class DrinkScreen extends StatelessWidget {
203205
Expanded(
204206
flex: 5,
205207
child: AvatarStack(
206-
height: 50,
208+
height: resH(50),
207209
avatars: [
208210
for (var n = 0;
209211
n < controller.orderList.length;

‎lib/pizza_screen.dart‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import 'package:carousel_slider/carousel_slider.dart';
33
import 'package:flutter/material.dart';
44
import 'package:foodapp/btn_widget.dart';
55
import 'package:foodapp/controller.dart';
6+
import 'package:foodapp/responsive.dart';
67
import 'package:foodapp/salad_screen.dart';
78
import 'package:foodapp/triangle_painter.dart';
89
import 'package:get/get.dart';
@@ -18,10 +19,11 @@ class PizzaScreen extends StatelessWidget {
1819
return Scaffold(
1920
extendBodyBehindAppBar: true,
2021
appBar: AppBar(
22+
centerTitle: true,
2123
title: Text(
2224
'🍟 Pizza Mood 🍟',
2325
style: GoogleFonts.getFont('Barlow',
24-
fontSize: 30, fontWeight: FontWeight.bold),
26+
fontSize: resW(25), fontWeight: FontWeight.bold),
2527
),
2628
),
2729
body: Obx(
@@ -67,13 +69,12 @@ class PizzaScreen extends StatelessWidget {
6769
),
6870
),
6971
children: [
70-
const SizedBox(
71-
height: 150,
72-
),
72+
SizedBox(height: resH(120)),
7373
Text(
7474
controller
7575
.foodList[controller.contentIndex.value].name!,
76-
style: GoogleFonts.getFont('Lobster', fontSize: 25),
76+
style: GoogleFonts.getFont('Lobster',
77+
fontSize: resW(20)),
7778
),
7879
CarouselSlider.builder(
7980
itemCount: controller.foodList.length,
@@ -85,7 +86,7 @@ class PizzaScreen extends StatelessWidget {
8586
child: Image.asset(
8687
'assets/images/${controller.foodList[i].image!}')),
8788
options: CarouselOptions(
88-
height: 390,
89+
height: resH(310),
8990
aspectRatio: 1,
9091
viewportFraction: 0.7,
9192
initialPage: 0,
@@ -109,20 +110,21 @@ class PizzaScreen extends StatelessWidget {
109110
Text(
110111
'\$ ${controller.foodList[controller.contentIndex.value].price!}',
111112
style: GoogleFonts.getFont('Barlow',
112-
fontSize: 25, fontWeight: FontWeight.w600),
113+
fontSize: resW(25),
114+
fontWeight: FontWeight.w600),
113115
),
114116
const Icon(
115117
Icons.favorite_rounded,
116118
color: Colors.grey,
117119
),
118120
],
119121
),
120-
const SizedBox(height: 35),
122+
SizedBox(height: resH(35)),
121123
Row(
122124
mainAxisAlignment: MainAxisAlignment.center,
123125
children: [
124126
IconButton(
125-
iconSize: 35,
127+
iconSize: resH(35),
126128
onPressed: () {
127129
if (controller
128130
.foodList[
@@ -146,7 +148,7 @@ class PizzaScreen extends StatelessWidget {
146148
),
147149
),
148150
CircleAvatar(
149-
radius: 40,
151+
radius: resH(40),
150152
backgroundColor: Colors.amber[300]!,
151153
child: Center(
152154
child: Text(
@@ -155,14 +157,14 @@ class PizzaScreen extends StatelessWidget {
155157
.item
156158
.toString(),
157159
style: GoogleFonts.getFont('Barlow',
158-
fontSize: 28,
160+
fontSize: resW(28),
159161
fontWeight: FontWeight.w600,
160162
color: Colors.black),
161163
),
162164
),
163165
),
164166
IconButton(
165-
iconSize: 35,
167+
iconSize: resH(35),
166168
onPressed: () {
167169
controller
168170
.foodList[controller.contentIndex.value]
@@ -200,7 +202,7 @@ class PizzaScreen extends StatelessWidget {
200202
Expanded(
201203
flex: 5,
202204
child: AvatarStack(
203-
height: 50,
205+
height: resH(50),
204206
avatars: [
205207
for (var n = 0;
206208
n < controller.orderList.length;
@@ -216,7 +218,7 @@ class PizzaScreen extends StatelessWidget {
216218
'X ${controller.orderList.length}',
217219
textAlign: TextAlign.end,
218220
style: GoogleFonts.getFont('Barlow',
219-
fontSize: 28,
221+
fontSize: resW(28),
220222
fontWeight: FontWeight.w600,
221223
color: Colors.black),
222224
),

‎lib/responsive.dart‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:get/get.dart';
3+
4+
class SizeConfig {
5+
late MediaQueryData _mediaQueryData;
6+
late double screenWidth;
7+
late double screenHeight;
8+
late double defaultSize;
9+
late Orientation orientation;
10+
11+
void init(BuildContext context) {
12+
_mediaQueryData = MediaQuery.of(context);
13+
screenWidth = _mediaQueryData.size.width;
14+
screenHeight = _mediaQueryData.size.height;
15+
orientation = _mediaQueryData.orientation;
16+
}
17+
}
18+
19+
double resH(double inputHeight) {
20+
//double screenHeight = MediaQuery.of(context).size.height;
21+
double screenHeight = Get.height;
22+
// 812 is the layout height that designer use
23+
return (inputHeight / 812.0) * screenHeight;
24+
}
25+
26+
// Get the proportionate height as per screen size
27+
double resW(double inputWidth) {
28+
double screenWidth = Get.width;
29+
// 375 is the layout width that designer use
30+
return (inputWidth / 375.0) * screenWidth;
31+
}

‎lib/salad_screen.dart‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
55
import 'package:foodapp/btn_widget.dart';
66
import 'package:foodapp/controller.dart';
77
import 'package:foodapp/drink_screen.dart';
8+
import 'package:foodapp/responsive.dart';
89
import 'package:foodapp/triangle_painter.dart';
910
import 'package:get/get.dart';
1011
import 'package:google_fonts/google_fonts.dart';
@@ -18,10 +19,11 @@ class SaladScreen extends StatelessWidget {
1819
return Scaffold(
1920
extendBodyBehindAppBar: true,
2021
appBar: AppBar(
22+
centerTitle: true,
2123
title: Text(
2224
'🌽 Salad Mood 🥦',
2325
style: GoogleFonts.getFont('Barlow',
24-
fontSize: 30, fontWeight: FontWeight.bold),
26+
fontSize: resW(25), fontWeight: FontWeight.bold),
2527
),
2628
),
2729
body: Obx(
@@ -67,13 +69,12 @@ class SaladScreen extends StatelessWidget {
6769
),
6870
),
6971
children: [
70-
const SizedBox(
71-
height: 150,
72-
),
72+
SizedBox(height: resH(120)),
7373
Text(
7474
controller
7575
.saladList[controller.contentIndex.value].name!,
76-
style: GoogleFonts.getFont('Lobster', fontSize: 25),
76+
style: GoogleFonts.getFont('Lobster',
77+
fontSize: resW(20)),
7778
),
7879
CarouselSlider.builder(
7980
itemCount: controller.saladList.length,
@@ -85,7 +86,7 @@ class SaladScreen extends StatelessWidget {
8586
child: Image.asset(
8687
'assets/images/${controller.saladList[i].image!}')),
8788
options: CarouselOptions(
88-
height: 390,
89+
height: resH(310),
8990
aspectRatio: 1,
9091
viewportFraction: 0.7,
9192
initialPage: 0,
@@ -109,20 +110,21 @@ class SaladScreen extends StatelessWidget {
109110
Text(
110111
'\$ ${controller.saladList[controller.contentIndex.value].price!} \$',
111112
style: GoogleFonts.getFont('Barlow',
112-
fontSize: 25, fontWeight: FontWeight.w600),
113+
fontSize: resW(25),
114+
fontWeight: FontWeight.w600),
113115
),
114116
const Icon(
115117
Icons.favorite_rounded,
116118
color: Colors.grey,
117119
),
118120
],
119121
),
120-
const SizedBox(height: 35),
122+
SizedBox(height: resH(35)),
121123
Row(
122124
mainAxisAlignment: MainAxisAlignment.center,
123125
children: [
124126
IconButton(
125-
iconSize: 35,
127+
iconSize: resH(35),
126128
onPressed: () {
127129
if (controller
128130
.saladList[
@@ -148,7 +150,7 @@ class SaladScreen extends StatelessWidget {
148150
),
149151
),
150152
CircleAvatar(
151-
radius: 40,
153+
radius: resH(40),
152154
backgroundColor: Colors.lime[300]!,
153155
child: Center(
154156
child: Text(
@@ -158,14 +160,14 @@ class SaladScreen extends StatelessWidget {
158160
.item
159161
.toString(),
160162
style: GoogleFonts.getFont('Barlow',
161-
fontSize: 28,
163+
fontSize: resW(28),
162164
fontWeight: FontWeight.w600,
163165
color: Colors.black),
164166
),
165167
),
166168
),
167169
IconButton(
168-
iconSize: 35,
170+
iconSize: resH(35),
169171
onPressed: () {
170172
controller
171173
.saladList[controller.contentIndex.value]
@@ -203,7 +205,7 @@ class SaladScreen extends StatelessWidget {
203205
Expanded(
204206
flex: 5,
205207
child: AvatarStack(
206-
height: 50,
208+
height: resH(50),
207209
avatars: [
208210
for (var n = 0;
209211
n < controller.orderList.length;
@@ -219,7 +221,7 @@ class SaladScreen extends StatelessWidget {
219221
'X ${controller.orderList.length}',
220222
textAlign: TextAlign.end,
221223
style: GoogleFonts.getFont('Barlow',
222-
fontSize: 28,
224+
fontSize: resW(28),
223225
fontWeight: FontWeight.w600,
224226
color: Colors.black),
225227
),

0 commit comments

Comments
 (0)