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

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

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

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

برای شروع و استفاده از 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 نوع سیستم عامل کاربر و متوجه میشویم. که براساس آن رنگ خاصی را نمایش میدهیم.

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