Flutter TabBar với Hiệu ứng Bóng đổ: Hướng dẫn Thực hiện

Để áp dụng hiệu ứng bóng đổ (box shadow) cho một TabBar trong Flutter, bạn có thể bọc nó bên trong một Container và sử dụng thuộc tính BoxDecoration. Dưới đây là một ví dụ:

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 với Bóng Đổ'),
          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),
          ],
        ),
      ),
    );
  }
}

Nếu bạn muốn thêm hiệu ứng bóng đổ cho TabBar, bạn có thể bọc TabBar bên trong một Container và áp dụng BoxDecoration:

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // điều chỉnh vị trí của bóng đổ
      ),
    ],
  ),
  child: TabBar(
    tabs: [
      Tab(text: 'Tab 1'),
      Tab(text: 'Tab 2'),
      Tab(text: 'Tab 3'),
    ],
  ),
),

Trong ví dụ này, BoxShadow được sử dụng để tạo hiệu ứng bóng đổ cho TabBar. Bạn có thể tùy chỉnh màu sắc, bán kính trải rộng, bán kính mờ và vị trí để đạt được hiệu ứng bóng đổ mong muốn.

Hãy nhớ điều chỉnh các thuộc tính của bóng đổ để phù hợp với yêu cầu thiết kế của bạn.

Lưu ý rằng việc áp dụng bóng đổ có thể không hoạt động nếu AppBar của bạn đã sử dụng hiệu ứng elevation. Trong những trường hợp như vậy, bạn có thể cần sử dụng các widget tùy chỉnh hoặc điều chỉnh thiết kế để làm cho cả hai hiệu ứng này hoạt động cùng nhau.