کار با Scaffold در Flutter

ویجت Scaffold در برنامه نویسی فلاتر به عنوان یک اسکلت بندی برای صفحات اپلیکیشن‌ها عمل می‌کند. این ویجت اساسی‌ترین عناصر طراحی متریال را پیاده‌سازی می‌کند و به کاربران امکان می‌دهد تا صفحات اپلیکیشن خود را با عناصری مانند نوار بالا (AppBar)، دکمه عمل شناور (FloatingActionButton)، نوار ناوبری پایین (BottomNavigationBar)، و کشوی کناری (Drawer) به راحتی ایجاد کنند. Scaffold تمام صفحه را اشغال می‌کند و ویجت‌های فرزند را برای نمایش روی صفحه در خود جای می‌دهد.

استفاده از Scaffold برای توسعه‌دهندگان فلاتر بسیار سودمند است، زیرا از نیاز به ساخت دستی تک تک عناصر بصری جلوگیری می‌کند و به آنها امکان می‌دهد تا بر روی اصلی‌تر تمرکز کنند. این کار باعث صرفه‌جویی در زمان و افزایش کارایی در فرآیند توسعه اپلیکیشن می‌شود. Scaffold همچنین ابزارها و ویجت‌هایی برای اضافه کردن ویژگی‌های مختلف مانند نوارهای اعلان و پیام‌های کوتاه را فراهم می‌آورد.

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

    const Scaffold({  
        Key key,  
        this.appBar,  
        this.body,  
        this.floatingActionButton,  
        this.floatingActionButtonLocation,  
        this.persistentFooterButtons,  
        this.drawer,  
        this.endDrawer,  
        this.bottomNavigationBar,  
        this.bottomSheet,  
        this.floatingActionButtonAnimator,  
        this.backgroundColor,  
        this.resizeToAvoidBottomPadding = true,  
        this.primary = true,  
      })   

1. appBar:

این یک نوار افقی است که عمدتاً در بالای ویجت Scaffold نمایش داده می‌شود. این بخش اصلی ویجت Scaffold است و در بالای صفحه قرار می‌گیرد. بدون این ویژگی، ویجت Scaffold ناقص است. از ویجت AppBar استفاده می‌کند که خود شامل خصوصیات مختلفی مانند برجستگی (elevation)، عنوان (title)، روشنایی (brightness) و غیره است. به مثال زیر توجه کنید:

    Widget build(BuildContext context)   
{  
  return Scaffold(  
    appBar: AppBar(  
      title: Text('First Flutter Application'),  
    ), )  
}

در کد بالا، ویژگی title از ویجت Text برای نمایش متن روی صفحه استفاده می‌کند.

appBar می‌تواند شامل دکمه‌های عملیاتی مانند دکمه بازگشت (back button)، منو، یا دیگر ویجت‌های اختیاری باشد که به طور معمول در نوار ابزار استفاده می‌شوند.ویجت AppBar همچنین می‌تواند شامل ویجت‌های دیگری در منطقه عنوان یا انتهای نوار باشد، مانند آیکون‌ها، متن‌های اضافی یا سفارشی‌سازی‌های خاص.ویجت AppBar در فلاتر برای ارائه یک تجربه کاربری آشنا و یکنواخت در برنامه‌های موبایلی طراحی شده است، و ارائه یک نوار بالای صفحه با قابلیت‌های ناوبری و دسترسی آسان است.

2. بدنه اصلی (body):

