1. Responsive Typography

1.1. Khái niệm Responsive Typography

Responsive Typography là kỹ thuật thiết kế và điều chỉnh cách trình bày văn bản để nội dung luôn dễ đọc, dễ hiểu và phù hợp với không gian hiển thị trên nhiều loại thiết bị. Trong Flutter, kỹ thuật này bao gồm việc kiểm soát kích thước chữ, chiều cao dòng, độ dài dòng văn bản, khoảng cách giữa các đoạn và cách tổ chức nội dung theo kích thước màn hình.

Một giao diện có thể hiển thị đẹp trên máy tính nhưng trở nên khó sử dụng trên điện thoại nếu văn bản quá nhỏ, tiêu đề quá lớn hoặc các đoạn mô tả chiếm quá nhiều diện tích. Ngược lại, nếu thiết kế giao diện điện thoại rồi giữ nguyên toàn bộ kích thước chữ trên máy tính bảng và desktop, nội dung có thể trở nên quá nhỏ so với không gian hiển thị.

Responsive Typography giải quyết vấn đề này bằng cách kết hợp hệ thống kiểu chữ nhất quán với khả năng thích nghi theo không gian thực tế.

Ví dụ, một ứng dụng thương mại điện tử có thể sử dụng:

• Điện thoại: tiêu đề sản phẩm 20–24 logical pixels.

• Máy tính bảng: tiêu đề sản phẩm 24–28 logical pixels.

• Desktop: tiêu đề trang 28–36 logical pixels.

Các giá trị trên chỉ là ví dụ tham khảo, không phải quy chuẩn cố định. Kích thước phù hợp còn phụ thuộc vào loại nội dung, font chữ, khoảng cách hiển thị và khả năng tiếp cận.

Trong Flutter, kích thước chữ thường được thiết lập bằng thuộc tính fontSize của TextStyle. Các thuộc tính height, letterSpacing, fontWeight và fontFamily cũng ảnh hưởng trực tiếp đến khả năng đọc và tính nhất quán của giao diện.

1.2. Vai trò của Typography trong Responsive UI

Typography không chỉ quyết định hình thức của văn bản mà còn ảnh hưởng đến cấu trúc tổng thể của giao diện. Khi kích thước chữ thay đổi, chiều cao của các Widget, khoảng cách giữa những thành phần và cách bố trí nội dung cũng có thể thay đổi theo.

Các vai trò chính bao gồm:

• Duy trì khả năng đọc: Văn bản có kích thước phù hợp giúp người dùng tiếp nhận thông tin mà không phải phóng to hoặc cố gắng đọc.

• Phân cấp thông tin: Tiêu đề, nội dung chính, mô tả phụ và nhãn cần có mức độ nổi bật khác nhau.

• Tối ưu không gian: Màn hình nhỏ cần hạn chế những đoạn chữ dài không cần thiết, trong khi màn hình lớn có thể trình bày nội dung chi tiết hơn.

• Hỗ trợ khả năng tiếp cận: Giao diện cần thích nghi khi người dùng tăng kích thước chữ trong cài đặt hệ thống.

• Duy trì tính nhất quán: Những thành phần cùng vai trò nên sử dụng chung quy tắc Typography thay vì thiết lập kích thước tùy ý ở từng vị trí.

Một hệ thống Typography tốt không có nghĩa là mọi văn bản phải thay đổi kích thước theo màn hình. Nhiều loại văn bản như nội dung đọc dài, nhãn biểu mẫu và văn bản điều hướng có thể giữ kích thước tương đối ổn định. Việc thay đổi cần dựa trên nhu cầu thực tế của bố cục.

1.3. Các thuộc tính Typography quan trọng trong Flutter

Thuộc tính height trong TextStyle không phải chiều cao cố định tính bằng pixel. Đây là hệ số được sử dụng để xác định chiều cao dòng dựa trên kích thước chữ và các đặc điểm đo đạc của font.

Ví dụ, fontSize: 16 kết hợp với height: 1.5 tạo ra chiều cao dòng danh nghĩa khoảng 24 logical pixels. Kết quả bố trí thực tế còn phụ thuộc vào cơ chế đo đạc font và các yếu tố liên quan.

1.4. Xây dựng Typography thích nghi với chiều rộng màn hình

Flutter cung cấp MediaQuery, LayoutBuilder và các công cụ bố cục khác để xác định không gian khả dụng. Khi cần thay đổi kiểu chữ theo chiều rộng, LayoutBuilder thường phù hợp vì cung cấp constraints tại chính vị trí Widget được xây dựng.

Ví dụ sau sử dụng các mức kích thước khác nhau cho tiêu đề:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final width = constraints.maxWidth;

        final fontSize = width < 400
            ? 22.0
            : width < 800
                ? 28.0
                : 36.0;

        return Text(
          'Responsive Typography',
          style: TextStyle(
            fontSize: fontSize,
            fontWeight: FontWeight.bold,
            height: 1.25,
          ),
        );
      },
    );
  }
}

Trong ví dụ này:

• Khi chiều rộng nhỏ hơn 400 logical pixels, tiêu đề sử dụng kích thước 22.

• Khi chiều rộng từ 400 đến dưới 800, tiêu đề sử dụng kích thước 28.

• Khi chiều rộng từ 800 trở lên, tiêu đề sử dụng kích thước 36.

Các ngưỡng được lựa chọn theo ví dụ minh họa và cần được kiểm thử với giao diện thực tế.

