Những điều cơ bản về Widget và bố cục Layout trong Flutter

Như chúng ta đã biết, trên một ứng dụng Flutter, việc thiết kế giao diện chủ yếu là widgets và sắp xếp bố cục các widgets đó một cách hợp lý và hiệu quả. Trong bài viết này ,chúng ta sẽ khám phá một vài widgets cơ bản được sử dụng để xây dựng layout trong ứng dụng Flutter.

Layout trong Flutter

Layout trong Flutter bao gồm một hệ thống phân cấp các widget với các widget bên ngoài thường xử lý sự liên kết và cấu trúc trong khi các yếu tố bên trong thường là các yếu tố hiển thị trên chính màn hình đó, như các button và image, v.v.

new Center(

  child: new Column(

    mainAxisAlignment: MainAxisAlignment.center,

    children: <Widget>[

      new Text(

        ‘You have pushed the button this many times:’,

      ),

      new Text(

        ‘$_counter’,

        style: Theme.of(context).textTheme.display1,

      ),

    ],

  ),

Trong ví dụ này, có ba widget: Center, Column và Text.

Center và Column xử lý cấu trúc và sắp xếp các thành phần bên trong chúng trong khi văn bản là thành phần duy nhất có thể nhìn thấy trực tiếp trong ứng dụng cho người dùng.

Một widget thường có các thuộc tính để thay đổi căn chỉnh, kiểu và thuộc tính.

Bây giờ chúng ta hãy đi sâu vào các vật dụng riêng lẻ và xem những gì họ làm.

Chúng tôi sẽ chia các widget thành hai loại:

1. Widgets phần tử hiển thị
2. Cấu trúc và căn chỉnh Widgets

Widgets phần tử hiển thị

Đây là một vài Widgets thường được sử dụng

1. Text

Một widget Text chỉ cần truyền vào một  văn bản.

new Text(   

‘Hello, World!’,   

textAlign: TextAlign.center,     

style: new TextStyle(fontWeight: FontWeight.bold), 

)

Văn bản có thể được căn chỉnh bằng cách sử dụng thuộc tính textAlign. Thuộc tính kiểu cho phép tùy chỉnh văn bản bao gồm phông chữ, cỡ chữ, trọng lượng phông chữ, màu sắc, khoảng cách chữ và nhiều thứ khác.

2. Button

Một widget Button cho phép người dùng thực hiện một số hành động khi nhấn. Flutter không có tiện ích trực tiếp “Button” , mà thay vào đó nó có các loại nút như FlatButton và RaisedButton.

new FlatButton(

  child: Text(“Click here”),

  onPressed: () {

    // Do something here

  },

),

The FlatButton

Thuộc tính onPressed cho phép một số hành động được thực hiện khi nhấp vào nút.

new RaisedButton(

  child: Text(“Click here”),

  elevation: 5.0,

  onPressed: () {

    // Do something here

  },

),

Thay đổi elevation của RaisedButton sẽ thay đổi mức độ nổi bật của nó.

3. Icon

Widget Icon cho phép hiển thị một Icon bất kỳ , các icon có sẵn trong class Icon của Flutter 

new Icon(

  Icons.add,

  size: 36.0,

)

Nó cũng chứa một thuộc tính kích thước để phóng to biểu tượng.

Bạn có thể custom màu sắc và kích thước của Icon tùy ý 

Cấu trúc và căn chỉnh Widgets

1. Column

Column là một widget sắp xếp tất cả các widget con của nó trong một ngăn xếp dọc. Nó có thể khoảng trống các widget theo thuộc tính mainAxisAlignment và crossAxisAlignment. Ở đây, trục chính main axis của Column là một trục dọc

Column(

  mainAxisAlignment: MainAxisAlignment.center,

  children: <Widget>[

    Text(“Element 1”),

    Text(“Element 2”),

    Text(“Element 3”),

  ],

),

Column có 3 widget Text bên trong nó và mainAxisAlignment được đặt thành center.

Đây, nó trông như thế này:

2. Row

Row(

  mainAxisAlignment: MainAxisAlignment.spaceEvenly,

  children: <Widget>[

    Text(“Element 1”),

    Text(“Element 2”),

    Text(“Element 3”),

  ],

),

Một Row giống như một Column, nhưng một row sẽ sắp xếp các child của nó theo hàng ngang . Sự khác biệt chính ở đây là trục chính là trục ngang chứ không phải trục dọc.

3. Center

Một widget Center chỉ đơn giản là sắp xếp  child bên trong nó nằm ở giữa Widget cha . Tất cả các ví dụ trước bao gồm các hàng và cột nằm trong một widget Center. Nếu không nằm trong Center, nó sẽ dịch chuyển sang trái. Dưới đây là một ví dụ:

Column không có Center widget

Column có Center widget

4. Padding

Không giống như trong phát triển Android, thông thường nơi mọi chế độ xem có thuộc tính padding riêng, ở Flutter  padding là một widget bao bọc các widget khác để cung cấp cho chúng phần padding theo tất cả hoặc các hướng được chỉ định. Điều này cung cấp cho widget văn bản một phần padding  8.0 theo mọi hướng.

Padding(

  padding: const EdgeInsets.all(8.0),

  child: new Text(

    “Element 1”,

  ),

),

Padding theo hướng cụ thể cũng được cho phép.

Padding(

  padding: EdgeInsets.fromLTRB(8.0, 0.0, 0.0, 0.0),

  child: new Text(

    “Element 1”,

  ),

),

5. Scaffold

Widget Scaffold là một class cho phép  thêm các yếu tố thiết kế widget phổ biến như AppBars, Drawers, Floating Action Buttons, Bottom Navigation, etc trong một màn hình . Nếu một Widget không được bọc trong Scaffold , sẽ thường xuyên gây ra lỗi , và các widget con bên trong đó cũng sẽ không được hiển thị theo ý muốn

new Scaffold(

  appBar: new AppBar(

    title: new Text(widget.title),

  ),

  body: Center(

  ),

  floatingActionButton: FloatingActionButton(

      child:Icon(Icons.add),

      onPressed: () {

      }

  ),

)

Dưới đây là một ví dụ về cách sử dụng Scaffold , bên trong nó có thuộc tính floatingActionButton , cho phép hiển thị một nút bấm được Stack ở vị trí phía dưới bên phải màn hình.

Đây là những widgets cơ bản cần có để tạo ra một ứng dụng hoạt động tốt trong Flutter. Flutter cũng cho phép bạn tạo các widget của riêng mình nếu bạn cần thêm bất kỳ chức năng nào khác hoặc nếu bạn muốn sử dụng lại một số mẫu widget lặp lại. Bài viết đến đây là kết thúc , hẹn các bạn ở cái bài viết sau nhé !