شرح استخدام AppBar في فلاتر

عادةً ما يكون AppBar هو المكون الأعلى للتطبيق، فهو يحتوي على شريط الأدوات وبعض أزرار الإجراءات الشائعة الأخرى. نظرًا لأن جميع المكونات في تطبيق flutter عبارة عن widget أو مجموعة من ال widgets. لذا فإن AppBar هو أيضًا widget في فلاتر وعادةً ما يتم استخدامه داخل Scaffold. تعتمد أداة AppBar على Material Design ويتم توفير الكثير من المعلومات بالفعل بواسطة فئات أخرى مثل MediaQuery و Scaffold فيمَا يتعلق بالمكان الذي يجب وضع محتوى AppBar فيه. على الرغم من أن فئة AppBar مرنة للغاية ويمكن تخصيصها بسهولة، يمكننا أيضًا استخدام عنصر واجهة مستخدم SliverAppBar الذي يوفر وظائف قابلة للتمرير إلى شريط التطبيقات. أو يمكننا إنشاء شريط التطبيق المخصص الخاص بنا من البداية.

ما هو AppBar في فلاتر؟

AppBar هو مكون من مكونات التطبيق تم إنشاؤه وفقًا لإرشادات Material Design. عادة ما يتم وضعه في الجزء العلوي من الشاشة ولديه القدرة على احتواء عناصر widgets أخرى بداخله. يعرض AppBar عمومًا معلومات العلامة التجارية مثل الشعارات والعناوين وغالبًا ما يحتوي على أزرار أو نِقَاط أخرى لتفاعل المستخدم.

“اقرأ أيضاً: شرح استخدام ويدجت Expanded في فلاتر“

وهذه طريقة استدعاء AppBar الافتراضي في Flutter:

// AppBar is used inside a Scaffold widget.
Scaffold(
  appBar: AppBar(),
),

“اقرأ أيضاً: شرح استخدام ويدجت Offstage في فلاتر“

شرح تخطيط AppBar في فلاتر

في Flutter، يتكون تخطيط AppBar بشكل أساسي من ثلاثة مكونات: البداية leading والعنوان title والإجراءات actions. يتم وضع leading في أقصى يسار ال AppBar؛ العنوان والإجراءات actions تظهر على يمينها.

شرح استخدام leading داخل AppBar

يمكن استخدام أي شيء بداخلها – نص أو رمز أو حتى أدوات متعددة داخل صف واحد.

AppBar(
  leading: Icon(Icons.account_circle_rounded),
),

ويمكنك التحكم في مقدار العرض الخاص ب leading:

AppBar(
  leading: Icon(Icons.account_circle_rounded),
  leadingWidth: 80, // default is 56
),

إذا لم يتم استخدام leading في ال AppBar، فإنه سيتم وضع سهم تنقل للعودة إلى الصفحة السابقة تلقائيًا. ويظهر سهم التنقل تلقائيًا عند توفر route سابق.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          child: Text('Push'),
          onPressed: () => Navigator.push(context, MaterialPageRoute(
            builder: (context) {
              return SecondPage();
            },
          )),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

يمكنك استخدام الكود السابق للتوضيح أكثر حيث انه عند النقر على الزر سيقوم بتوجيهك للصفحة التالية وعندها يظهر سهم للعودة للصفحة السابقة تلقائيًا.

عندما نضيف Drawer إلى عنصر الScaffold، يتم وضع رمز قائمة بداخل leading لفتح ال Drawer.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(),
    );
  }
}

“اقرأ أيضاً: شرح استخدام ويدجت RotationTransition في فلاتر“

إذا رغبت في ذلك، يمكن منع هذا عن طريق جعل automaticallyImplyLeading يأخد قيمة false.

AppBar(
  automaticallyImplyLeading: false, 
),

استخدام العنوان title داخل AppBar

كما يوحي الاسم، يتم استخدامه غالبًا لعرض العناوين، مثل عنوان التطبيق أو رأس الصفحة.

AppBar(
  title: Text('Profile Page'),
),

لكنك لست مقيدًا بذلك لأن العنوان يأخذ widget أيضًا. يمكنك استخدامه لإظهار الرموز أو الصور أو الأشكال أو أي مجموعة منها باستخدام أدوات التخطيط مثل الصف والعمود.

هذا مثال:

AppBar(
  title: Container(
    width: 40,
    child: Image.network(url),
  ),
),

بشكل افتراضي، يتم وضع العنوان في يسار AppBar في حالة عدم وجود leading، ولكن يمكنك تغيير هذا وجعله في المنتصف:

AppBar(
  title: Container(
    width: 40,
    child: Image.network(url),
  ),
  centerTitle: true, // like this!
),

شرح استخدام actions داخل AppBar