Một điểm quan trọng là LayoutBuilder nhận constraints từ Widget cha. Nếu Widget cha chỉ cấp một vùng hẹp bên trong màn hình lớn, giá trị constraints.maxWidth vẫn phản ánh vùng hẹp đó. Đây là lợi thế khi xây dựng các thành phần có thể tái sử dụng trong nhiều bố cục.

1.5. Thiết lập hệ thống Typography dùng chung

Trong dự án lớn, không nên đặt kích thước chữ tùy ý ở hàng chục hoặc hàng trăm Widget. Cách làm này khiến giao diện khó đồng bộ và khó thay đổi khi thiết kế được cập nhật.

Có thể định nghĩa các kiểu chữ dùng chung thông qua ThemeData và TextTheme.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        textTheme: const TextTheme(
          headlineMedium: TextStyle(
            fontSize: 28,
            fontWeight: FontWeight.bold,
            height: 1.25,
          ),
          titleLarge: TextStyle(
            fontSize: 22,
            fontWeight: FontWeight.w600,
          ),
          bodyLarge: TextStyle(
            fontSize: 16,
            height: 1.5,
          ),
          bodyMedium: TextStyle(
            fontSize: 14,
            height: 1.45,
          ),
          labelLarge: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
      home: const TypographyPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;

    return Scaffold(
      appBar: AppBar(title: const Text('Typography')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Tiêu đề chính',
              style: textTheme.headlineMedium,
            ),
            const SizedBox(height: 12),
            Text(
              'Tiêu đề phụ của nội dung',
              style: textTheme.titleLarge,
            ),
            const SizedBox(height: 8),
            Text(
              'Đây là phần nội dung chính của ứng dụng.',
              style: textTheme.bodyLarge,
            ),
          ],
        ),
      ),
    );
  }
}

Cách tổ chức này mang lại nhiều lợi ích:

• Dễ điều chỉnh toàn bộ giao diện từ một nơi.

• Duy trì tính nhất quán giữa các màn hình.

• Giảm sự lặp lại trong mã nguồn.

• Dễ xây dựng chế độ sáng, tối hoặc những giao diện có chủ đề khác nhau.

• Giúp thành viên trong nhóm tuân theo cùng một hệ thống thiết kế.

Đối với ứng dụng lớn, có thể kết hợp TextTheme với các design token riêng để quản lý màu sắc, khoảng cách, kích thước chữ và các quy tắc trình bày.

1.6. Các nguyên tắc thiết kế Responsive Typography

Khi xây dựng Typography thích nghi, cần ưu tiên những nguyên tắc sau:

1. Sử dụng một hệ thống phân cấp văn bản rõ ràng.

2. Tránh tạo quá nhiều mức kích thước chữ gần giống nhau.

3. Điều chỉnh kích thước dựa trên không gian thực tế thay vì chỉ dựa vào tên thiết bị.

4. Giữ độ dài dòng phù hợp để tránh văn bản quá rộng trên màn hình lớn.

5. Duy trì khoảng cách dòng đủ thoáng đối với nội dung dài.

6. Không sử dụng việc giảm kích thước chữ như giải pháp mặc định cho mọi trường hợp tràn nội dung.

7. Kiểm tra giao diện khi người dùng tăng cỡ chữ trong hệ thống.

8. Kiểm thử cả những tiêu đề ngắn, tiêu đề dài và văn bản chứa từ dài hoặc chuỗi không có khoảng trắng.

Responsive Typography cần được phối hợp với Responsive Layout. Một tiêu đề có thể sử dụng kích thước chữ hợp lý nhưng vẫn bị tràn nếu Widget cha có chiều rộng không phù hợp. Vì vậy, việc điều chỉnh kiểu chữ cần đi cùng với quản lý constraints, padding, chiều rộng và cách bố trí các thành phần.

2. Text Scaling và Accessibility

2.1. Text Scaling trong Flutter

Text Scaling là cơ chế điều chỉnh kích thước văn bản theo thiết lập hiển thị của người dùng. Trên Android và iOS, người dùng có thể tăng hoặc giảm cỡ chữ trong phần cài đặt hệ thống để phù hợp với thị lực và nhu cầu sử dụng.

Flutter hỗ trợ cơ chế này thông qua TextScaler. Khi sử dụng các Widget văn bản thông thường như Text, Flutter tự động áp dụng quy tắc масштаб hóa chữ theo thiết lập của nền tảng. Vì vậy, lập trình viên không nên giả định rằng một văn bản có fontSize: 16 sẽ luôn chiếm đúng cùng một diện tích trong mọi trường hợp.

Ví dụ, một ứng dụng có nội dung:

• Tiêu đề: 24 logical pixels.

• Nội dung: 16 logical pixels.

• Chú thích: 12 logical pixels.

Khi người dùng tăng cỡ chữ hệ thống, kích thước hiển thị của các thành phần văn bản có thể tăng lên. Điều này ảnh hưởng đến chiều cao của các hàng, kích thước nút, khoảng cách giữa các phần tử và tổng chiều cao của trang.

Text Scaling không đồng nghĩa với Responsive Typography. Responsive Typography chủ yếu điều chỉnh kiểu chữ theo thiết kế và không gian hiển thị, còn Text Scaling đáp ứng thiết lập cỡ chữ của người dùng. Một ứng dụng tốt cần kết hợp cả hai cơ chế.

2.2. Vai trò của Accessibility trong thiết kế văn bản

Accessibility, hay khả năng tiếp cận, là nguyên tắc giúp ứng dụng có thể sử dụng được bởi nhiều nhóm người dùng khác nhau, bao gồm người có thị lực hạn chế, người lớn tuổi và người cần sử dụng các công nghệ hỗ trợ.

