gradient Trong Container - Tự Học Flutter

 

Trong Flutter, thuộc tính `gradient` trong `BoxDecoration` của `Container` cho phép bạn áp dụng các hiệu ứng gradient màu sắc vào nền của `Container`. Gradient là một cách mượt mà và hấp dẫn để làm cho giao diện của bạn trông phong phú và chuyển động hơn. Dưới đây là các giá trị và cách sử dụng `gradient`:

Các Loại Gradient

Flutter hỗ trợ hai loại gradient chính là `LinearGradient` và `RadialGradient`, `SweepGradient`

1. LinearGradient

`LinearGradient` là gradient tuyến tính, có thể điều chỉnh hướng, độ dốc và màu sắc của gradient theo đường thẳng.

Các thuộc tính chính của `LinearGradient` bao gồm:

- colors : Danh sách các màu sắc sẽ tạo nên gradient.

  

- begin: Điểm bắt đầu của gradient trên `Container`, được đặt bằng một đối tượng `Alignment`.

  

- end: Điểm kết thúc của gradient trên `Container`, cũng được đặt bằng một đối tượng `Alignment`.

  

- stops: Danh sách các giá trị từ 0.0 đến 1.0, xác định vị trí mỗi màu sắc trong gradient.

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('LinearGradient Example'),

        ),

        body: Center(

          child: Container(

            width: 200,

            height: 200,

            decoration: BoxDecoration(

              gradient: LinearGradient(

                begin: Alignment.topLeft,

                end: Alignment.bottomRight,

                colors: [Colors.blue, Colors.green],

                stops: [0.0, 1.0],

              ),

            ),

            child: Center(

              child: Text(

                'Linear Gradient',

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

              ),

            ),

          ),

        ),

      ),

    );

  }

- `begin: Alignment.topLeft` và `end: Alignment.bottomRight` xác định hướng của gradient từ góc trên bên trái đến góc dưới bên phải.

- `colors: [Colors.blue, Colors.green]` là danh sách các màu sắc tạo nên gradient từ xanh đến xanh lá.

- `stops: [0.0, 1.0]` là vị trí của mỗi màu sắc trong gradient, ở đây là từ đầu đến cuối.

2. RadialGradient

`RadialGradient` là gradient hình tròn, có thể điều chỉnh bán kính, trọng tâm và màu sắc của gradient.

Các thuộc tính chính của `RadialGradient` bao gồm:

- colors: Danh sách các màu sắc sẽ tạo nên gradient.

  

- center: Vị trí trung tâm của gradient trên `Container`, được đặt bằng một đối tượng `Alignment`.

  

- radius : Bán kính của gradient.

  

- stops: Danh sách các giá trị từ 0.0 đến 1.0, xác định vị trí mỗi màu sắc trong gradient.

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('RadialGradient Example'),

        ),

        body: Center(

          child: Container(

            width: 200,

            height: 200,

            decoration: BoxDecoration(

              gradient: RadialGradient(

                center: Alignment.center,

                radius: 0.5,

                colors: [Colors.red, Colors.yellow],

                stops: [0.0, 1.0],

              ),

            ),

            child: Center(

              child: Text(

                'Radial Gradient',

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

              ),

            ),

          ),

        ),

      ),

    );

  }

}

Trong ví dụ này:

- `center: Alignment.center` xác định trung tâm của gradient là trung tâm của `Container`.

- `radius: 0.5` là bán kính của gradient, ở đây là 0.5 tức là gradient sẽ bao phủ 50% diện tích của `Container`.

- `colors: [Colors.red, Colors.yellow]` là danh sách các màu sắc tạo nên gradient từ đỏ đến vàng.

- `stops: [0.0, 1.0]` là vị trí của mỗi màu sắc trong gradient, ở đây là từ đầu đến cuối.

Kết Luận

`gradient` là một thuộc tính mạnh mẽ trong `BoxDecoration` của `Container` trong Flutter, cho phép bạn tạo ra các hiệu ứng màu sắc mượt mà và đa dạng như `LinearGradient` và `RadialGradient`. Việc sử dụng gradient là một trong những cách hiệu quả để tăng tính thẩm mỹ và sự chuyển động của các phần tử giao diện người dùng.