Flutter TabBar dengan Box Shadow: Panduan Pelaksanaan

Untuk menggunakan bayang kotak pada TabBar in Flutter, anda boleh membungkusnya dengan a Container dan menggunakan BoxDecoration sifat tersebut. Berikut ialah contoh:

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),  
          ],  
       ),  
     ),  
   );  
  }  
}  

Jika anda ingin menambah kesan bayang-bayang pada TabBar, anda boleh membungkus TabBar dalam a Container dan menggunakan 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'),  
    ],  
 ),  
),  

Dalam contoh ini, the BoxShadow digunakan untuk mencipta kesan bayang-bayang untuk TabBar. Anda boleh menyesuaikan warna, jejari sebaran, jejari kabur dan mengimbangi untuk mencapai penampilan bayang yang diingini.

Ingat untuk melaraskan sifat bayang agar sepadan dengan keperluan reka bentuk anda.

Sila ambil perhatian bahawa menggunakan bayang mungkin tidak berfungsi jika anda AppBar sudah menggunakan ketinggian. Dalam kes sedemikian, anda mungkin perlu menggunakan widget tersuai atau melaraskan reka bentuk untuk menampung kedua-dua kesan.