boxShadow Trong decoration - Tự Học Flutter

 

Trong Flutter, `boxShadow` là một thuộc tính trong `BoxDecoration` của `Container`, cho phép bạn thêm các hiệu ứng bóng đổ cho phần nội dung bên trong của `Container`. Đây là một công cụ hữu ích để làm cho giao diện của bạn trở nên sâu hơn và nổi bật hơn. Dưới đây là các giá trị của `boxShadow` và cách sử dụng chúng:

Các Giá Trị của boxShadow

Thuộc tính `boxShadow` trong `BoxDecoration` có thể nhận các giá trị sau:

1. color: Màu sắc của bóng đổ. Đây là một đối tượng của lớp `Color`.

   

2. offset: Độ dời của bóng đổ. Đây là một đối tượng của lớp `Offset`, xác định vị trí tương đối của bóng đổ so với `Container`.

   

3. blurRadius: Bán kính làm mờ của bóng đổ. Được đo bằng đơn vị điểm ảnh.

   

4. spreadRadius : Bán kính lan rộng của bóng đổ. Được đo bằng đơn vị điểm ảnh, xác định khu vực mà bóng đổ sẽ lan rộng ra.

Cách Sử Dụng boxShadow

Dưới đây là ví dụ minh họa cách sử dụng `boxShadow` trong `BoxDecoration` của `Container`:

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text('BoxShadow Example'),

        ),

        body: Center(

          child: Container(

            width: 150,

            height: 150,

            decoration: BoxDecoration(

              color: Colors.white,

              boxShadow: [

                BoxShadow(

                  color: Colors.grey.withOpacity(0.5),

                  spreadRadius: 5,

                  blurRadius: 7,

                  offset: Offset(0, 3), // changes position of shadow

                ),

              ],

            ),

            child: Center(

              child: Text(

                'BoxShadow',

                style: TextStyle(color: Colors.black, fontSize: 20),

              ),

            ),

          ),

        ),

      ),

    );

  }

}

Trong ví dụ này:

- `color: Colors.grey.withOpacity(0.5)` đặt màu sắc của bóng đổ là màu xám có độ mờ là 50%.

- `spreadRadius: 5` là bán kính lan rộng của bóng đổ là 5 điểm ảnh.

- `blurRadius: 7` là bán kính làm mờ của bóng đổ là 7 điểm ảnh.

- `offset: Offset(0, 3)` là độ dời của bóng đổ, trong trường hợp này là dời 3 điểm ảnh xuống phía dưới.

Bạn có thể điều chỉnh các giá trị này để tạo ra các hiệu ứng bóng đổ khác nhau phù hợp với thiết kế của bạn. `boxShadow` là một trong những cách quan trọng để làm cho giao diện người dùng trong Flutter trở nên sinh động và hấp dẫn hơn.