Trong thiết kế văn bản, Accessibility không chỉ liên quan đến việc tăng cỡ chữ mà còn bao gồm độ tương phản, khả năng nhận biết thông tin, cấu trúc nội dung và cách các thành phần phản ứng khi kích thước chữ thay đổi.

Những nguyên tắc cần tuân thủ:

• Không đặt kích thước chữ quá nhỏ đối với nội dung quan trọng.

• Không khóa cứng kích thước chữ để ngăn người dùng điều chỉnh.

• Không phụ thuộc hoàn toàn vào màu sắc để phân biệt trạng thái.

• Bảo đảm nội dung không bị cắt khi cỡ chữ tăng.

• Cho phép nút, thẻ thông tin và biểu mẫu mở rộng khi cần.

• Kiểm tra nội dung bằng TalkBack trên Android và VoiceOver trên iOS.

• Duy trì độ tương phản đủ tốt giữa chữ và nền.

Tài liệu Flutter khuyến nghị kiểm tra giao diện ở mức cỡ chữ lớn nhất trên thiết bị màn hình nhỏ, bởi đây là tình huống dễ làm lộ lỗi tràn nội dung và bố cục.

2.3. Sử dụng TextScaler trong Flutter

Trong những trường hợp cần đọc hoặc mô phỏng quy tắc thay đổi kích thước chữ, có thể sử dụng MediaQuery.textScalerOf(context) để truy cập cấu hình Text Scaling hiện tại.

Ví dụ:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final textScaler = MediaQuery.textScalerOf(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Text Scaling'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Nội dung thích nghi với người dùng',
              style: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 12),
            Text(
              'Đây là đoạn văn bản hỗ trợ thay đổi kích thước '
              'theo cài đặt trợ năng của hệ thống.',
              style: const TextStyle(
                fontSize: 16,
                height: 1.5,
              ),
            ),
            const SizedBox(height: 16),
            Text(
              'Kích thước chữ danh nghĩa 20px '
              'sau khi áp dụng TextScaler: '
              '${textScaler.scale(20).toStringAsFixed(1)}',
            ),
          ],
        ),
      ),
    );
  }
}

Trong ví dụ trên:

• MediaQuery.textScalerOf(context) lấy cơ chế điều chỉnh chữ hiện hành.

• textScaler.scale(20) tính kích thước được áp dụng cho giá trị chữ danh nghĩa 20.

• Text tiếp tục sử dụng cơ chế Text Scaling mặc định của Flutter.

Giá trị tính toán dùng để minh họa kích thước chữ, không phải chiều cao cuối cùng của Widget. Chiều cao thực tế còn phụ thuộc vào font, chiều rộng, xuống dòng và các thuộc tính định dạng khác.

Trong phần lớn ứng dụng, không cần tự tính toán kích thước chữ rồi gán lại cho mọi Widget. Nên để Flutter xử lý Text Scaling mặc định, đồng thời thiết kế bố cục đủ linh hoạt để thích nghi.

2.4. Xử lý giao diện khi cỡ chữ tăng

Một lỗi thường gặp là thiết kế giao diện dựa trên một kích thước chữ cố định, sau đó sử dụng chiều cao cố định cho tất cả thành phần.

Ví dụ, một nút được thiết lập height: 44 có thể hiển thị tốt với văn bản ngắn ở cỡ chữ mặc định. Tuy nhiên, khi người dùng tăng cỡ chữ, nội dung bên trong có thể không còn đủ không gian theo chiều dọc.

Thay vì cố định chiều cao, có thể sử dụng minimumSize, padding và Column để nội dung có cơ hội mở rộng.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                minimumSize: const Size(0, 48),
                padding: const EdgeInsets.symmetric(
                  horizontal: 20,
                  vertical: 14,
                ),
              ),
              onPressed: () {},
              child: const Text(
                'Xác nhận thông tin và tiếp tục',
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Nút trong ví dụ có chiều cao tối thiểu thay vì chiều cao cố định. Padding tạo khoảng trống xung quanh nội dung, còn TextAlign.center giúp văn bản nhiều dòng dễ đọc hơn.

Trong dự án thực tế, cần kiểm tra cả trạng thái thông thường và trạng thái cỡ chữ lớn. Không nên tự ý giới hạn Text Scaling trên toàn ứng dụng chỉ để giữ giao diện giống bản thiết kế ban đầu, bởi điều đó có thể làm giảm khả năng tiếp cận.

2.5. Kiểm thử Accessibility cho văn bản

Một quy trình kiểm thử phù hợp nên bao gồm:

1. Kiểm tra giao diện ở cỡ chữ mặc định.

2. Tăng cỡ chữ trong cài đặt hệ thống.

3. Mở những màn hình có nhiều văn bản, chẳng hạn chi tiết sản phẩm, biểu mẫu và trang hồ sơ.

4. Kiểm tra nút, AppBar, Bottom Navigation và các thẻ thông tin.

5. Kiểm tra trường hợp tiêu đề dài hoặc nội dung có nhiều dòng.

6. Kiểm tra khả năng cuộn khi chiều cao nội dung tăng.

7. Kiểm tra nội dung bằng trình đọc màn hình.

8. Xác nhận các hành động quan trọng vẫn có thể thực hiện được.

3. Text Overflow Strategies

3.1. Khái niệm Text Overflow

Text Overflow là hiện tượng nội dung văn bản vượt quá không gian được cấp phát hoặc không thể hiển thị đầy đủ theo cách bố trí hiện tại.

Tình trạng này thường xuất hiện trong các giao diện có không gian hạn chế như:

• Tên sản phẩm dài trong danh sách mua sắm.

• Tiêu đề bài viết trong thẻ tin tức.

• Tên người dùng trong thanh điều hướng.

• Địa chỉ email trong trang hồ sơ.

• Nội dung mô tả bên cạnh hình ảnh.

• Văn bản trong Row hoặc các thành phần có chiều rộng giới hạn.

Trong Flutter, cách xử lý phụ thuộc vào loại nội dung và mức độ quan trọng của thông tin. Không phải tất cả trường hợp tràn chữ đều nên sử dụng dấu ba chấm. Một số nội dung cần hiển thị đầy đủ, trong khi những nội dung khác có thể được rút gọn để giữ bố cục gọn gàng.

3.2. Sử dụng maxLines và TextOverflow.ellipsis

Thuộc tính maxLines giới hạn số dòng được hiển thị. Thuộc tính overflow quy định cách xử lý khi văn bản không thể hiển thị đầy đủ trong không gian hiện có.

Với TextOverflow.ellipsis, Flutter sử dụng dấu ba chấm để biểu thị phần nội dung đã bị lược bỏ.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Laptop Gaming hiệu năng cao '
              'dành cho lập trình viên và thiết kế đồ họa',
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 8),
            Text(
              'Sản phẩm có bộ xử lý mạnh, bộ nhớ lớn '
              'và màn hình chất lượng cao.',
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    );
  }
}

