openplanning

Hướng dẫn và ví dụ Flutter EdgeInsets

  1. Flutter EdgeInsets
  2. EdgeInsets.all
  3. EdgeInsets.fromLTRB
  4. EdgeInsets.only
  5. EdgeInsets.symmetric
  6. EdgeInsets.fromWindowPadding

1. Flutter EdgeInsets

EdgeInsets giúp tạo ra outer padding (phần đệm bên ngoài) hoặc inner padding (phần đệm bên trong) cho một Widget dựa trên các tham số trực quan left, top, right, bottom, nó không phụ thuộc vào hướng của văn bản (text direction).
Để hỗ trợ cả bố cục từ trái sang phải và từ phải sang trái, hãy xem xét sử dụng EdgeInsetsDirectional.
  • Hướng dẫn và ví dụ Flutter EdgeInsetsDirectional

2. EdgeInsets.all

Constructor EdgeInsets.all được sử dụng để tạo ra một đối tượng EdgeInsets với cùng một giá trị cho cả bốn property left, top, right, bottom.
const EdgeInsets.all(
   double value
)
EdgeInsets.all (ex1)
Container (
    margin: EdgeInsets.all(80),
    color: Colors.greenAccent,
    child:Text(
        "Hi There!",
        style: TextStyle(fontSize: 28)
    )
)

3. EdgeInsets.fromLTRB

Constructor EdgeInsets.fromLTRB được sử dụng để tạo ra một đối tượng EdgeInsets dựa trên các giá trị left, top, right, bottom.
const EdgeInsets.fromLTRB(
    double left,
    double top,
    double right,
    double bottom
)
EdgeInsets.fromLTRB (ex1)
Padding (
    padding: EdgeInsets.fromLTRB(80, 100, 70, 50),
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: (){}
    )
)

4. EdgeInsets.only

Constructor EdgeInsets.only tạo ra một đối tượng EdgeInsets từ các tham số tuỳ chọn left, top, right, bottom, các tham số không được chỉ định sẽ có giá trị bằng 0.
const EdgeInsets.only(
    {double left: 0.0,
    double top: 0.0,
    double right: 0.0,
    double bottom: 0.0}
)
EdgeInsets.only (ex1)
Container (
    color: Colors.greenAccent,
    padding: EdgeInsets.only(left: 120, top: 50, right: 80),
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: (){}
    )
)

5. EdgeInsets.symmetric

Constructor EdgeInsets.symmetric tạo ra một đối tượng EdgeInsets đối xứng từ hai tham số horizontalvertical. Điều này có nghĩa là:
  • left = right = horizontal
  • top = bottom = vertical
const EdgeInsets.symmetric(
    {double vertical: 0.0,
    double horizontal: 0.0}
)
EdgeInsets.symmetric (ex1)
Container (
    color: Colors.greenAccent,
    padding: EdgeInsets.symmetric(horizontal: 120, vertical: 50),
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: (){}
    )
)

6. EdgeInsets.fromWindowPadding

const EdgeInsets.fromWindowPadding(
    WindowPadding padding,
    double devicePixelRatio
)

Các hướng dẫn lập trình Flutter

Show More