بناء واجهة المستخدم باستخدام Scaffold و AppBar Flutter

في Flutter ، يمكنك إنشاء واجهة مستخدم بسيطة لكنها قوية باستخدام Scaffold الأدوات AppBar. Scaffold يوفر بنية أساسية لتطبيق ما مع عناصر مشتركة مثل شريط التطبيق ، وهيكل التطبيق ، وأزرار التنقل. AppBar هو جزء من Scaffold ويحتوي على عنوان التطبيق وخيارات التنقل.

يوجد أدناه دليل حول كيفية إنشاء واجهة مستخدم بسيطة باستخدام Scaffold و AppBar:

Flutter أنشئ تطبيقًا جديدًا

أولاً ، قم بإنشاء تطبيق جديد Flutter عن طريق تشغيل الأمر التالي في terminal:

flutter create app_name

(استبدل app_name الاسم الذي تريده لتطبيقك).

قم بتحرير ملف main.dart

في ملف main.dart(داخل مجلد lib) ، استبدل المحتوى بما يلي:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter App with Scaffold and AppBar'),  
     ),  
      body: Center(  
        child: Text('Hello, world!'),  
     ),  
   );  
  }  
}  

في المثال أعلاه ، نقوم بإنشاء تطبيق باستخدام Scaffold و AppBar. يحتوي Scaffold على AppBar ونص واجهة المستخدم التي تم تمريرها إلى body الخاصية.

قم بتشغيل التطبيق

أخيرًا ، لتشغيل التطبيق ، قم بتشغيل الأمر التالي في terminal:

flutter run

سيعرض تطبيقك شاشة بعنوان " Flutter التطبيق مع Scaffold و AppBar " على شريط التطبيقات والنص Hello, world!  في وسط الشاشة.

الخلاصة: Scaffold وهما AppBar عنصران أساسيان Flutter يساعدان في بناء واجهة مستخدم بسيطة وعملية. باستخدامهم ، يمكنك إنشاء تطبيقات جذابة مع مكونات واجهة المستخدم الأساسية مثل شريط التطبيقات وهيكل التطبيق.