Trong ví dụ này, tiêu đề được giới hạn tối đa hai dòng, còn phần mô tả được giới hạn ba dòng. Nếu nội dung vượt quá giới hạn và không gian hiển thị, Flutter sẽ rút gọn phần chữ không hiển thị được.

Cách xử lý này phù hợp với danh sách sản phẩm, bảng tin và các thẻ có kích thước tương đối đồng nhất.

Tuy nhiên, cần cân nhắc khi áp dụng cho thông báo lỗi, hướng dẫn thanh toán, điều khoản hoặc nội dung có ý nghĩa quan trọng. Người dùng có thể cần đọc đầy đủ thông tin trước khi thực hiện hành động.

3.3. Xuống dòng tự động

Đối với đoạn văn cần hiển thị đầy đủ, có thể để Text tự xuống dòng theo chiều rộng khả dụng.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Text(
        'Flutter cung cấp hệ thống bố cục linh hoạt, '
        'cho phép nội dung văn bản thích nghi với chiều rộng '
        'của thiết bị. Khi không gian thay đổi, văn bản có thể '
        'tự động xuống dòng để tiếp tục hiển thị nội dung.',
        softWrap: true,
        style: const TextStyle(
          fontSize: 16,
          height: 1.6,
        ),
      ),
    );
  }
}

softWrap: true cho phép văn bản xuống dòng theo không gian bố trí. Đây là cách phù hợp cho nội dung bài viết, mô tả sản phẩm, hướng dẫn và các đoạn văn cần được đọc đầy đủ.

Cần lưu ý rằng xuống dòng chỉ giải quyết vấn đề theo chiều ngang. Nếu nội dung dài hơn chiều cao vùng chứa cố định, bố cục vẫn có thể gặp lỗi. Khi đó, cần cho phép vùng chứa mở rộng hoặc đặt nội dung trong một vùng có thể cuộn.

3.4. Mở rộng vùng chứa thay vì cắt văn bản

Một số thành phần nên được phép tăng chiều cao khi nội dung dài. Điều này đặc biệt quan trọng với nội dung có tính chất thông tin hoặc những giao diện hỗ trợ Accessibility.

Ví dụ:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Chi tiết bài viết')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Responsive Design trong Flutter',
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            const SizedBox(height: 16),
            const Text(
              'Responsive Design giúp giao diện thích nghi với '
              'nhiều kích thước màn hình khác nhau. Khi thiết bị '
              'có chiều rộng nhỏ, nội dung được bố trí phù hợp. '
              'Khi thiết bị có chiều rộng lớn, giao diện có thể '
              'sử dụng thêm không gian để trình bày nhiều thông tin '
              'hơn mà vẫn duy trì khả năng đọc và sử dụng.',
              style: TextStyle(
                fontSize: 16,
                height: 1.6,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

SingleChildScrollView cho phép người dùng cuộn khi tổng chiều cao nội dung vượt quá không gian màn hình. Column được phép mở rộng theo chiều cao của các thành phần con thay vì bị giới hạn bởi một chiều cao cố định.

Đây là lựa chọn thích hợp cho trang chi tiết, bài viết và biểu mẫu dài. Tuy nhiên, với danh sách hàng trăm hoặc hàng nghìn phần tử, nên cân nhắc các Widget cuộn có khả năng xây dựng phần tử theo nhu cầu như ListView.builder.

3.5. Xử lý tràn chữ trong Row và Flex

Row thường được sử dụng để đặt biểu tượng, văn bản và nút trên cùng một hàng. Vấn đề xuất hiện khi tổng chiều rộng của các thành phần vượt quá chiều rộng khả dụng.

Ví dụ chưa phù hợp:

Row(
  children: [
    const Icon(Icons.shopping_bag),
    const Text('Tên sản phẩm có nội dung rất dài'),
    IconButton(
      onPressed: () {},
      icon: const Icon(Icons.more_vert),
    ),
  ],
)

Trong trường hợp này, Text không được cấp giới hạn chiều rộng hữu hạn một cách thích hợp nên có thể gây lỗi tràn ngang.

Cách xử lý bằng Expanded:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        const Icon(Icons.shopping_bag),
        const SizedBox(width: 12),
        Expanded(
          child: Text(
            'Tên sản phẩm có nội dung rất dài '
            'và cần thích nghi với chiều rộng hiện có',
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ),
        IconButton(
          onPressed: () {},
          icon: const Icon(Icons.more_vert),
        ),
      ],
    );
  }
}

