بهترین مرجع مقالات اموزشی طراحی اپلیکیشن در مشهد

شیت اساسی

class Masterطراحی اپلیکیشن در مشهد DetailPage extends StatefulWidget {
@override
_MasterDetailPageState createState() => _MasterDetailPageState();
}

class _MasterDetailPageState extends State {
var selectedValue = 0;
var isLargeScreen = false;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: OrientationBuilder(builder: (context, orientation) {

if (MediaQuery.of(context).size.width > 600) {
isLargeScreen = true;
} else {
isLargeScreen = false;
}

return Row(children: [
Expanded(
child: ListWidget(10, (value) {
if (isLargeScreen) {
selectedValue = value;
setState(() {});
} else {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return DetailPage(value);
},
));
}
}),
),
isLargeScreen ? Expanded(child: DetailWidget(selectedValue)) : Container(),
]);
}),
);
}
}
این نصیب اساسی اپلیکیشن میباشد. ما دو متغیر داریم: selectedValue که برای ذخیره‌سازی مورد تعیین گردیده‌ی لیست به کار گیری میشود و isLargeScreen که یک مقدار بولی بی آلایش میباشد که برای ذخیره‌سازی این نکته که پهنا شیت برای اکران هر دو ویجت لیست و جزئییات پهنا کافی دارااست یا این که خیر، آیتم استعمال قرار میگیرد.

همینطور یک OrientationBuilder داریم تا در صوتی که موبایل موبایل در موقعیت افقی قرار گرفت و پهنا کافی برای اکران هر دو جزء را داشت، در‌این‌صورت‌ لی‌آوت را به‌این شکل تجدید بنا کنیم.

آغاز تحقیق میکنیم که آیا پهنا شیت برای اکران لی‌آوت ما کافی میباشد:

if (MediaQuery.of(context).size.width > 600) {
isLargeScreen = true;
} else {
isLargeScreen = false;
}
نصیب اساسی کد به طور تحت میباشد:

isLargeScreen? Expanded(child: DetailWidget(selectedValue)): Container(),
در حالتی‌که برگه گرانقدر باشد، ویجت ریزه کاری را نیز اضافه می کنیم و در‌صورتی‌که اینگونه نباشد یک کانتینر خالی رجوع و برگشت میدهیم. از ویجت‌های بازشدنی برای لبریز کردن پهنا کاغذ به کارگیری میکنیم، یا در شکل وجود برگه والا آن را به دو نصیب متناسب تقسیم میکنیم. براین اساس ویجت‌های بازشدنی قابلیت و امکان مالامال کردن نیمی از ورقه یا این که حتی درصد بیشتری از آن را با انتخاب ویژگی Flex تولید می‌نمایند.

نصیب اصلی دوم به طور پایین میباشد:

if (isLargeScreen) {
selectedValue = value;
setState(() {});
} else {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return DetailPage(value);
},
));
}
یعنی در شرایطی که از لی‌آوت والا‌خیس به کارگیری میشود، مورد نیاز وجود ندارد برای ویجت ریزه کاری به برگه دیگری برویم زیرا در همین برگه جای‌دارد. چنانچه ورقه خرد‌خیس باشد بایستی دراین‌صورت به شیت دیگری برویم، زیرا صرفا لیست در ورقه سرازیر اکران مییابد در غایت کد نمای ریزه کاری به طور ذیل میباشد.

شیت جزئییات (برای کاغذ‌های خرد‌خیس)

class DetailPage extends StatefulWidget {

final int data;

DetailPage(this.data);

@override
_DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: DetailWidget(widget.data),
);
}
}
فقط یک ویجت ریزه کاری روی این کاغذ جای دارد و برای اکران دادن داده‌ها روی شیت‌های خرد‌خیس به کارگیری می گردد.

فعلا ما یک نرم افزار بی نقص داریم که بسته به اندازه شیت و جهت قرارگیری آن تطبیق مییابد.

بعضی نکات اصلی دیگر
در‌حالتی که بخواهید لی‌آوت های متفاوتی داشته باشید؛ البته لی‌آوت‌هایی مشابه فرگمنت‌ها نداشته باشید، می توانید آنها را به آسانی باطن مشی build بنویسید:

if (MediaQuery.of(context).size.width > 600) {
isLargeScreen = true;
} else {
isLargeScreen = false;
}
return isLargeScreen? _buildTabletLayout() : _buildMobileLayout();
به‌دنبال دو روال برای ایجاد کرد لی‌آوت ها می‌نویسیم.

کلیک فرمایید
در صورتیکه می خواهید نرم افزار خویش را تنهاً برای تبلت ها پیاده سازی فرمایید، به مکان تحقیق پهنا شیت بایستی اندازه برگه را از MediaQuery بگیرید و پهنا حقیقی شیت را به مکان پهنا شیت در جهت‌گیری خاص به دست آورید. وقتی که از پهنا دریافتی از MediaQuery مستقیماً به کارگیری میکنیم، در واقع پهنا کاغذ را در وضعیت قرارگیری کنونی به دست می آوریم. براین اساس در شرایط عمودی، ارتفاع موبایل تحت عنوان پهنا در حیث گرفته میشود.

Size size = MediaQuery.of(context).size;

double width = size.width > size.height ? size.height : size.width;