الإجراءات actions عبارة عن قائمة من ال widgets التي يتم وضعها في يمين AppBar. عادة ما نراها في التطبيقات المستخدمة كأزرار لتشغيل القوائم المنسدلة والصور الرمزية للملف الشخصي وما إلى ذلك.

AppBar(
  actions: [
    Icon(Icons.more_vert),
  ],
),

دعنا نضيف أدوات أخرى إلى القائمة:

AppBar(
  actions: [
    Container(
      width: 30,
      child: Image.asset(
        'assets/images/profile_pic.png', 
      ),
    ),
    Icon(Icons.more_vert),
  ],
),

“اقرأ أيضًا: ما هو الفرق بين MVC و MVVM في فلاتر“

تخصيص ال AppBar في فلاتر

الآن بعد أن أصبحنا على دراية بتخطيط AppBar، دعنا ننتقل إلى المستوى التالي من خلال اللعب بخيارات التخصيص. يحتوي AppBar على جميع أنواع الخصائص، بما في ذلك الألوان والأحجام وسمات الرموز وسمات النص والمزيد.

لون الخلفية

يغير الكود التالي لون خلفية AppBar إلى اللون البرتقالي الغامق. تمت إضافة 500 للوصول إلى ظل معين للون، 900 هو الأغمق و 50 هو الأفتح.

AppBar(
  backgroundColor: Colors.deepOrange[500],
),

تخصيص اعدادات الايقونات

يغير الكود أدناه لون الرمز إلى اللون الأخضر والحجم إلى 36:

AppBar(
  actionsIconTheme: IconThemeData(color: Colors.green, size: 36),
),

تخصيص اعدادات النص

لنفترض أنك تريد تغيير لون النص إلى اللون الكهرماني أو العنبري بظل أفتح بمقدار 200 وتعيين حجم الخط على 24:

AppBar(
  textTheme: TextTheme(
    headline6: TextStyle( // headline6 is used for setting title's theme
      color: Colors.amber[200],
      fontSize: 24,
    ),
  ),
),

وضع Elevation في AppBar

إذا كنت تريد تعزيز ال AppBar قليلًا ووضع ظل شادو في الأسفل، فيمكنك استخدام الارتفاع Elevation. يزيد الكود التالي من ارتفاع ظل ال AppBar إلى 15.

AppBar(
  elevation: 15,
),

لاحظ أن AppBar تم رفعه والظل يمتد على مساحة أكبر.

“اقرأ أيضاً: شرح استخدام ويدجت Card في فلاتر“

تغيير لون الظل في AppBar

يمكنك حتى اللعب بلون الظل أسفل ال AppBar. يغير الكود أدناه لون ظل AppBar إلى اللون البرتقالي.

AppBar(
  shadowColor: Colors.orangeAccent,
),

ارتفاع شريط الأدوات Toolbar والتعتيم

أخيرًا، لدينا خصائص شريط الأدوات Toolbar. يتألف شريط الأدوات من نصوص وأيقونات وأزرار وأي شيء آخر موجود في المقدمة، باستثناء الأدوات مثل الحاوية Container والصورة Image.

لتغيير ارتفاع وشفافية عناصر شريط أدوات AppBar:

AppBar(
  toolbarHeight: 100, // default is 56
  toolbarOpacity: 0.5,
),

مثال على استخدام AppBar في فلاتر

يمكن استخدام AppBar في Flutter لإضافة شريط علوي يحتوي على عناصر تحكم مثل الأزرار وعناصر القائمة والعناوين. وفيما يلي مثال كامل على استخدام AppBar في Flutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter AppBar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          leading: const Icon(Icons.account_circle_rounded),
          title: const Text('My AppBar Title'),
          actions: [
            IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                // Perform search action
              },
            ),
            IconButton(
              icon: const Icon(Icons.more_vert),
              onPressed: () {
                // Show more options
              },
            ),
          ],
        ),
        body: const Center(
          child: Text('My Body'),
        ),
      ),
    );
  }
}

في الجزء العلوي من الشاشة، نستخدم Scaffold Widget لوضع AppBar بداخلها. في هذا المثال، أضفنا عنصري تحكم (أيقونات) إلى AppBar باستخدام خاصية actions. استخدمنا IconButton لإنشاء الأيقونات وتعيين الإجراءات التي ينبغي تنفيذها عند النقر على الأيقونات.

أخيرًا، استخدمنا Center Widget لوضع نص في وسط الشاشة كجسم للتطبيق.

“اقرأ أيضاً: شرح استخدام ويدجت SnackBar في فلاتر“

إذا كنت قد وصلت إلى هنا، فيجب أن تفهم الآن ما هو AppBar وكيف يتم استخدامه في Flutter وتخطيط AppBar (البداية leading، العنوان title، والإجراءات actions) وكل ما تم شرحه أعلاه. آمل أن تساعدك هذه المقالة في إنشاء AppBar جميل في جميع تطبيقات Flutter المستقبلية.