Expanded cấp cho phần văn bản phần không gian còn lại sau khi các thành phần khác chiếm chỗ. Nhờ đó, Text có thể tính toán xuống dòng hoặc rút gọn nội dung theo giới hạn chiều rộng.

Cần phân biệt Expanded và Flexible:

• Expanded buộc phần tử con chiếm toàn bộ không gian còn lại theo trục chính.

• Flexible cho phép phần tử con sử dụng không gian được phân bổ mà không nhất thiết phải lấp đầy toàn bộ phần đó.

Lựa chọn phù hợp phụ thuộc vào yêu cầu bố cục. Đối với văn bản nằm giữa các thành phần cố định trong Row, Expanded thường là giải pháp đơn giản.

3.6. Chuyển bố cục ngang thành dọc

Có những trường hợp không nên tiếp tục giữ các thành phần trên một hàng. Khi chiều rộng giảm, việc chuyển bố cục sang dạng dọc có thể cải thiện khả năng đọc và giảm nguy cơ tràn chữ.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final isNarrow = constraints.maxWidth < 500;

        final title = const Text(
          'Thông tin sản phẩm',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        );

        final description = const Text(
          'Nội dung mô tả chi tiết về sản phẩm, '
          'tính năng và thông số kỹ thuật.',
        );

        if (isNarrow) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              title,
              const SizedBox(height: 8),
              description,
            ],
          );
        }

        return Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(flex: 1, child: title),
            const SizedBox(width: 24),
            Expanded(flex: 2, child: description),
          ],
        );
      },
    );
  }
}

Ví dụ trên sử dụng LayoutBuilder để chọn giữa Column và Row. Khi không gian hẹp, tiêu đề và mô tả được đặt theo chiều dọc. Khi không gian đủ rộng, hai phần nội dung được bố trí theo chiều ngang.

Đây là một chiến lược Responsive UI quan trọng: thay đổi cấu trúc bố cục khi cần thiết thay vì liên tục thu nhỏ chữ hoặc cắt bỏ thông tin.

3.7. Nguyên tắc lựa chọn chiến lược xử lý Text Overflow

Nguyên tắc quan trọng nhất là lựa chọn cách xử lý dựa trên ý nghĩa nội dung. Không nên áp dụng dấu ba chấm cho tất cả văn bản chỉ nhằm giữ cho giao diện có kích thước đồng nhất.

4. Responsive Images và Aspect Ratio

4.1. Responsive Images trong Flutter

Responsive Images là cách quản lý hình ảnh để chúng thích nghi với kích thước vùng hiển thị và cấu trúc bố cục. Hình ảnh thường chiếm diện tích lớn trong giao diện, đặc biệt ở ứng dụng thương mại điện tử, mạng xã hội, tin tức và thư viện ảnh.

Nếu không kiểm soát kích thước, hình ảnh có thể gây ra những vấn đề như:

• Ảnh bị kéo giãn và biến dạng.

• Ảnh chiếm quá nhiều không gian trên điện thoại.

• Ảnh bị cắt mất phần quan trọng.

• Chiều cao của các thẻ không đồng nhất.

• Hình ảnh làm thay đổi bố cục khi tải xong.

• Ảnh có độ phân giải quá lớn gây lãng phí bộ nhớ và băng thông.

Responsive Images không chỉ là thay đổi chiều rộng của ảnh. Cần kết hợp tỷ lệ khung hình, cách hiển thị, kích thước nguồn ảnh và mục đích sử dụng của hình ảnh.

Ví dụ, ảnh sản phẩm trong danh sách thường cần có tỷ lệ nhất quán để các thẻ dễ so sánh. Ngược lại, ảnh minh họa trong bài viết có thể cần giữ toàn bộ nội dung mà không bị cắt.

4.2. Aspect Ratio

Aspect Ratio là tỷ lệ giữa chiều rộng và chiều cao của một vùng hiển thị. Trong Flutter, Widget AspectRatio giúp duy trì tỷ lệ mong muốn dựa trên constraints do bố cục cha cung cấp.

Một số tỷ lệ thường gặp:

Các tỷ lệ này là những lựa chọn phổ biến, không phải quy định bắt buộc.

Ví dụ:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: Image.network(
          'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
          fit: BoxFit.cover,
          errorBuilder: (context, error, stackTrace) {
            return const Center(
              child: Icon(Icons.broken_image, size: 48),
            );
          },
        ),
      ),
    );
  }
}

Trong ví dụ trên, AspectRatio tạo vùng hiển thị theo tỷ lệ 16:9. Khi chiều rộng vùng chứa thay đổi, chiều cao được tính toán để duy trì tỷ lệ nếu constraints cho phép.

Điều này giúp bố cục ổn định hơn so với việc thiết lập chiều rộng và chiều cao độc lập mà không quan tâm đến tỷ lệ hình ảnh.

4.3. BoxFit.cover

BoxFit.cover mở rộng hình ảnh để phủ kín toàn bộ vùng hiển thị, giữ nguyên tỷ lệ hình ảnh và cắt phần dư nếu cần.

Đây là lựa chọn phù hợp khi hình ảnh cần lấp đầy một khung có kích thước xác định, chẳng hạn:

