Flutter TabBar dengan Box Shadow: Panduan Implementasi

Untuk menerapkan bayangan kotak ke TabBar in Flutter, Anda dapat membungkusnya dengan a Container dan menggunakan BoxDecoration properti. Berikut ini contohnya:

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 menambahkan efek bayangan pada TabBar, Anda dapat membungkusnya TabBar dengan a Container dan menerapkan 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, BoxShadow digunakan untuk membuat efek bayangan pada TabBar. Anda dapat menyesuaikan warna, radius penyebaran, radius blur, dan offset untuk mendapatkan tampilan bayangan yang diinginkan.

Ingatlah untuk menyesuaikan properti bayangan agar sesuai dengan kebutuhan desain Anda.

Harap dicatat bahwa menerapkan bayangan mungkin tidak berhasil jika Anda AppBar sudah menggunakan ketinggian. Dalam kasus seperti itu, Anda mungkin perlu menggunakan widget khusus atau menyesuaikan desain untuk mengakomodasi kedua efek tersebut.