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

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

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

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