• Ảnh đại diện.

• Ảnh bìa.

• Banner.

• Ảnh sản phẩm trong lưới.

• Ảnh nền của thẻ nội dung.

Ví dụ:

AspectRatio(
  aspectRatio: 1,
  child: Image.network(
    imageUrl,
    fit: BoxFit.cover,
    alignment: Alignment.center,
  ),
)

Trong ví dụ này, vùng ảnh có tỷ lệ 1:1. BoxFit.cover đảm bảo khung được phủ kín mà không làm méo ảnh.

Tuy nhiên, vì ảnh có thể bị cắt theo chiều ngang hoặc chiều dọc, cần kiểm tra vị trí của chủ thể. Đối với ảnh sản phẩm có các chi tiết quan trọng ở sát mép ảnh, việc sử dụng cover có thể làm mất thông tin cần thiết.

Có thể điều chỉnh alignment để thay đổi vị trí phần ảnh được ưu tiên giữ lại. Ví dụ, Alignment.topCenter phù hợp trong một số trường hợp cần giữ phần phía trên của hình ảnh.

4.4. BoxFit.contain

BoxFit.contain giữ toàn bộ hình ảnh trong vùng hiển thị mà không cắt nội dung. Hình ảnh được thu phóng sao cho nằm gọn trong khung và giữ nguyên tỷ lệ.

Phương pháp này thích hợp với:

• Ảnh sản phẩm cần hiển thị đầy đủ.

• Logo thương hiệu.

• Sơ đồ kỹ thuật.

• Hình minh họa có chú thích.

• Ảnh chứa chữ hoặc các chi tiết quan trọng ở mép.

Ví dụ:

Container(
  width: 180,
  height: 180,
  color: Colors.white,
  child: Image.network(
    imageUrl,
    fit: BoxFit.contain,
    errorBuilder: (context, error, stackTrace) {
      return const Icon(Icons.image_not_supported);
    },
  ),
)

Khác với cover, contain có thể để lại khoảng trống bên trong vùng hiển thị khi tỷ lệ ảnh khác tỷ lệ khung. Đây là hành vi bình thường và giúp bảo toàn toàn bộ hình ảnh.

Trong ứng dụng bán hàng, contain thường phù hợp với ảnh giày, điện thoại hoặc thiết bị điện tử cần quan sát đầy đủ hình dáng. cover lại thường phù hợp với ảnh thời trang, ảnh bìa và banner.

4.5. So sánh BoxFit.cover và BoxFit.contain

 —————–

BoxFit.contain (ảnh 1)

Ưu tiên giữ toàn bộ sản phẩm, có thể xuất hiện khoảng trống quanh ảnh.

BoxFit.cover (ảnh 2)

Ưu tiên lấp đầy khung hình, có thể cắt một phần nội dung ở các cạnh.

4.6. Thiết kế lưới hình ảnh thích nghi với màn hình

Trong ứng dụng thương mại điện tử, số cột của danh sách sản phẩm thường thay đổi theo chiều rộng màn hình. Trên điện thoại có thể hiển thị hai cột, trong khi tablet hoặc desktop có thể hiển thị nhiều cột hơn.

