close

Định dạng Giao diện với ThemeData và Custom Style trong Flutter

Trong Flutter, bạn có thể định dạng giao diện của ứng dụng bằng cách sử dụng ThemeData và tùy chỉnh các kiểu (styles). ThemeData là một lớp chứa các thuộc tính để định nghĩa các kiểu màu chủ đạo, font chữ, padding, v.v. cho toàn bộ ứng dụng. Custom Style cho phép bạn tùy chỉnh các kiểu cho từng Widget cụ thể. Dưới đây là hướng dẫn chi tiết về cách sử dụng ThemeData và Custom Style trong Flutter:

ThemeData

ThemeData trong Flutter là một lớp chứa các thuộc tính để định nghĩa các kiểu màu chủ đạo, font chữ, padding và nhiều thuộc tính khác cho toàn bộ ứng dụng. Bằng cách sử dụng ThemeData, bạn có thể thay đổi nhanh chóng giao diện của ứng dụng mà không cần thay đổi từng Widget cụ thể.

Các thuộc tính phổ biến của ThemeData:

  • primaryColor: Màu chủ đạo cho các phần tử chính của ứng dụng như thanh tiêu đề, nút, v.v.
  • accentColor: Màu chủ đạo cho các phần tử phụ hoặc điểm nhấn trong giao diện, ví dụ như FloatingActionButton.
  • backgroundColor: Màu nền chung cho toàn bộ ứng dụng.
  • textTheme: Định nghĩa kiểu văn bản chủ đạo cho các văn bản trong ứng dụng như tiêu đề, văn bản chính, v.v.
  • textTheme.headline1: Kiểu văn bản cho tiêu đề cấp 1.
  • textTheme.headline2: Kiểu văn bản cho tiêu đề cấp 2.
  • textTheme.bodyText1: Kiểu văn bản cho văn bản chính.
MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue, // Màu chủ đạo cho thanh tiêu đề, nút, v.v.
    accentColor: Colors.green, // Màu chủ đạo cho các phần tử thứ cấp, ví dụ như FloatingActionButton
    fontFamily: 'Roboto', // Font chữ chủ đạo cho toàn bộ ứng dụng
    textTheme: TextTheme( // Kiểu văn bản chủ đạo cho các văn bản trong ứng dụng
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),
      bodyText1: TextStyle(fontSize: 16),
    ),
  ),
  home: MyHomePage(),
)

 

Custom Style

Custom Style cho phép bạn tùy chỉnh kiểu cho từng Widget cụ thể. Bằng cách sử dụng thuộc tính style của các Widget như Text, Container, RaisedButton, bạn có thể thay đổi font chữ, màu sắc, kích thước văn bản, padding và các thuộc tính khác.

Các thuộc tính phổ biến của TextStyle (dùng cho Text Widget):

  • fontSize: Kích thước font chữ.
  • fontWeight: Độ đậm của font chữ.
  • color: Màu sắc của văn bản.
  • fontStyle: Kiểu font chữ, như in đậm, in nghiêng.
  • letterSpacing: Khoảng cách giữa các ký tự.
  • wordSpacing: Khoảng cách giữa các từ.
  • decoration: Kiểu trang trí cho văn bản, ví dụ như gạch chân, gạch ngang.

Ví dụ sử dụng Custom Style:

Text(
  'Chào bạn',
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),
)

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  padding: EdgeInsets.all(8),
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),
)

 

Sử dụng Themes và Styles với MediaQuery

Bạn có thể kết hợp Themes và Styles với MediaQuery để thay đổi giao diện dựa trên kích thước màn hình hoặc độ phân giải thiết bị.

Ví dụ:

MediaQuery(
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),
  child: Text('Văn bản sẽ được phóng to 1.5 lần so với kích thước mặc định'),
)

 

Kết Luận:

Flutter cung cấp các công cụ mạnh mẽ để định dạng giao diện ứng dụng của bạn. Bằng cách sử dụng ThemeData và tùy chỉnh các Style, bạn có thể dễ dàng điều chỉnh các yếu tố giao diện như màu sắc, font chữ, kích thước văn bản, v.v. để tạo ra giao diện đẹp và thú vị cho ứng dụng của mình.