معرفی پکیج Device Preview

زمانی که یک پروژه رو طراحی و پیاده سازی میکنم همیشه ذهنم درگیر یک موضوع خیلی مهم میشه! به این فکر میکنم که دارم این همه زحمت میکشم، نکنه با device دیگه ای، اون چیزی که اینجا طراحی شده رو به این شکل نشون نده!

اینجاست که پکیج Device Preview به کمک شما میاد. در ادامه روش پیاده سازی این پکیج رو یاد میگیریم و اینکه چطور ازش استفاده کنیم.

اول از همه به سایت مرجع پکیج های فلاتر مراجعه میکنیم و Device Preview رو سرچ میکنیم. طبق راهنمای installing عبارت زیر رو داخل فایل pubspec.yaml کپی میکنیم.

device_preview: ^1.1.0

حالا با Import کردن این پکیج باید بریم سراغ تنظیماتش...

import 'package:device_preview/device_preview.dart';

تمامی تنظیمات داخل صفحه main.dart ما انجام میشه. با استفاده از ویجت DevicePreview به شکل زیر

void main() { runApp(const MyApp()); }

class MyApp extends StatelessWidget {
   const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
   return DevicePreview(
      enabled: !kReleaseMode,
      builder: (context) => MaterialApp(
         useInheritedMediaQuery: true,
         locale: DevicePreview.locale(context),
         builder: DevicePreview.appBuilder,
         title: 'Flutter Demo',
         theme: ThemeData(
            primarySwatch: Colors.blue, ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'), ), ); 
}

پیشنهاد من در اینجا به شما اینه که به جای اجرا با emulator از web استفاده کنید تا از رابط کاربری این پکیج بتونید بهتر استفاده کنید.

به همین راحتی شما می تونید ریسپانسیو بودن ui خودتون رو داخل انواع مختلف پلتفورم ها و انواع مدل های تلفن همراه امتحان کنید.