close

Flutter TabBar مع Box Shadow: دليل التنفيذ

لتطبيق ظل مربع على TabBar in Flutter ، يمكنك تغليفه بـ Container واستخدام BoxDecoration الخاصية. هنا مثال:

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 DefaultTabController(  
      length: 3,  
      child: Scaffold(  
        appBar: AppBar(  
          title: Text('TabBar with Shadow'),  
          bottom: TabBar(  
            tabs: [  
              Tab(text: 'Tab 1'),  
              Tab(text: 'Tab 2'),  
              Tab(text: 'Tab 3'),  
            ],  
         ),  
       ),  
        body: TabBarView(  
          children: [  
            Container(color: Colors.red),  
            Container(color: Colors.green),  
            Container(color: Colors.blue),  
          ],  
       ),  
     ),  
   );  
  }  
}

إذا كنت تريد إضافة تأثير ظل إلى ملف TabBar ، يمكنك لفه TabBar وتطبيق Container ما يلي BoxDecoration:

Container(  
  decoration: BoxDecoration(  
    boxShadow: [  
      BoxShadow(  
        color: Colors.grey.withOpacity(0.5),  
        spreadRadius: 5,  
        blurRadius: 7,  
        offset: Offset(0, 3), // changes position of shadow  
     ),  
    ],  
 ),  
  child: TabBar(  
    tabs: [  
      Tab(text: 'Tab 1'),  
      Tab(text: 'Tab 2'),  
      Tab(text: 'Tab 3'),  
    ],  
 ),  
),

في هذا المثال، BoxShadow يتم استخدام the لإنشاء تأثير ظل لملف TabBar. يمكنك تخصيص اللون، ونشر نصف القطر، وطمس نصف القطر، والإزاحة لتحقيق مظهر الظل المطلوب.

تذكر ضبط خصائص الظل لتتناسب مع متطلبات التصميم الخاصة بك.

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