این خصوصیت اصلی ویجت Scaffold است که محتوای اصلی صفحه را نشان می‌دهد. محتوا در زیر نوار بالایی (appBar) و پشت دکمه شناور (floatingActionButton) و منوی کشویی (drawer) قرار می‌گیرد. ویجت‌های درون body به طور خودکار در بالا و سمت چپ فضای موجود قرار می‌گیرند. نمونه کد زیر را ببینید:

    Widget build(BuildContext context) {   
        return Scaffold(   
            appBar: AppBar(   
            title: Text('First Flutter Application'),   
            ),   
            body: Center(   
            child: Text("Welcome to Javatpoint",   
                style: TextStyle( color: Colors.black, fontSize: 30.0,   
                ),   
                 ),   
            ),  
        }  

در این کد، ما یک متن با عنوان "Welcome to Javatpoint" را در بدنه نشان داده‌ایم. این متن با استفاده از ویجت `Center` در مرکز صفحه قرار دارد و با استفاده از `TextStyle`، سبک متن تنظیم شده است که شامل رنگ و اندازه قلم است.

نکات کلیدی:

• `Scaffold` برای ساخت صفحات اصلی در اپلیکیشن‌های فلاتر استفاده می‌شود.
• `body` قلب محتوایی صفحه است که تمام المان‌های کاربردی دیگر مانند `appBar` و `floatingActionButton` را پشتیبانی می‌کند.
• استفاده از `Center` برای مرکزیت دادن المان‌ها در `body` رایج است، اما می‌توانید با استفاده از ویجت‌های دیگر مانند `Column` یا `Row`، چیدمان پیچیده‌تری ایجاد کنید.

3. drawer:

این یک پنل لغزنده است که در کنار بدنه نمایش داده می‌شود. معمولاً روی دستگاه‌های موبایل پنهان است، اما کاربر می‌تواند با کشیدن از چپ به راست یا برعکس منوی کشویی را دسترسی پیدا کند. از ویژگی‌های ویجت Drawer استفاده می‌کند که در جهت افقی از لبه Scaffold حرکت می‌کند تا لینک‌های ناوبری در برنامه را نشان دهد. یک آیکون مناسب برای کشو به طور خودکار در ویژگی appBar تنظیم می‌شود. حرکت برای باز کردن کشو نیز به طور خودکار تنظیم شده است. به کد زیر نگاه کنید.

    drawer: Drawer(   
        child: ListView(   
        children: const [   
        DrawerHeader(   
            decoration: BoxDecoration(   
            color: Colors.red,   
            ),   
            child: Text(   
            'Welcome to Javatpoint',   
            style: TextStyle(   
                color: Colors.green,   
                fontSize: 30,   
            ),   
              ),   
        ),   
        ListTile(   
            title: Text('1'),   
        ),   
        ListTile(  
            title: new Text("All Mail Inboxes"),  
            leading: new Icon(Icons.mail),  
        ),  
        Divider(  
            height: 0.2,  
        ),  
        ListTile(  
            title: new Text("Primary"),  
        ),  
        ListTile(  
            title: new Text("Social"),  
        ),  
        ListTile(  
            title: new Text("Promotions"),  
        ),   
        ],   
         ),   
  ),  

توضیحات اضافی:

در کد بالا، ما از ویژگی `drawer` در Scaffold برای ایجاد یک کشو استفاده کردیم. همچنین از چند ویجت دیگر برای جذاب‌تر کردن آن استفاده کرده‌ایم. در ویجت ListView، پنل را به دو بخش، سربرگ و منو، تقسیم کرده‌ایم. ویژگی DrawerHeader سربرگ پنل را تغییر می‌دهد که می‌تواند شامل آیکون یا جزئیات مربوط به برنامه باشد. سپس، ما از ListTile برای افزودن موارد لیست در منو استفاده کردیم.

4. floatingActionButton:

این یک دکمه است که در گوشه پایین سمت راست صفحه نمایش داده می‌شود و بر فراز بدنه اصلی شناور است. این دکمه به شکل یک آیکون دایره‌ای است که بر روی محتوای صفحه در یک مکان ثابت قرار دارد تا یک عمل اصلی در برنامه را ترویج دهد. در هنگام اسکرول کردن صفحه، موقعیت آن تغییر نمی‌کند. این دکمه از ویژگی‌های ویجت `FloatingActionButton` استفاده می‌کند که از طریق `Scaffold.floatingActionButton` فراخوانی می‌شود. کد زیر را ببینید:

    Widget build(BuildContext context) {   
        return Scaffold(   
   appBar: AppBar(title: Text('First Flutter Application')),   
   body: Center(   
       child: Text("Welcome to Javatpoint!!"),   
   ),   
   floatingActionButton: FloatingActionButton(   
       elevation: 8.0,   
       child: Icon(Icons.add),   
       onPressed: (){   
          print('I am Floating Action Button');  
       }   
   );   
}  

در کد بالا، ما از ویژگی `elevation` استفاده کرده‌ایم که اثر سایه را به دکمه می‌بخشد. همچنین از ویجت `Icon` برای افزودن یک آیکون به دکمه با استفاده از آیکون‌های آماده‌ی فلاتر SDK استفاده شده است. ویژگی `onPressed()` زمانی فراخوانی می‌شود که کاربر روی دکمه ضربه بزند، و جمله "I am Floating Action Button" در کنسول چاپ می‌شود.

5. backgroundColor:

این ویژگی برای تنظیم رنگ پس‌زمینه کل ویجت Scaffold استفاده می‌شود. این ویژگی به شما امکان می‌دهد رنگ پس‌زمینه‌ی اصلی Scaffold را تنظیم کنید، که می‌تواند بر ظاهر کلی برنامه تأثیر بگذارد. مثلاً با استفاده از `Colors.yellow` می‌توانید پس‌زمینه‌ای زرد رنگ ایجاد کنید که برای برنامه‌هایی با طراحی شاد و جوان پسند مناسب است.

backgroundColor: Colors.yellow,  

6. primary:

این ویژگی برای مشخص کردن اینکه آیا Scaffold در بالای صفحه نمایش داده شود یا خیر، استفاده می‌شود. مقدار پیش‌فرض آن true است که به این معناست که ارتفاع appBar توسط ارتفاع نوار وضعیت صفحه افزایش می‌یابد. این ویژگی در حقیقت تعیین‌کننده‌ی این است که آیا Scaffold باید از نوار وضعیت بالای صفحه (status bar) نیز فضایی را اشغال کند یا خیر. اگر این ویژگی روی `true` تنظیم شده باشد، Scaffold به طور خودکار شامل نوار وضعیت خواهد شد و این می‌تواند برای طراحی‌هایی که می‌خواهند تمام صفحه به نظر برسند، مفید باشد. در صورتی که `false` باشد، Scaffold دقیقاً زیر نوار وضعیت قرار خواهد گرفت که می‌تواند برای دسترسی بهتر به المان‌های UI در برنامه‌هایی با طراحی دقیق‌تر مورد استفاده قرار گیرد.

primary: true/false,  

7. persistentFooterButtons

`persistentFooterButtons` یک لیست از دکمه‌ها است که در پایین ویجت Scaffold نمایش داده می‌شوند. این خاصیت به طوری تنظیم شده است که دکمه‌ها همیشه قابل مشاهده هستند؛ حتی زمانی که بدنه Scaffold اسکرول می‌شود. این دکمه‌ها همیشه درون یک ویجت ButtonBar قرار می‌گیرند و زیر بدنه ولی بالای `bottomNavigationBar` رندر می‌شوند.

persistentFooterButtons: [  
    RaisedButton(  
      onPressed: () {},  
      color: Colors.blue,  
      child: Icon(  
        Icons.add,  
        color: Colors.white,  
      ),  
    ),  
    RaisedButton(  
      onPressed: () {},  
      color: Colors.green,  
      child: Icon(  
        Icons.clear,  
        color: Colors.white,  
      ),  
    ),  
  ],  

در کد بالا، از `RaisedButton` برای نمایش دکمه‌ها در پایین Scaffold استفاده شده است. به جای `RaisedButton` می‌توان از `FlatButton` هم استفاده کرد.

توضیحات اضافی و تغییرات:

• RaisedButton به ElevatedButton تغییر یافته است: در نسخه‌های جدید فلاتر، `RaisedButton` منسوخ شده و به جای آن از `ElevatedButton` استفاده می‌شود. این تغییر به منظور هماهنگی بهتر با اصول طراحی متریال و فراهم آوردن قابلیت‌های بیشتر است.
• FlatButton به TextButton تغییر یافته است: همچنین `FlatButton` به `TextButton` تغییر نام داده شده است که سادگی بیشتری در طراحی و بهبود عملکرد را ارائه می‌دهد.

نمونه کد به‌روز شده با تغییرات جدید:

    persistentFooterButtons: [
        ElevatedButton(
          onPressed: () {},
          style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.blue)),
          child: Icon(
            Icons.add,
            color: Colors.white,
          ),
        ),
        ElevatedButton(
          onPressed: () {},
          style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.green)),
          child: Icon(
            Icons.clear,
            color: Colors.white,
          ),
        ),
      ],
      

