آموزش رایگان و پروژه محور فلاتر ـ ویجت Scaffold در فلاتر

ویجت Scaffold در فلاتر

ویجت Scaffold در فلاتر، بلوک سازنده اساسی برای رابط کاربری برنامه‌های شماست. این ویجت، چارچوبی را ارائه می‌دهد که شامل عناصر رایج رابط کاربری مانند نوار عنوان، نوار ناوبری، دکمه‌های شناور و محتوای صفحه می‌شود. Scaffold به شما این امکان را می‌دهد که به طور منظم و کارآمد، رابط‌های کاربری جذاب و سازگار بسازید.

مزایای استفاده از ویجت Scaffold در فلاتر

• سادگی: Scaffold با ارائه ساختار پیش‌فرض، پیاده‌سازی رابط کاربری را ساده می‌کند.
• سازگاری: Scaffold تضمین می‌کند که رابط کاربری شما با دستورالعمل‌های Material Design گوگل مطابقت داشته باشد و ظاهری یکپارچه و آشنا برای کاربران داشته باشد.
• انعطاف‌پذیری: Scaffold به شما امکان می‌دهد تا با سفارشی‌سازی آسان عناصر مختلف، رابط کاربری را متناسب با نیازهای خود تنظیم کنید.
• قابلیت استفاده مجدد: Scaffold یک جزء قابل استفاده مجدد است که می‌توانید از آن در صفحات مختلف برنامه خود بدون نیاز به نوشتن کد تکراری استفاده کنید.

پراپرتی های کلیدی ویجت Scaffold

• appBar

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

• body

  ویجتی را مشخص می‌کند که محتوای اصلی صفحه را نمایش می‌دهد.

• floatingActionButton

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

• bottomNavigationBar

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

• drawer

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

• backgroundColor

  رنگ پس‌زمینه Scaffold را تعیین می‌کند.

• resizeToAvoidBottomPadding

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

اجزای اصلی ویجت Scaffold در فلاتر

1. AppBar

   نوار عنوان را در بالای صفحه نمایش می‌دهد. می‌توانید عنوان، دکمه‌های ناوبری، لوگو و سایر عناصر را به AppBar اضافه کنید.

   import ‘package:flutter/material.dart’;

   void main() {
   runApp(MyApp());
   }

   class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return MaterialApp(
   home: Scaffold(
   appBar: AppBar(
   title: Text(‘MyApp’),
   actions: <Widget>[
   IconButton(
   icon: Icon(Icons.add),
   onPressed: () {
   // Perform some action
   },
   ),
   IconButton(
   icon: Icon(Icons.search),
   onPressed: () {
   // Perform some action
   },
   ),
   ],
   ),
   body: Center(
   child: Text(‘This is the body of the page’),
   ),
   ),
   );
   }
   }

2. Body

   محتوای اصلی صفحه را دربر می‌گیرد. این قسمت می‌تواند شامل هر نوع ویجتی باشد، مانند Text، Image، ListView و غیره.

3. FloatingActionButton

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

   import ‘package:flutter/material.dart’;

   void main() {
   runApp(MyApp());
   }

   class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return MaterialApp(
   home: Scaffold(
   appBar: AppBar(
   title: Text(‘MyApp’),
   ),
   body: Center(
   child: Text(‘This is the body of the page’),
   ),
   floatingActionButton: FloatingActionButton(
   onPressed: () {
   ScaffoldMessenger.of(context).showSnackBar(
   SnackBar(
   content: Text(‘FloatingActionButton pressed!’),
   action: SnackBarAction(
   label: ‘Undo’,
   onPressed: () {
   // Perform an undo action
   },
   ),
   ),
   );
   },
   child: Icon(Icons.add),
   ),
   ),
   );
   }
   }

4. BottomNavigationBar

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

   import ‘package:flutter/material.dart’;

   void main() {
   runApp(MyApp());
   }

   class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return MaterialApp(
   title: ‘Flutter Bottom Navigation Bar Example’,
   theme: ThemeData(
   primarySwatch: Colors.blue,
   ),
   home: MyHomePage(),
   );
   }
   }

   class MyHomePage extends StatefulWidget {
   @override
   _MyHomePageState createState() => _MyHomePageState();
   }

   class _MyHomePageState extends State<MyHomePage> {
   int _selectedIndex = 0;

   List<Widget> _widgetOptions = <Widget>[
   Text(‘Home Page’),
   Text(‘Search Page’),
   Text(‘Profile Page’),
   ];

   void _onItemTapped(int index) {
   setState(() {
   _selectedIndex = index;
   });
   }

   @override
   Widget build(BuildContext context) {
   return Scaffold(
   appBar: AppBar(
   title: Text(‘Flutter Bottom Navigation Bar Example’),
   ),
   body: Center(
   child: _widgetOptions.elementAt(_selectedIndex),
   ),
   bottomNavigationBar: BottomNavigationBar(
   items: const <BottomNavigationBarItem>[
   BottomNavigationBarItem(
   icon: Icon(Icons.home),
   label: ‘Home’,
   ),
   BottomNavigationBarItem(
   icon: Icon(Icons.search),
   label: ‘Search’,
   ),
   BottomNavigationBarItem(
   icon: Icon(Icons.person),
   label: ‘Profile’,
   ),
   ],
   currentIndex: _selectedIndex,
   selectedItemColor: Colors.blue,
   onTap: _onItemTapped,
   ),
   );
   }
   }

5. Drawer

   منویی کشویی را در سمت چپ یا راست صفحه نمایش می‌دهد. می‌توانید از آن برای نمایش گزینه‌های اضافی یا ناوبری در سلسله مراتب برنامه خود استفاده کنید.

   import ‘package:flutter/material.dart’;

   void main() {
   runApp(MyApp());
   }

   class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return MaterialApp(
   title: ‘Flutter Drawer Example’,
   theme: ThemeData(
   primarySwatch: Colors.blue,
   ),
   home: MyHomePage(),
   );
   }
   }

   class MyHomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return Scaffold(
   appBar: AppBar(
   title: Text(‘Flutter Drawer Example’),
   ),
   body: Center(
   child: Text(‘Home Page’),
   ),
   drawer: Drawer(
   child: ListView(
   padding: EdgeInsets.zero,
   children: <Widget>[
   DrawerHeader(
   decoration: BoxDecoration(
   color: Colors.blue,
   ),
   child: Text(
   ‘Drawer Header’,
   style: TextStyle(
   color: Colors.white,
   fontSize: 24,
   ),
   ),
   ),
   ListTile(
   leading: Icon(Icons.home),
   title: Text(‘Home’),
   onTap: () {
   // Add navigation functionality here
   Navigator.pop(context);
   },
   ),
   ListTile(
   leading: Icon(Icons.search),
   title: Text(‘Search’),
   onTap: () {
   // Add navigation functionality here
   Navigator.pop(context);
   },
   ),
   ListTile(
   leading: Icon(Icons.person),
   title: Text(‘Profile’),
   onTap: () {
   // Add navigation functionality here
   Navigator.pop(context);
   },
   ),
   ],
   ),
   ),
   );
   }
   }

نحوه استفاده از ویجت Scaffold در فلاتر

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

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyApp'),
        ),
        body: Center(
          child: Text('This is the body of the page'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Perform some action
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}