آموزش ساخت تولبار Appbar در برنامه نویسی فلاتر

تقریبا میتونیم بگیم اکثر اپلیکیشن ها دارای یک قسمت به نام تولبار هستند که معمولا شامل یک متن و چند آیکون می شود.

تولبارها در بالای صفحه قرار میگیرند و بقیه ویجت ها در زیر آنها پیاده سازی می شود.

تولبار چیست؟

در موبایل، تولبار (Toolbar) یک عنصر واسط کاربری است که در بالای صفحه نمایش داده می‌شود و عمدتاً شامل عناصری مانند عنوان برنامه، دکمه‌ها، ناحیهٔ جستجو و دیگر ویژگی‌ها می‌باشد.
تولبار به عنوان ناوبری اصلی برنامه استفاده می‌شود و کاربران معمولاً از طریق آن به صفحات مختلف برنامه دسترسی پیدا می‌کنند.

تولبار در موبایل معمولاً در بالای صفحه‌ها قرار می‌گیرد و می‌تواند شامل اجزاء زیر باشد:

1. عنوان برنامه (App Title): بخشی که عنوان برنامه یا صفحه کنونی را نمایش می‌دهد.
   
2. دکمهٔ منو (Hamburger Icon): دکمه‌ای که با کلیک بر روی آن، منوی ناوبری (Navigation Drawer) باز می‌شود و به کاربر امکان نمایش گزینه‌های ناوبری را می‌دهد.
   
3. دکمهٔ برگشت (Back Button): در صفحات فرعی، دکمه‌ای که با کلیک بر روی آن به صفحهٔ قبلی بازگشت می‌کند.
   
4. دکمه‌ها (Action Buttons): دکمه‌هایی که عملکردهای مرتبط با صفحه فعلی را اجرا می‌کنند. مثلاً دکمه‌ای برای ایجاد یک مورد جدید، دکمه‌ای برای ارسال یک پیام، دکمه‌ای برای جستجو و غیره.
   
5. ناحیهٔ جستجو (Search Bar): ناحیه‌ای برای جستجو در محتوا یا داده‌های صفحه.
   
6. منوی آبشاری (Overflow Menu): دکمه‌ای که با کلیک بر روی آن، فهرستی از گزینه‌ها و دکمه‌های دیگر نمایش داده می‌شود که در تولبار جا نیفتاده‌اند.

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

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

در فلاتر برای ساخت تولبار ما از یک لایه به نام Scafold استفاده می کنیم. این لایه ویجت های جالبی در اختیار ما میگذارد یکی از این ویجت ها Appbar نام دارد.

با استفاده از Appbar ما میتونیم به راحتی با 2 خط کد تولباری متریال طراحی کنیم.

Widget build(BuildContext context) 
{ return MaterialApp( 
home: Scaffold()
} appbar: Appbar(), 
body: Text('Hello Flutter') 
}

کد بالا یک تولبار برای ما ایجاد میکند که هیچ متن یا آیکون خاصی ندارد همچنین در بخش body ما کدهای مربوط به ویجت های بدنه صفحه و قرار میدهیم یعنی کدهای این قسمت در پایین تولبار نمایش داده می شوند.

کار با ویجت RangeSlider در فلاتر

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

Widget build(BuildContext context) { 
return MaterialApp( 
home: Scaffold()
} 
appbar: Appbar(
 title: Text('Hello Flutter') ),
 body: Text('Hello Flutter')
 }

خروجی کد بالا تصویر زیر می باشد که عنوان در تولبار نمایش داده می شود.

عنوان بصورت پیش فرض در سیستم عامل ios وسط نمایش داده می شود اما در اندروید در سمت چپ قرار میگیرد برای به وسط اوردن متن در اندروید از دستور زیر قبل از title استفاده کنید استفاده کنید.

  centerTitle: true

به غیر از ویژگی title ویژگی مهم دیگری هم Appbar داره که عموما برای اضافه کردن ایکون در این قسمت استفاده می شود که actions نام دارد.

 
title: Text('My Fancy Dress'),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.playlist_play),
      tooltip: 'Air it',
      onPressed: _airDress,
    )

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

برای مطالعه بیشتر درباره فلاتر میتوانید به بخش آموزش Flutter مراجعه کنید.