GridView.builder kết hợp SliverGridDelegateWithMaxCrossAxisExtent giúp điều chỉnh số cột theo không gian khả dụng.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final products = List.generate(
      20,
      (index) => 'Sản phẩm ${index + 1}',
    );

    return GridView.builder(
      padding: const EdgeInsets.all(16),
      gridDelegate:
          const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 220,
        mainAxisSpacing: 16,
        crossAxisSpacing: 16,
        childAspectRatio: 0.72,
      ),
      itemCount: products.length,
      itemBuilder: (context, index) {
        return Card(
          clipBehavior: Clip.antiAlias,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: AspectRatio(
                  aspectRatio: 1,
                  child: Container(
                    color: Colors.grey.shade200,
                    child: const Center(
                      child: Icon(Icons.shopping_bag, size: 48),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8),
                child: Text(
                  products[index],
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

maxCrossAxisExtent giới hạn chiều rộng tối đa của mỗi ô theo trục ngang. Khi chiều rộng khả dụng tăng, lưới có thể bố trí thêm cột. Khi chiều rộng giảm, số cột được điều chỉnh để phù hợp với không gian.

childAspectRatio kiểm soát tỷ lệ chiều rộng trên chiều cao của mỗi ô. Giá trị nhỏ hơn 1 làm ô có xu hướng cao hơn rộng.

Khi phát triển ứng dụng thực tế, cần kiểm tra sự phối hợp giữa tỷ lệ ô, ảnh sản phẩm, tên sản phẩm và thông tin giá. Nếu thẻ quá thấp, nội dung có thể bị cắt; nếu quá cao, danh sách sẽ lãng phí không gian.

4.7. Quản lý chất lượng và hiệu năng hình ảnh

Responsive Images còn liên quan đến hiệu năng tải và hiển thị. Một hình ảnh có độ phân giải quá lớn so với kích thước hiển thị có thể tiêu tốn bộ nhớ không cần thiết.

Các biện pháp nên áp dụng:

• Sử dụng ảnh có kích thước phù hợp với mục đích hiển thị.

• Dùng ảnh thumbnail trong danh sách và ảnh chất lượng cao trong trang chi tiết khi cần.

• Tận dụng cơ chế cache phù hợp.

• Hiển thị placeholder trong thời gian tải.

• Xử lý lỗi khi URL ảnh không hợp lệ hoặc mạng không khả dụng.

• Giữ ổn định tỷ lệ khung hình trước khi ảnh tải xong.

• Kiểm tra hình ảnh trên mạng chậm và thiết bị có bộ nhớ hạn chế.

• Tránh tải toàn bộ ảnh độ phân giải cao cho những thành phần chỉ hiển thị ở kích thước nhỏ.

Trong Flutter, Image.network hỗ trợ các thuộc tính như width, height, fit, alignment, loadingBuilder và errorBuilder. Khi cần tối ưu bộ nhớ cho ảnh có kích thước hiển thị xác định, có thể cân nhắc cacheWidth hoặc cacheHeight phù hợp với nền tảng và yêu cầu thực tế.

5. Conditional Visibility và Content Reflow

5.1. Conditional Visibility trong Responsive UI

Conditional Visibility là kỹ thuật quyết định một thành phần có được hiển thị dựa trên điều kiện cụ thể hay không. Trong Responsive UI, điều kiện thường liên quan đến chiều rộng khả dụng, hướng màn hình hoặc mục đích sử dụng của từng thành phần.

Không phải thành phần nào cũng cần xuất hiện trong mọi kích thước giao diện. Ví dụ:

• Thanh điều hướng ngang trên desktop có thể được thay bằng menu trên điện thoại.

• Phần mô tả phụ của thẻ sản phẩm có thể được rút gọn trên màn hình nhỏ.

• Thanh bên có thể được ẩn trên điện thoại và hiển thị trên desktop.

• Các bộ lọc nâng cao có thể được đưa vào một màn hình hoặc bảng điều khiển riêng trên thiết bị nhỏ.

• Nút hành động chính cần tiếp tục xuất hiện dù bố cục thay đổi.

Điểm quan trọng là phân biệt nội dung phụ với chức năng cốt lõi. Việc ẩn một thành phần chỉ để tránh lỗi giao diện có thể làm giảm khả năng sử dụng nếu thành phần đó chứa thông tin hoặc hành động quan trọng.

5.2. Sử dụng LayoutBuilder để điều kiện hóa giao diện

LayoutBuilder cung cấp constraints của vùng bố cục hiện tại. Dựa trên chiều rộng khả dụng, có thể chọn hiển thị hoặc thay đổi cấu trúc các thành phần.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final isWide = constraints.maxWidth >= 700;

        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'Thông tin sản phẩm',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 12),
            const Text(
              'Đây là nội dung chính luôn được hiển thị.',
            ),
            if (isWide) ...[
              const SizedBox(height: 12),
              const Text(
                'Thông tin bổ sung dành cho bố cục rộng.',
              ),
            ],
          ],
        );
      },
    );
  }
}

Trong ví dụ này, nội dung chính luôn được hiển thị. Phần thông tin bổ sung chỉ xuất hiện khi chiều rộng vùng chứa đạt ít nhất 700 logical pixels.

Cách tiếp cận này phù hợp với các thành phần có vai trò phụ, nhưng cần cân nhắc nếu phần thông tin bị ẩn có ảnh hưởng đến quyết định của người dùng. Nếu thông tin vẫn quan trọng, có thể chuyển nó sang một vị trí khác hoặc cho phép mở rộng thay vì loại bỏ hoàn toàn.

5.3. Các phương pháp điều khiển hiển thị

Flutter cung cấp nhiều cách xử lý trạng thái hiển thị. Mỗi phương pháp có đặc điểm riêng.

Không nên sử dụng Opacity(opacity: 0) như một cách mặc định để loại bỏ nội dung. Widget vẫn có thể tham gia bố cục và xử lý tương tác tùy theo cấu trúc của nó.

Tương tự, việc ẩn Widget có thể ảnh hưởng đến trạng thái nội bộ nếu Widget bị loại khỏi cây và được tạo lại. Với những thành phần cần giữ trạng thái, chẳng hạn biểu mẫu đang nhập dữ liệu, cần xem xét kỹ cách quản lý vòng đời.

5.4. Content Reflow

Content Reflow là quá trình sắp xếp lại nội dung để phù hợp với không gian hiển thị, thay vì chỉ thu nhỏ toàn bộ giao diện.

Trên màn hình rộng, các thành phần có thể nằm cạnh nhau. Khi chiều rộng giảm, chúng chuyển thành các hàng dọc hoặc được bố trí theo thứ tự ưu tiên.

Ví dụ trong ứng dụng bán hàng:

• Desktop: hình ảnh sản phẩm nằm bên trái, thông tin và nút mua hàng nằm bên phải.

• Tablet: hình ảnh và thông tin được chia theo tỷ lệ phù hợp.

• Điện thoại: hình ảnh nằm phía trên, thông tin sản phẩm nằm phía dưới, nút mua hàng được bố trí dễ thao tác.

Content Reflow giúp tận dụng không gian hiện có và giữ nội dung dễ đọc. Flutter hỗ trợ cách làm này thông qua Row, Column, Wrap, Flex, Expanded, Flexible và các Widget bố cục khác.

5.5. Chuyển đổi Row và Column theo chiều rộng

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final isCompact = constraints.maxWidth < 600;

        final image = Container(
          height: isCompact ? 200 : 280,
          color: Colors.grey.shade200,
          child: const Center(
            child: Icon(Icons.devices, size: 72),
          ),
        );

        final details = Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'Thiết bị công nghệ',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 12),
            const Text(
              'Thông tin chi tiết về sản phẩm, '
              'cấu hình và các tính năng nổi bật.',
            ),
            const SizedBox(height: 16),
            FilledButton(
              onPressed: () {},
              child: const Text('Xem sản phẩm'),
            ),
          ],
        );

        if (isCompact) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              image,
              const SizedBox(height: 16),
              details,
            ],
          );
        }

        return Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(flex: 3, child: image),
            const SizedBox(width: 24),
            Expanded(flex: 2, child: details),
          ],
        );
      },
    );
  }
}

