یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها
استفاده از تخفیف‌ها
نگرانی در طراحی اپلیکیشن با فلاتر
سلام.
این سوال رو من چند جا پرسیدم اما کسی نتونسته کمکم کنه.
با این که سوال واقعا مهمه! نمیدونم چرا کسی نمیتونه جواب بده.
ببینید یه نگرانی که همیشه دارم وقتی دارم رابط کاربری رو با فلاتر طراحی میکنم، اینه که آیا این نمایی که من دارم تو Emulator میبینم، همون نماییه که همه گوشی ها چه بزرگ چه کوچیک، چه تبلت یا چه چیزای دیگه میبنن؟
مثلا فرض کنید من ارتفاع یک Container رو روی 350 تنظیم کردم و فرضا این کانتینر اومد 40 درصد صفحه Emulator رو پوشوند؛ حالا سوال مهم اینه این اتفاق که این مقدار از صفحه پوشیده بشه تو همه گوشیا یکیه؟
توی طراحی وب وقتی میزنی ارتفاع 300px اگه صفحه نمایش کوچیک باشه ممکنه مثلا 20 درصد صفحه رو بپوشونه، اما صفحه بزرگ ممکنه 1 درصد صفحه رو بپوشونه!
کسی میتونه کمک کنه در این مورد؟
چون واقعا سوال مهمیه و باید جواب داده بشه. من به خاطر همین سوال یاد گیری فلاتر رو متوقف کردم!
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام دوست عزیز
من از فلاتر دارم به صورت حرفه ای برای انجام پروژه استفاده میکنم و واقعا ازش راضی هستم .
نکته ای که باید بدونید اینه که وقتی شما مقادیر Height و Width رو در هر ویجتی مقدار دهی میکنید به هیچ وجه نباید از مقدار دهی مستقیم استفاده کنید و مثلا بگید height مقدارش بشه 200 ، چون در این صورت فقط روی اون شبیه سازی که دارید باهاش کار میکنید اندازه ها اون چیزی میشه که میخواید .
برای این که توی Flutter بتونید یک طراحی Responsive داشته باشید که روی تمامی صفحه نمایش ها یک شکل عمل کنه ، باید به این صورت عمل کنید :
در متد build که توی Statefull و Stateless موجود هست ، مقدار طول و عرض صفحه نمایش رو به این شکل دریافت کنید :
'''
var pageWidth = MediaQuery.of(context).size.width ;
var pageHeight = MediaQuery.of(context).size.height ;
'''
خوب حالا شما طول و عرض صفحه نمایش رو دارید ، ازاین به بعد باید تمامی مقادیر طول و عرض و حتی padding و margin رو به وسیله ی این مقادیر تنظیم کنید :
مثلا برای یک Container مقدار height = pageHeight/3 یعنی این که ارتفاع صفحه نمایش گوشی کاربر هرچی که هست یک سومش میشه اندازه Container .
این روش کاملا Responsive هست و خودم چندین و چند بار روی گوشی های مختلف تستش کردم .
سلام می تونی از گوشی های مختلف جهت بررسی سوالت کمک بگیری با فلاتر کار نکردم ولی با جاوا اره.تو آندروید استودیو وقتی من یک چیزی را 50 درصد بهش ارتفاع میدادم تو همه گوشی ها 50 درصد گوشی رو میگرفت.
ممنون از @mojimich2015 بابت توضیحشون..
من به تازگی شروع کردم فلاتر رو، و نگرانی از بابت رسپانسیو بودن صفحات طراحی شده در پلتفرم های مختلف نمی‌بینم.
همونطور که مجتبی توضیح داد، شما مقدار طول و عرض کل صفحه رو میگیرید، و هرجایی خواستید مقدار دهی بکنید، از همون ها استفاده میکنید و این روش جواب میده، منتهی من به شخصه از ضرب اون متغیر در یک عدد اعشاری (مثلا 0.02)، به جای تقسیم استفاده میکنم که به نظر خودم برای رسیدن به مقدار دلخواه ساده تره.. از نظر تکنیکی بعید میدونم فرقی داشته باشه، اما به نظر خودم ساده تر از تقسیمه.
میتونید مستندات این لینک رو دنبال کنید: MediaQueryData
روش دیگری هم با استفاده از LayoutBuilder هست که لینک مستنداتش رو میتونید دنبال کنید: LayoutBuilder
سلام
بهترین روش برای ریسپانسیو کردن برنامه ،برای همه سایز گوشی ها اینه که از این پلاگین استفاده کنید
https://pub.dev/packages/flutterscreenutil
که یه سری سایز ها بر اساس سایز دستگاه میده که باعث میشه تو همه دستگاه ها به نحوه احسن نمایش داده بشه
به عنوان مثال
Container(
width: 50.w,
height:200.h
)انواع مقادیر موجود در این پلاگین
50.w این واحد براساس عرض صفحه مقداری تولید میکنه
200.h این واحد براساس طول صفحه مقداری تولید میکنه
0.4.sw که مساوی با 40 درصد است
16.sp که برای سایز فونت استفاده می شه ، که باعث میشه تو اسکرین های بزرگ ،کمی سایزش بزرگ شه و تو اسکرین های کوچیک ،سایزش کمی کوچیک میشه که در کل سایز متن رو ریسپانسیو می کنه
برای استفاده باید اول این پلاگین رو در pubspec.yaml اضافه کنید
dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^4.0.2+3
-
در مرحله بعد ان را import کنین به صفحه
import 'package:flutterscreenutil/flutterscreenutil.dart';3.در مرحله بعد ،باید یه خط قبل return Scaffold این کد را وارد کنید
ScreenUtil.init(BoxConstraints(maxHeight: MediaQuery.of(context).size.height,maxWidth: MediaQuery.of(context).size.width));تمام ،حالا می تونین تو اون صفحه مقادیر رو استفاده کنین
نکته :
این روش بهترین روش برای ریسپانسیو کردن برنامه های فلاتر هست
یادتون باشه موقع مقدار دهی کلمه const نباشه ،مگرنه مقادیر رو نمیشناسه