برگه‌ پایانی (Bottom Sheet) در فلاتر — به زبان ساده

یک برگه پایانی نمایی (View) است که می‌تواند در انتهای صفحه جهت نمایش محتوا به کاربر قرار گیرد و برای تشویق کاربر به تعامل بیشتر یا نمایش شکلی از محتوای دیگر به کاربر استفاده می‌شود. این برگه‌ها همواره در انتهای صفحه قرار می‌گیرند و کاربر می‌تواند آن‌ها را به آسانی از صفحه حذف کند. در فلاتر ما دو نوع ویجت برگه پایانی داریم که یکی «برگه پایانی دائمی» (Persistent Bottom Sheet) و دیگری برگه پایانی Modal است. در ادامه به بررسی طرز کار این برگه‌ها و روش استفاده از آن‌ها در اپلیکیشن‌های خود می‌پردازیم.

اگر به کلی با مفهوم برگه‌های پایانی ناآشنا هستید، به مثال‌های زیر که از صفحه مشخصات طراحی متریال اخذ شده‌اند توجه کنید:

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

برگه پایانی Modal

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

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی در فرادرس

کلیک کنید

برگه‌های پایانی را می‌توان با استفاده از تابع showModalBottomSheet ایجاد کرده و نمایش داد. در این مورد به طور داخلی از کلاس Navigator برای ارسال این برگه به عنوان یک route به ناوبری اپلیکیشن استفاده می‌شود:

1showModalBottomSheet<void>(context: context,
2    builder: (BuildContext context) {
3      return new Column(
4        mainAxisSize: MainAxisSize.min,
5        children: <Widget>[
6          new ListTile(
7            leading: new Icon(Icons.music_note),
8            title: new Text('Music'),
9            onTap: () => ...,          
10          ),
11          new ListTile(
12            leading: new Icon(Icons.photo_album),
13            title: new Text('Photos'),
14            onTap: () => ...,          
15          ),
16          new ListTile(
17            leading: new Icon(Icons.videocam),
18            title: new Text('Video'),
19            onTap: () => ...,          
20          ),
21        ],
22      );
23   });
24});

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

ما برای آرگومان سازنده تابع showModalBottomSheet باید یک ویجت بازگشت دهیم که درون برگه نمایش می‌یابد. این ویجت بسته به الزامات پیاده‌سازی متفاوت خواهد بود؛ اما در مثال این نوشته ما از یک ستون برای نمایش مجموعه‌ای از وهله‌های ListTile استفاده کرده‌ایم، زیرا این موارد با ظاهر بصری برگه‌ای که در تصویر طراحی متریال ارائه کردیم همخوانی بیشتری دارد. زمانی که خارج از برگه پایانی کلیک شود، این کادر محو می‌شود و به طور کامل از ویو حذف خواهد شد. زیرا این یک برگه پایانی Modal است و state دائمی ندارد. این برگه به این خاطر طراحی شده است که اقدام خاصی را در زمینه جاری اجرا کند. نکته: اگر از یک ستون برای محتوای برگه استفاده می‌کنید باید از خصوصیت mainAxisSize به صورت MainAxisSize.min استفاده کنید، زیرا بدین ترتیب اطمینان حاصل می‌شود که محتوا می‌تواند به چند خط بشکند.

برگه پایانی دائمی

زمانی که یک برگه پایانی دائمی نمایش می‌یابد در واقع به عنوان مکمل محتوای کنونی اپلیکیشن ظاهر می‌شود. این برگه‌ها می‌توانند برای نمایش محتوایی با آگاهی از زمینه استفاده شوند و تا زمانی که کاربر به صفحه دیگری نرفته است آنجا می‌مانند. با زدن دکمه back یا کشیدن برگه پایانی به سمت پایین، این برگه به جای اولیه خود بازمی‌گردد تا این که دوباره از سوی کاربر بالا کشیده شود. با این وجود در این زمان همچنان در ویو می‌ماند و آماده است که کاربر مجدداً آن را بالا بکشد.