8. bottomNavigationBar:

این ویژگی مانند یک منو عمل می‌کند که نوار ناوبری را در پایین `Scaffold` نمایش می‌دهد. این نوار ناوبری در بیشتر اپلیکیشن‌های موبایل دیده می‌شود. این ویژگی به توسعه‌دهنده اجازه می‌دهد تا چندین آیکون یا متن را به عنوان آیتم‌ها در نوار اضافه کند. این نوار باید زیر بدنه اصلی و دکمه‌های پایدار پاورقی قرار گیرد. کد زیر را ببینید:

bottomNavigationBar: BottomNavigationBar(  
    currentIndex: 0,  
    fixedColor: Colors.grey,  
    items: [  
      BottomNavigationBarItem(  
        title: Text("Home"),  
        icon: Icon(Icons.home),  
      ),  
      BottomNavigationBarItem(  
        title: Text("Search"),  
        icon: Icon(Icons.search),  
      ),  
      BottomNavigationBarItem(  
        title: Text("User Profile"),  
        icon: Icon(Icons.account_circle),  
      ),  
    ],  
    onTap: (int itemIndex){  
      setState(() {  
        _currentIndex = itemIndex;  
      });  
    },  
  ),  

در کد بالا، از ویجت `BottomNavigationBar` برای نمایش نوار منو استفاده شده است. ویژگی `fixedColor` برای تعیین رنگ آیکون فعال استفاده می‌شود. ویجت `BottomNavigationBarItems` برای افزودن آیتم‌ها به نوار استفاده می‌شود که شامل متن و آیکون به عنوان خصوصیات فرزندانش است. همچنین از تابع `onTap(int itemIndex)` برای انجام عملیاتی هنگام زدن بر روی آیتم‌ها استفاده شده است، که بر اساس موقعیت شاخص آنها کار می‌کند.

