آموزش ساخت منو Navigation Drawer در فلاتر

Navigation Drawer یا به اصطلاح منو کشویی یکی از منوهای جذاب و کاربردی در زبان طراحی متریال دیزاین هست که در اپلیکیشن های امروزی محبوب و پرکاربرد است.

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

اگر آیتم هایی که میخواهید در این منو قرار دهید کمتر از 5 آیتم هستند از نظر تجربه کاربری استفاده از این کامپوننت متریال دیزاین پیشنهاد نمیشود و شما باید از bottom navigation که قبلا آموزش آن را قرار داده ایم استفاده کنید.

آشنایی با Navigation drawer

ناوبری دراور (Navigation Drawer) یک الگوی طراحی متریال دیزاین است که برای ایجاد منوی ناوبری در اپلیکیشن‌ها استفاده می‌شود. این الگو به کاربر اجازه می‌دهد به سادگی به انواع محتوا و گزینه‌ها دسترسی داشته باشد، به ویژه زمانی که اپلیکیشن دارای بیش از چند صفحه یا بخش است.

ویژگی‌های کلیدی ناوبری دراور عبارتند از:

1. دکمهٔ منو (Hamburger Icon): در ناوبری دراور، دکمهٔ منو یا همان hamburger icon، که معمولاً سه خط افقی است، نمایش داده می‌شود. با کلیک یا لمس این دکمه، ناوبری دراور از لبهٔ صفحه به داخل حرکت کرده و منوی ناوبری به کاربر نشان داده می‌شود.
   
2. شریط هدر (Header): ناوبری دراور می‌تواند یک شریط هدر داشته باشد که اطلاعات اضافی یا لوگوی برنامه را نمایش می‌دهد.
   
3. گزینه‌ها و منوها: ناوبری دراور اغلب حاوی گزینه‌ها و منوهایی است که کاربر می‌تواند از آن‌ها استفاده کند. این گزینه‌ها می‌توانند به هر نوع صفحه، بخش یا تنظیمات مربوط باشند.
   
4. ناوبری جانبی: ناوبری دراور معمولاً از لبهٔ چپ صفحه به داخل حرکت می‌کند، اما برخی اپلیکیشن‌ها ناوبری دراور را از لبهٔ راست یا حتی از لبهٔ پایین صفحه نمایش می‌دهند، به این صورت که به ناوبری جانبی (Side Navigation Drawer) معروف هستند.

ناوبری دراور به عنوان یکی از اصولی‌ترین و معمول‌ترین الگوهای طراحی متریال دیزاین استفاده می‌شود و باعث افزایش دسترسی کاربران به انواع محتوا و عملکردهای اصلی اپلیکیشن می‌شود. به طور خلاصه، این الگو به کاربر امکان می‌دهد به راحتی و به سرعت به صفحات مختلف، تنظیمات، اطلاعات جانبی و دیگر اجزاء اپلیکیشن دسترسی پیدا کند.

پیاده سازی Navigation drawer در فلاتر

برای شروع و استفاده از Navigation Drawer حتما لایه برنامه شما باید Scaffold باشد. همانطور که قبلا هم گفتیم ویجت های متریال دیزاین فریمورک فلاتر در این لایه قرار دارد.

این لایه یک ویژگی به نام drawer داره که از این ویژگی برای ساخت منو کشویی استفاده می کنیم. به مثال زیر توجه کنید:

 return Scaffold(
  appBar: AppBar(
    title: Text("Drawer app"),
  ),
  drawer: Drawer(),//this will just add the Navigation Drawer Icon
),

کد بالا برای ما یک drawer ایجاد میکند که داخل آن خالی هست.

حالا میتونیم داخل Drawer() هر نوع ویجتی که مایل هستیم قرار دهیم.

drawer: Drawer(
  child: ListView(
    children: <widget>[
      ListTile(
        title: Text("Ttem 1"),
        trailing: Icon(Icons.arrow_forward),
      ),
      ListTile(
        title: Text("Item 2"),
        trailing: Icon(Icons.arrow_forward),
      ),
    ],
  ),
),

در کد بالا یک لیست به منو خودمون اضافه کردیم که شامل دو آیکون می باشد.

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

همچنین میتوانیم به ویجت drawer خودمون یک UserAccountsDrawerHeader اضافه کنیم.

UserAccountsDrawerHeader(
  accountName: Text("Ashish Rawat"),
  accountEmail: Text("ashishrawat2911@gmail.com"),
  currentAccountPicture: CircleAvatar(
    backgroundColor:
        Theme.of(context).platform == TargetPlatform.iOS
            ? Colors.blue
            : Colors.white,
    child: Text(
      "A",
      style: TextStyle(fontSize: 40.0),
    ),
  ),
),

خروجی کد بالا اضافه شدن این بخش هدر به منو ما هست. این هدر بصورت پیش فرض برای این ویجت وجود دارد و امکان استفاده از آن را دارید همچنین میتوانید با استفاده از ویجت های لایه ای که در اختیار دارید هدر مخصوص و شخصی سازی شده ای را در این منو قرار دهید.

با دستور TargetPlatform نوع سیستم عامل کاربر و متوجه میشویم. که براساس آن رنگ خاصی را نمایش میدهیم.

امیدوارم که این مطلب برای شما مفید بوده باشد.