openplanning

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

  1. Flutter EdgeInsetsGeometry
  2. EdgeInsets
  3. EdgeInsetsDirectional

1. Flutter EdgeInsetsGeometry

EdgeInsetsGeometry được sử dụng để tạo ra một inner padding (khoảng đệm bên trong) hoặc một outer padding (khoảng đệm bên ngoài) cho một Widget.
Trong khoa học máy tính, thuật ngữ "margin" được sử dụng thay thế cho "outer padding", và "padding" được sử dụng thay thế cho "inner padding".
Hãy xem một hình minh họa đơn giản, một widget Container trước và sau khi được thêm "outer padding""inner padding":
Lớp EdgeInsetsGeometry là một lớp trừu tượng (abstract class) vì vậy không thể sử dụng nó một cách trực tiếp, tuỳ vào tình huống bạn có thể sử dụng lớp con của nó là EdgeInsets hoặc EdgeInsetsDirectional.

2. EdgeInsets

EdgeInsets giúp tạo ra outer padding (hoặc inner padding) 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).
Ví dụ, sử dụng EdgeInsets tạo một "Outer padding" (margin) với các tham số (left, top, right, bottom) = (90, 70, 50, 30):
Container(
    margin: EdgeInsets.fromLTRB(90, 70, 50, 30),
    decoration: BoxDecoration(
      color: Colors.greenAccent,
      border: Border.all(color: Colors.blueGrey),
    ),
    child: Text(
        "Hi There!",
        style: TextStyle(fontSize: 45)
    )
)

3. EdgeInsetsDirectional

EdgeInsetsDirectional giúp tạo ra outer padding (hoặc inner padding) dựa trên các tham số start, top, end, bottom. Hai tham số startend phụ thuộc vào hướng của văn bản (text direction).
Cụ thể:
  • Nếu hướng của văn bản là "Trái sang phải" thì "start" tương ứng với "left""end" tương ứng với "right".
  • Ngược lại nếu hướng của văn bản là "Phải sang Trái" thì "start" tương ứng với "right""end" tương ứng với "left".
Ví dụ, sử dụng EdgeInsetsDirectional tạo một "Outer padding" (margin) với các tham số (start, top, end, bottom) = (150, 70, 50, 30) bạn sẽ nhận được 2 kết quả khác nhau tuỳ thuộc vào hướng của văn bản:
textDirection = TextDirection.rtl (Right to Left):
main.dart (ex4)
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'o7planning.org',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage()
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Flutter EdgeInsetsGeometry Example")
        ),
        body: Directionality (
            textDirection: TextDirection.rtl,
            child:  Row (
              children: [
                Container (
                    margin: EdgeInsetsDirectional.fromSTEB(150, 70, 50, 30),
                    child:Text(
                        "الانتخابات الأمريكية في 2020",
                        style: TextStyle(fontSize: 18)
                    )
                )
              ],
            )
        )
    );
  }
}
  • Hướng dẫn và ví dụ Flutter EdgeInsetsDirectional

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

Show More