9.endDrawer:

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

10. resizeToAvoidBottomInset:

اگر این مقدار درست (true) باشد، بدنه و ویجت‌های شناور Scaffold باید اندازه خود را برای اجتناب از صفحه‌کلید روی صفحه تنظیم کنند. ویژگی bottom ارتفاع صفحه‌کلید روی صفحه را تعریف می‌کند. این ویژگی به ویژه در صفحاتی که فیلدهای ورودی متن دارند مهم است. با فعال کردن این گزینه، می‌توانید جلوگیری کنید که صفحه‌کلید مجازی فیلدهای متنی را که در پایین صفحه قرار دارند، بپوشاند. این عملکرد به کاربر اجازه می‌دهد تا به راحتی متن را وارد کند بدون اینکه مشکل دیداری با صفحه‌کلید داشته باشد.

11. موقعیت floatingActionButtonLocation:

به طور پیش‌فرض، در گوشه پایین سمت راست صفحه قرار دارد. این موقعیت برای تعیین مکان دکمه عمل شناور (floatingActionButton) استفاده می‌شود. این تنظیم شامل بسیاری از مقادیر پیش‌تعریف شده است، مانند centerDocked, centerFloat, endDocked, endFloat و غیره.

بیایید نمونه‌ای را بررسی کنیم که در آن سعی شده است از بیشتر خصوصیات Scaffold برای درک سریع و آسان این ویجت استفاده شود.

در این نمونه، قصد داریم یک ویجت Scaffold با AppBar، BottomAppBar، FloatingActionButton، floatingActionButtonLocation و خواص کشو (drawer) را مشاهده کنیم.

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// این ویجت، ویجت اصلی برنامه است.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State {
  int _count = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('مثال Scaffold در فلاتر'),
      ),
      body: Center(
        child: Text('دکمه $_count بار فشرده شده است.'),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Container(
          height: 50.0,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _count++;
        }),
        tooltip: 'افزایش شمارنده',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      drawer: Drawer(
        elevation: 20.0,
        child: Column(
          children: [
            UserAccountsDrawerHeader(
              accountName: Text("javatpoint"),
              accountEmail: Text("javatpoint@gmail.com"),
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.yellow,
                child: Text("abc"),
              ),
            ),
            ListTile(
              title: new Text("صندوق ورودی"),
              leading: new Icon(Icons.mail),
            ),
            Divider(height: 0.1,),
            ListTile(
              title: new Text("اصلی"),
              leading: new Icon(Icons.inbox),
            ),
            ListTile(
              title: new Text("اجتماعی"),
              leading: new Icon(Icons.people),
            ),
            ListTile(
              title: new Text("تبلیغات"),
              leading: new Icon(Icons.local_offer),
            )
          ],
        ),
      ),
    );
  }
}

خروجی:

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

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