Ví dụ sử dụng hai cách bố trí:

• Khi vùng chứa hẹp hơn 600 logical pixels, giao diện sử dụng Column.

• Khi vùng chứa rộng hơn hoặc bằng 600 logical pixels, giao diện sử dụng Row.

• Hình ảnh và nội dung được tổ chức thành các thành phần riêng biệt, thuận tiện tái sử dụng.

• Nút hành động chính vẫn xuất hiện trong cả hai bố cục.

Ngưỡng 600 chỉ là ví dụ. Trong ứng dụng thực tế, cần xác định breakpoint dựa trên chiều rộng tối thiểu mà bố cục có thể hoạt động tốt.

5.6. Content Reflow với Wrap

Wrap phù hợp với các thành phần có thể chuyển xuống dòng khi không đủ không gian. Ví dụ gồm danh sách bộ lọc, thẻ danh mục, nhãn sản phẩm và các nút lựa chọn.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    const categories = [
      'Điện thoại',
      'Laptop',
      'Phụ kiện',
      'Âm thanh',
      'Thiết bị thông minh',
    ];

    return Padding(
      padding: const EdgeInsets.all(16),
      child: Wrap(
        spacing: 8,
        runSpacing: 8,
        children: categories.map((category) {
          return Chip(
            label: Text(category),
          );
        }).toList(),
      ),
    );
  }
}

spacing xác định khoảng cách giữa các phần tử trên cùng một hàng, còn runSpacing xác định khoảng cách giữa các hàng.

Không giống Row, Wrap cho phép phần tử chuyển sang hàng tiếp theo khi không gian không đủ. Điều này giúp giao diện linh hoạt hơn mà không cần tự tính toán số cột trong nhiều trường hợp.

5.7. Quản lý thứ tự nội dung theo kích thước màn hình

Responsive UI không chỉ thay đổi vị trí mà còn có thể thay đổi thứ tự ưu tiên của nội dung. Trên điện thoại, người dùng thường cần nhìn thấy thông tin chính và hành động quan trọng sớm hơn. Trên desktop, giao diện có thể dành không gian cho nội dung bổ sung.

Ví dụ, một trang chi tiết sản phẩm có thể tổ chức như sau:

Khi xây dựng cấu trúc này, nên tách nội dung thành các Widget riêng rồi lựa chọn cách sắp xếp theo breakpoint. Tránh tạo nhiều bản sao của cùng một thành phần chỉ để thay đổi vị trí, vì việc này có thể dẫn đến trùng lặp mã nguồn và khó đồng bộ trạng thái.

5.8. Nguyên tắc triển khai Conditional Visibility và Content Reflow

Một số nguyên tắc quan trọng:

1. Giữ lại thông tin và chức năng cốt lõi trên mọi kích thước màn hình.

2. Chỉ ẩn nội dung khi việc ẩn không làm mất khả năng hiểu hoặc sử dụng ứng dụng.

3. Ưu tiên sắp xếp lại bố cục trước khi loại bỏ nội dung quan trọng.

4. Dùng LayoutBuilder khi quyết định phụ thuộc vào chiều rộng của vùng chứa.

5. Dùng MediaQuery khi cần thông tin ở cấp màn hình hoặc môi trường hiển thị.

6. Hạn chế tạo nhiều bản sao của cùng một Widget để phục vụ từng kích thước màn hình.

7. Kiểm tra thứ tự nội dung với người dùng bàn phím và trình đọc màn hình.

8. Bảo đảm nút hành động quan trọng vẫn dễ tìm và dễ thao tác.

9. Kiểm thử giao diện ở cả chiều ngang lẫn chiều dọc trên thiết bị có thể xoay màn hình.

10. Kết hợp Content Reflow với Text Scaling để tránh lỗi khi văn bản tăng kích thước.

6. Tổng kết

Responsive Typography, Text Scaling, Text Overflow Strategies, Responsive Images và Content Reflow là những thành phần quan trọng trong quá trình xây dựng giao diện Flutter có khả năng thích nghi.

Responsive Typography giúp văn bản duy trì khả năng đọc trên các kích thước màn hình khác nhau. Text Scaling hỗ trợ người dùng điều chỉnh cỡ chữ theo nhu cầu, trong khi Accessibility bảo đảm nội dung và chức năng vẫn sử dụng được khi các thiết lập trợ năng thay đổi.

Text Overflow Strategies giúp xử lý nội dung vượt quá vùng hiển thị thông qua giới hạn số dòng, dấu ba chấm, xuống dòng, mở rộng vùng chứa hoặc thay đổi bố cục. Responsive Images sử dụng AspectRatio, BoxFit.cover và BoxFit.contain để kiểm soát cách hình ảnh thích nghi với vùng hiển thị. Conditional Visibility và Content Reflow cho phép điều chỉnh thành phần được hiển thị, đồng thời tổ chức lại bố cục khi không gian thay đổi.

Trong dự án Flutter thực tế, những kỹ thuật này cần được kết hợp thay vì triển khai độc lập. Một giao diện responsive tốt không chỉ vừa với màn hình mà còn phải dễ đọc, dễ thao tác, giữ được thông tin quan trọng và hoạt động ổn định khi người dùng thay đổi cỡ chữ hoặc kích thước thiết bị.