Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
3.3 kB
1
Indexable
Never
Dưới đây là một số ví dụ về các widget có sẵn trong Flutter:

1. **Text Widget**: Sử dụng để hiển thị văn bản.

```dart
Text('Hello, Flutter')
```

2. **Image Widget**: Để hiển thị hình ảnh.

```dart
Image.network('https://example.com/image.jpg')
```

3. **Container Widget**: Để tạo một hộp đựng với các thuộc tính như màu sắc, đường viền.

```dart
Container(
  color: Colors.blue,
  width: 100.0,
  height: 100.0,
)
```

4. **Icon Widget**: Để hiển thị biểu tượng.

```dart
Icon(Icons.star, color: Colors.yellow)
```

5. **ListView Widget**: Sử dụng để tạo danh sách cuộn.

```dart
ListView(
  children: <Widget>[
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)
```

6. **FlatButton Widget**: Để tạo một nút bấm có chức năng.

```dart
FlatButton(
  onPressed: () {
    // Hành động khi nút được nhấn
  },
  child: Text('Press Me'),
)
```

7. **TextField Widget**: Sử dụng để nhập văn bản từ người dùng.

```dart
TextField(
  decoration: InputDecoration(labelText: 'Enter your name'),
)
```

8. **AppBar Widget**: Để tạo thanh ứng dụng ở đầu trang.

```dart
AppBar(
  title: Text('My App'),
)
```

9. **Card Widget**: Sử dụng để hiển thị dữ liệu trong một thẻ.

```dart
Card(
  child: Column(
    children: <Widget>[
      ListTile(title: Text('Title'), subtitle: Text('Subtitle')),
      Image.network('https://example.com/image.jpg'),
    ],
  ),
)
```

10. **Row và Column Widgets**: Để sắp xếp các widget theo hàng hoặc cột.

```dart
Row(
  children: <Widget>[
    Icon(Icons.star),
    Text('5 Stars'),
  ],
)
```

Các widget có sẵn này giúp bạn xây dựng giao diện ứng dụng một cách nhanh chóng bằng cách kết hợp chúng và tùy chỉnh theo nhu cầu của bạn.



Câu "Widget là các khối xây dựng đệ quy" nói về cách mà trong Flutter, bạn xây dựng các giao diện ứng dụng bằng cách sử dụng các widget, và các widget này có thể chứa các widget khác bên trong chúng. Điều này tạo thành một cấu trúc cây widget, giống như một cấu trúc cây trong toán học.

Ví dụ, giả sử bạn muốn xây dựng một giao diện đơn giản với một dòng văn bản và một nút bấm. Bạn có thể tạo cây widget như sau:

```dart
MyApp
├── Column
    ├── Text
    └── FlatButton
```

- Ở đây, `MyApp` là widget gốc của ứng dụng của bạn. Bên trong nó, bạn sử dụng một `Column` widget để xếp các widget theo chiều dọc.
- `Column` widget chứa hai widget con: một `Text` widget để hiển thị dòng văn bản và một `FlatButton` widget để tạo nút bấm.

Mỗi widget trong cây này có thể chứa các widget con của riêng chúng. Điều này tạo ra một cây widget có cấu trúc, giúp bạn tổ chức giao diện ứng dụng của mình một cách rõ ràng và linh hoạt. Cây widget này bắt đầu với widget gốc (thường là `MyApp`) và các widget con bên trong nó đóng góp vào việc xây dựng giao diện của ứng dụng.