Hamidreza Ramezani
Hamidreza Ramezani
خواندن ۱ دقیقه·۹ ماه پیش

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

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

ویژگی‌های AppBar:

  1. title: عنوانی که در بخش مرکزی AppBar نمایش داده می‌شود.
  2. actions: لیستی از عناصری که در بخش سمت راست AppBar قرار می‌گیرند، مانند دکمه‌ها یا آیکون‌ها.
  3. leading: عنصری که در بخش سمت چپ AppBar قرار می‌گیرد، معمولاً برای اضافه کردن یک دکمه برگشت به عقب استفاده می‌شود.
  4. backgroundColor: رنگ پس‌زمینه AppBar.
  5. elevation: بلندی سایه‌دهی AppBar. این ویژگی برای تعیین ارتفاع سایه AppBar استفاده می‌شود.
  6. automaticallyImplyLeading: اگر true باشد، یک دکمه برگشت به عقب به صورت خودکار اضافه می‌شود، اگر صفحه قبلی موجود باشد.
  7. bottom: عناصری که در پایین 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('Custom AppBar'),
backgroundColor: Colors.blue,
elevation: 4, // افزایش ارتفاع سایه
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {
},
),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {
},
),
],
),
body: Center(
child: Text('Custom AppBar Example'),
),
),
);
}
}

در این مثال، یک AppBar سفارشی ایجاد شده است که شامل یک عنوان، یک پس‌زمینه رنگی، بلندی سایه، و دو دکمه عمل است.

appbarرابط کاربریواسط کاربریفلاترflutter
سلام. حمیدرضا هستم ، علاقه مند به دنیای تکنولوژی ، برنامه نویس ، دونده و کمی هم کتابخون. از این که منو دنبال میکنید ممنونم.
شاید از این پست‌ها خوشتان بیاید