if(width > 600) {
// Do something for tablets here
} else {
// Do something for phones
}

شیت اساسی

class Masterطراحی اپلیکیشن در مشهد DetailPage extends StatefulWidget {
@override
_MasterDetailPageState createState() => _MasterDetailPageState();
}

class _MasterDetailPageState extends State {
var selectedValue = 0;
var isLargeScreen = false;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: OrientationBuilder(builder: (context, orientation) {

if (MediaQuery.of(context).size.width > 600) {
isLargeScreen = true;
} else {
isLargeScreen = false;
}

return Row(children: [
Expanded(
child: ListWidget(10, (value) {
if (isLargeScreen) {
selectedValue = value;
setState(() {});
} else {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return DetailPage(value);
},
));
}
}),
),
isLargeScreen ? Expanded(child: DetailWidget(selectedValue)) : Container(),
]);
}),
);
}
}
این نصیب اساسی اپلیکیشن میباشد. ما دو متغیر داریم: selectedValue که برای ذخیره‌سازی مورد تعیین گردیده‌ی لیست به کار گیری میشود و isLargeScreen که یک مقدار بولی بی آلایش میباشد که برای ذخیره‌سازی این نکته که پهنا شیت برای اکران هر دو ویجت لیست و جزئییات پهنا کافی دارااست یا این که خیر، آیتم استعمال قرار میگیرد.

همینطور یک OrientationBuilder داریم تا در صوتی که موبایل موبایل در موقعیت افقی قرار گرفت و پهنا کافی برای اکران هر دو جزء را داشت، در‌این‌صورت‌ لی‌آوت را به‌این شکل تجدید بنا کنیم.

آغاز تحقیق میکنیم که آیا پهنا شیت برای اکران لی‌آوت ما کافی میباشد:

if (MediaQuery.of(context).size.width > 600) {
isLargeScreen = true;
} else {
isLargeScreen = false;
}
نصیب اساسی کد به طور تحت میباشد:

isLargeScreen? Expanded(child: DetailWidget(selectedValue)): Container(),
در حالتی‌که برگه گرانقدر باشد، ویجت ریزه کاری را نیز اضافه می کنیم و در‌صورتی‌که اینگونه نباشد یک کانتینر خالی رجوع و برگشت میدهیم. از ویجت‌های بازشدنی برای لبریز کردن پهنا کاغذ به کارگیری میکنیم، یا در شکل وجود برگه والا آن را به دو نصیب متناسب تقسیم میکنیم. براین اساس ویجت‌های بازشدنی قابلیت و امکان مالامال کردن نیمی از ورقه یا این که حتی درصد بیشتری از آن را با انتخاب ویژگی Flex تولید می‌نمایند.

نصیب اصلی دوم به طور پایین میباشد:

if (isLargeScreen) {
selectedValue = value;
setState(() {});
} else {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return DetailPage(value);
},
));
}
یعنی در شرایطی که از لی‌آوت والا‌خیس به کارگیری میشود، مورد نیاز وجود ندارد برای ویجت ریزه کاری به برگه دیگری برویم زیرا در همین برگه جای‌دارد. چنانچه ورقه خرد‌خیس باشد بایستی دراین‌صورت به شیت دیگری برویم، زیرا صرفا لیست در ورقه سرازیر اکران مییابد در غایت کد نمای ریزه کاری به طور ذیل میباشد.

شیت جزئییات (برای کاغذ‌های خرد‌خیس)

class DetailPage extends StatefulWidget {

final int data;

DetailPage(this.data);

@override
_DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: DetailWidget(widget.data),
);
}
}
فقط یک ویجت ریزه کاری روی این کاغذ جای دارد و برای اکران دادن داده‌ها روی شیت‌های خرد‌خیس به کارگیری می گردد.

فعلا ما یک نرم افزار بی نقص داریم که بسته به اندازه شیت و جهت قرارگیری آن تطبیق مییابد.

بعضی نکات اصلی دیگر
در‌حالتی که بخواهید لی‌آوت های متفاوتی داشته باشید؛ البته لی‌آوت‌هایی مشابه فرگمنت‌ها نداشته باشید، می توانید آنها را به آسانی باطن مشی build بنویسید:

if (MediaQuery.of(context).size.width > 600) {
isLargeScreen = true;
} else {
isLargeScreen = false;
}
return isLargeScreen? _buildTabletLayout() : _buildMobileLayout();
به‌دنبال دو روال برای ایجاد کرد لی‌آوت ها می‌نویسیم.

کلیک فرمایید
در صورتیکه می خواهید نرم افزار خویش را تنهاً برای تبلت ها پیاده سازی فرمایید، به مکان تحقیق پهنا شیت بایستی اندازه برگه را از MediaQuery بگیرید و پهنا حقیقی شیت را به مکان پهنا شیت در جهت‌گیری خاص به دست آورید. وقتی که از پهنا دریافتی از MediaQuery مستقیماً به کارگیری میکنیم، در واقع پهنا کاغذ را در وضعیت قرارگیری کنونی به دست می آوریم. براین اساس در شرایط عمودی، ارتفاع موبایل تحت عنوان پهنا در حیث گرفته میشود.

Size size = MediaQuery.of(context).size;

double width = size.width > size.height ? size.height : size.width;

if(width > 600) {
// Do something for tablets here
} else {
// Do something for phones
}