ساختار طراحی صفحات Scaffold در فلاتر

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

روش‌های طراحی رابط کاربری در فلاتر

در فلاتر، روش‌های مختلفی برای طراحی رابط کاربری وجود دارد که از جمله آن‌ها می‌توان به موارد زیر اشاره کرد:

• استفاده از ویجت‌های پایه مانند Container، Column و Row
• استفاده از MaterialApp و CupertinoApp برای ایجاد تجربه کاربری مشابه اندروید و iOS
• استفاده از Scaffold برای مدیریت ساختار کلی صفحه

ساختار ویجت Scaffold

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

آشنایی با AppBar

AppBar نوار بالای صفحه است که معمولاً برای نمایش عنوان صفحه، دکمه‌های ناوبری و اکشن‌های مختلف استفاده می‌شود. مثال زیر نحوه استفاده از AppBar را نشان می‌دهد:

Scaffold(
  appBar: AppBar(
    title: Text("صفحه اصلی"),
    backgroundColor: Colors.blue,
  ),
);

آشنایی با Drawer

Drawer یک منوی کناری است که برای ناوبری بین صفحات استفاده می‌شود. کاربران می‌توانند با کشیدن صفحه از سمت چپ به راست (در دستگاه‌های راست‌چین از راست به چپ) به این منو دسترسی داشته باشند.

Scaffold(
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          child: Text("منوی اصلی"),
          decoration: BoxDecoration(color: Colors.blue),
        ),
        ListTile(
          title: Text("صفحه 1"),
          onTap: () {},
        ),
      ],
    ),
  ),
);

آشنایی با FloatingActionButton

FloatingActionButton یک دکمه شناور است که معمولاً برای انجام یک عملیات اصلی در صفحه مانند اضافه کردن آیتم جدید استفاده می‌شود.

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

آشنایی با BottomNavigationBar

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

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: "خانه"),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: "تنظیمات"),
    ],
  ),
);

آشنایی با body

بخش body مهم‌ترین بخش ویجت Scaffold است که محتوای اصلی صفحه در آن قرار می‌گیرد

Scaffold(
  body: Center(
    child: Text("محتوای اصلی"),
  ),
);

ایجاد یک صفحه لاگین با کد

در این بخش، یک صفحه لاگین ساده با استفاده از Scaffold پیاده‌سازی می‌کنیم:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: LoginPage()));
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ورود")),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              decoration: InputDecoration(labelText: "نام کاربری"),
            ),
            TextField(
              decoration: InputDecoration(labelText: "رمز عبور"),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text("ورود"),
            ),
          ],
        ),
      ),
    );
  }
}

نتیجه‌گیری

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