فیلم آموزش پروژه محور فلاتر Flutter – طراحی اپلیکیشن آب و هوا در فرادرس

کلیک کنید

زمانی که می‌خواهیم از برگه پایانی دائمی استفاده کنیم، باید کارها را به طرزی نسبتاً متفاوت انجام دهیم. قبل از هر چیز باید یک وهله GlobalKey سراسری ایجاد کنیم که به ما دسترسی Scaffold می‌دهد. این دسترسی برای نمایش برگه پایانی دائمی لازم است.

1final GlobalKey<ScaffoldState> _scaffoldKey = new 
2        GlobalKey<ScaffoldState>();

سپس باید این کلید را به صورت زیر به Scaffold خود انتساب دهیم:

1return new Scaffold(
2  key: _scaffoldKey,
3  ....

در این مرحله می‌توانیم از کلید Scaffold برای بازیابی state جاری و نمایش برگه پایانی دائمی‌مان استفاده کنیم:

1_scaffoldKey.currentState
2    .showBottomSheet<Null>((BuildContext context) {
3  return new Container(
4      child: new Column(
5    mainAxisSize: MainAxisSize.min,
6    children: <Widget>[
7      new Padding(
8          padding: const EdgeInsets.all(16.0),
9          child: new Text(
10            'Persistent header for bottom bar!',
11            textAlign: TextAlign.left,
12          )),
13      new Text(
14        'Then here there will likely be some other content '
15            'which will be displayed within the bottom bar',
16        textAlign: TextAlign.left,
17      ),
18    ],
19  ));
20});

ما به این تنظیمات اضافی نیاز داریم زیرا برگه پایانی دائمی نسبت به برگه پایانی Modal طرز کار نسبتاً متفاوتی دارد. برگه پایانی Modal اساساً یک کادر مسدودکننده است و از این رو می‌تواند روی صفحه به کاربر نمایش داده شود. اما از آنجا که برگه پایانی دائمی باید به داخل ویو وارد و خارج شود، در واقع مکمل زمینه جاری صفحه است و باید از Scaffold-ی که هم اینک در آن نمایش یافته است آگاه باشد.

زمانی که می‌خواهیم محتوایی درون برگه پایانی دائمی نمایش دهیم همانند برگه پایانی Modal عمل می‌کنیم و از یک ویجت برای نمایش محتوا بهره می‌گیریم.

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

زمانی که تابع showBottomSheet را فراخوانی می‌کنیم یک وهله از PersistentBottomSheetController بازگشت می‌یابد که می‌توانیم از آن به عنوان کنترلر برای بستن برگه پایانی به صورت برنامه‌نویسی شده استفاده کنیم:

1PersistentBottomSheetController controller = 
2        _scaffoldKey.currentState.showBottomSheet...
3
4controller.close();

همچنین می‌توانیم با بازیابی یک Future از کنترلر، یک متد برای زمان بسته شدن ویجت تعریف کنیم و به این ترتیب امکان نمایش واکنش به بسته شدن برگه را نیز پیدا می‌کنیم:

1controller.closed.then(...)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌نویسی اندروید
• مجموعه آموزش‌های طراحی و برنامه نویسی وب
• گوگل فلاتر (Flutter) از صفر تا صد — ساخت اپلیکیشن به کمک ویجت
• مجموعه آموزش های پروژه محور برنامه نویسی
• آموزش گوگل فلاتر (Flutter ): ساخت اپلیکیشن دستورهای آشپزی
• ویجت Hero در گوگل فلاتر (Flutter) — از صفر تا صد
• آموزش ListView و ScrollPhysics در فلاتر (Flutter) — از صفر تا صد
• آموزش فلاتر (Flutter): توسعه اپلیکیشن برای صفحات نمایش با ابعاد مختلف

==