0

flutter web – شروع به کار با طراحی responsive(قسمت اول)

 

فلاتر وب مدت زیادی است که در ورژنهای فلاتر وجود داشت و میتوانستیم از ان استفاده کنیم اما در اخرین نسخه از فلاتر به حالت stable در آمده است و میتوان به سادگی از آن استفاده کرد چون در حال حاضر پایدار است و به سرعت در حال محبوبیت از سمت برنامه نویسان است, اگه هنوز فرصتی برای بررسی فلاتر وب نداشته اید الان فرصت مناسبی است که به این موضوع بپردازیم

در این مقاله ، من به شما نشان خواهم داد که چگونه با یک پروژه وب Flutter شروع به کار کنید وهمچنین طراحی responsive برای آن ایجاد کنید.

معماری flutter web

قبل از شروع پروژه ، بیایید نگاهی به معماری وب Flutter بیندازیم.
اگر با معماری Flutter استفاده شده در برنامه های تلفن همراه آشنایی ندارید ، در اینجا یک بررسی اجمالی داریم:

معماری Flutter برای برنامه های تلفن همراه به طور عمده از سه لایه زیر تشکیل شده است:

Framework (چارچوب): این لایه کاملاً در دارت نوشته شده است و از عناصر اصلی سازنده فلاتر تشکیل شده است.

Engine (موتور) : لایه زیر در درجه اول به زبان C / C ++ نوشته شده است و پشتیبانی کم نظیر را با استفاده از کتابخانه گرافیکی Skia Google ارائه می دهد.

Embedder: این لایه اساساً از تمام وابستگی های خاص سیستم عامل تشکیل شده است.

حال ، بیایید نگاهی به معماری وب Flutter و تفاوت آن با مطلب بالا بیندازیم.

معماری وب Flutter فقط با استفاده از دو لایه به تصویر کشیده شده است:
چارچوب: متشکل از کد خالص دارت.
مرورگر: از C ++ و کد JavaScript تشکیل شده است.
همانطور که مشاهده می کنید ، لایه بالایی (Framework) تقریباً همان نوع سازه را دارد که معماری Flutter معمولی است.

تفاوت اصلی در لایه Browser است. در واقع ، دو لایه جداگانه پایین در معماری موبایل فقط با یک لایه جایگزین می شوند. به جای Skia Graphics Engine (چون در مرورگرها پشتیبانی نمی شود) ، از موتور جاوا اسکریپت استفاده می کند. وب Flutter به جای کد دستگاه ARM که برای برنامه های تلفن همراه استفاده می شود ، شامل ایجاد دارت به JavaScript است. این از ترکیبی از DOM ، Canvas و CSS برای ارائه اجزای Flutter در مرورگر استفاده می کند.

شروع کار با فلاتر وب

در حال حاظر شما میتوانید به راحتی با اخرین نسخه فلاتر پروژه فلاتر وب خود را ایجاد کنید اما اگر از نسخه های قدیمی تر استفاده میکنید باید این مورد را در چنل بتا پیدا کنید
برای اجرا و دیباگ کردن  یک برنامه وب Flutter ، به Chrome نیاز دارید.
برای ایجاد یک پروژه وب جدید Flutter مراحل زیر را دنبال کنید:

۱-انتقال به کانال بتا:

flutter channel beta

 

2-اپدیت کردن فلاتر:

flutter upgrade

3-فعال کردن پشتیبانی وب:

flutter config --enable-web

۴-ایجاد یک پروژهفلاتر جدید:

flutter create explore

در اینجا explore اسمی است که من برای پروژه فلاتر وب خود انتخاب کرده ام شما میتوانید هر نامی که مدنظرتون هست رو قرار بدین

5. پروژه را با استفاده از IDE مورد علاقه خود باز کنید.

برای باز کردن آن با استفاده از VS Code ، می توانید از این دستور استفاده کنید:

code explore

حال ، اگر نگاهی به ساختار دایرکتوری  یا فولدر ها بیندازید ، متوجه خواهید شد که پوشه ای به نام وب وجود دارد.

این بدان معنی است که پروژه شما به درستی پیکربندی شده است تا در مرورگرها اجرا شود. همچنین ، خواهید دید که Chrome به عنوان یکی از دستگاه های اجرای برنامه Flutter در دسترس است.

