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

Builder

Trong Flutter, rất thường xuyên bạn tạo một Widget tuỳ biến bằng cách tạo một lớp con của StatelessWidget.

my_custom_widget.dart

import 'package:flutter/material.dart';

class MyCustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 100,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blueAccent),
        color: Colors.greenAccent,
      ),
      child: const Center(
        child: Text("My Custom Widget"),
      ),
    );
  }
}

Và sử dụng MyCustomWidget ở một nơi nào đó.

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('My Custom Widget'),
      ),
      body: Center(
        child: MyCustomWidget(),
      ),
    );
  }
}

Việc tạo một lớp con của StatelessWidget bạn sẽ có một Widget tuỳ biến và có thể tái sử dụng nó ở nhiều nơi. Tuy nhiên nếu bạn muốn có một Widget tuỳ biến chỉ sử dụng một lần hãy sử dụng Builder.

1. Builder

Tạo ra một giao diện người dùng trực tiếp thông qua Builder:

Builder(
  builder: (BuildContext context) {
    return Container(
      width: 200,
      height: 100,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blueAccent),
        color: Colors.greenAccent,
      ),
      child: const Center(
        child: Text("My Custom Widget"),
      ),
    );
  },
)

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

1. Builder

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

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

Các bài viết mới nhất