همان برنامه شروع به کار Counter را خواهید داشت. برای اجرای آن از VS Code ، می توانید از F5 استفاده کنید یا می توانید از این دستور از ترمینال استفاده کنید:

flutter run -d chrome

اگر این برنامه اجرا شود وضعیت ان در حال حاضر به شکل زیر است

حالا بیایید پس از ساختن و اجرای پروژه فلاتر وب پروژه که مد نظر خودمان است را بسازیم

طراحی رابط کاربری فلاتر وب

به lib> main.dart بروید و کل کد را با موارد زیر جایگزین کنید

// main.dart
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Explore',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;

    return Scaffold();
  }
}

 

اکنون ما باید ویجت ویا کلاس HomePage را ایجاد کنیم که حاوی ui برنامه است, کمی جلوتر متوجه خواهید شد چرا من از  Stateful Widget در این قسمت استفاده کرده ام.

شاید متوجه شده باشید که من از MediaQuery برای اندازه صفحه استفاده کرده ام. من این کار را انجام داده ام زیرا اندازه ویجت ها را با توجه به اندازه صفحه اندازه می کنم. این کار میتواند باعث responsive شدن ویجت ها شود و از بیشتر مشکلات سرریز هنگام تغییر اندازه پنجره مرورگر جلوگیری می کند.
بیایید یک نوار بالایی اضافه کنیم که به شکل زیر باشد:

برای انجام این کار ، به کد زیر احتیاج دارید

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;

    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size(screenSize.width, 1000),
        child: Container(
          color: Colors.blue,
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Row(
              children: [
                Text('EXPLORE'),
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      InkWell(
                        onTap: () {},
                        child: Text(
                          'Discover',
                          style: TextStyle(color: Colors.black),
                        ),
                      ),
                      SizedBox(width: screenSize.width / 20),
                      InkWell(
                        onTap: () {},
                        child: Text(
                          'Contact Us',
                          style: TextStyle(color: Colors.black),
                        ),
                      ),
                    ],
                  ),
                ),
                InkWell(
                  onTap: () {},
                  child: Text(
                    'Sign Up',
                    style: TextStyle(color: Colors.black),
                  ),
                ),
                SizedBox(
                  width: screenSize.width / 50,
                ),
                InkWell(
                  onTap: () {},
                  child: Text(
                    'Login',
                    style: TextStyle(color: Colors.black),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      body: Container(),
    );
  }
}

بلافاصله متوجه خواهید شد که مشکلی وجود دارد و به نظر نمی رسد رابط کاربر وب باشد. اثر شناور کجاست؟
بله ، اجزای Flutter به طور پیش فرض افکت hover ندارند. اما من ساده ترین راه برای رسیدن به آن را به شما نشان خواهم داد. برای اینکه بدانید این مورد چیست  ، پس از افزودن اثر hover ، مانند شکل زیر به نظر می رسد:

نمایش تصویر

ویجت InkWell خاصیتی به نام onHover دارد که می توانید از آن برای ردیابی زمان ورود یا خروج نشانگر ماوس از این مولفه  استفاده کنید.

برای دریافت این افکت  مراحل زیر را دنبال کنید:

لیستی از booleans را که برای ردیابی ویجت که باید تغیر کند و hover هست استفاده می شود را  اضافه کنید

List _isHovering = [false, false, false, false];

حال شما میتوانید مقدار bool ویجت مورد نظری که میخواهید هنگام رفتن موس در ان مشخص شود را ادیت کنید به عنوان مثال با روش زیر توانسته ایم مقدار discover را هنگام ورود موس با تغیر رنگ و نمایش یک خط در زیر آن مشخص کرده ایم

InkWell(
  onHover: (value) {
    setState(() {
      _isHovering[0] = value;
    });
  },
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Text(
        'Discover',
        style: TextStyle(
          color: _isHovering[0]
              ? Colors.blue.shade200
              : Colors.white,
        ),
      ),
      SizedBox(height: 5),
      // For showing an underline on hover
      Visibility(
        maintainAnimation: true,
        maintainState: true,
        maintainSize: true,
        visible: _isHovering[0],
        child: Container(
          height: 2,
          width: 20,
          color: Colors.white,
        ),
      )
    ],
  ),
),

در قسمت های بعدی از این سری آموزش ها این قسمت را ادامه خواهیم داد

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *