Bài viết này mình sẽ trình bày về widget text, một trong những widget của ứng dụng Flutter.
Tóm tắt nội dung
Flutter text (Văn bản trong Flutter)
Widget văn bản là một widget con trong Flutter cho phép chúng ta hiển thị một chuỗi văn bản với một dòng duy nhất trong ứng dụng của chúng ta. Tùy thuộc vào các ràng buộc về bố cục, chúng ta có thể ngắt chuỗi trên nhiều dòng hoặc tất cả có thể được hiển thị trên cùng một dòng. Nếu chúng ta không chỉ định bất kỳ kiểu nào cho widget văn bản, nó sẽ sử dụng kiểu lớp DefaultTextStyle gần nhất. Lớp này không có bất kỳ kiểu rõ ràng nào. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng widget Văn bản và cách tạo kiểu cho nó trong ứng dụng của chúng ta.
Đây là một ví dụ đơn giản để hiểu widget này. Ví dụ này hiển thị tiêu đề dự án của chúng ta trong thanh ứng dụng và một thông báo trong nội dung ứng dụng.
import 'package:flutter/material.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyTextPage()
);
}
}
class MyTextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Text Widget Example")
),
body: Center(
child:Text("Welcome to Javatpoint")
),
);
}
}
Trong đoạn mã trên, chúng ta đã sử dụng widget MaterialApp gọi màn hình chính bằng cách sử dụng lớp MyTextPage (). Lớp này chứa widget con đầu trang, có appBar và phần thân, nơi chúng ta đã sử dụng widget văn bản để hiển thị tiêu đề và nội dung tương ứng. Đó là một kịch bản đơn giản của widget văn bản, nơi chúng ta phải chuyển chuỗi mà chúng ta muốn hiển thị trên trang của mình.
Khi chúng ta chạy ứng dụng này trong trình giả lập hoặc thiết bị, chúng ta sẽ nhận được giao diện người dùng tương tự như ảnh chụp màn hình bên dưới:
Trình tạo widget con văn bản:
Công cụ tạo widget văn bản được sử dụng để tạo giao diện tùy chỉnh cho văn bản của chúng ta trong Flutter:
const Text(String data,{
Key key,
TextStyle style,
StrutStyle strutStyle,
TextAlign textAlign,
TextDirection textDirection,
TextOverflow overflow,
bool softWrap,
double textScaleFactor,
int maxLines,
String semanticsLabel,
TextWidthBasis textWidthBasis,
TextHeightBehavior textHeightBehavior
}
)
Sau đây là các thuộc tính thiết yếu của widget văn bản được sử dụng trong ứng dụng của chúng ta:
TextAlign: Nó được sử dụng để chỉ định cách văn bản của chúng ta được căn chỉnh theo chiều ngang. Nó cũng kiểm soát vị trí văn bản.
TextDirection: Nó được sử dụng để xác định cách các giá trị textAlign kiểm soát bố cục của văn bản của chúng ta. Thông thường, chúng ta viết văn bản từ trái sang phải, nhưng chúng ta có thể thay đổi nó bằng cách sử dụng tham số này.
Overflow: Nó được sử dụng để xác định khi nào văn bản sẽ không vừa với không gian có sẵn. Nó có nghĩa là chúng ta đã chỉ định nhiều văn bản hơn không gian có sẵn.
TextScaleFactor: Nó được sử dụng để xác định tỷ lệ của văn bản được hiển thị bởi widget văn bản. Giả sử chúng ta đã chỉ định hệ số tỷ lệ văn bản là 1,5, thì văn bản của chúng ta sẽ lớn hơn 50 phần trăm so với kích thước phông chữ được chỉ định.
SoftWrap: Nó được sử dụng để xác định có hay không hiển thị tất cả nội dung widget văn bản khi không còn đủ dung lượng. Nếu nó là sự thật, nó sẽ hiển thị tất cả nội dung. Nếu không, nó sẽ không hiển thị tất cả nội dung.
MaxLines: Nó được sử dụng để xác định số dòng tối đa được hiển thị trong widget văn bản.
TextWidthBasis: Nó được sử dụng để kiểm soát cách xác định chiều rộng văn bản.
TextHeightBehavior: Nó được sử dụng để kiểm soát cách đoạn văn xuất hiện giữa dòng đầu tiên và phần cuối của dòng cuối cùng.
Style: Đây là thuộc tính phổ biến nhất của widget con này cho phép các nhà phát triển tạo kiểu dáng cho văn bản của họ. Nó có thể tạo kiểu bằng cách chỉ định màu nền trước và màu nền, cỡ chữ, độ đậm phông chữ, khoảng cách giữa các chữ và từ, ngôn ngữ, bóng, v.v. Xem bảng để hiểu dễ dàng hơn:
| Thuộc tính | Miêu tả |
| foreground | Nó xác định sơn làm nền trước cho văn bản. |
| background | Nó xác định sơn làm nền cho văn bản. |
| fontWeight | Nó quyết định độ dày của văn bản. |
| fontSize | Nó xác định kích thước của văn bản. |
| fontFamily | Nó được sử dụng để chỉ định kiểu chữ cho phông chữ. Đối với điều này, chúng tôi cần tải xuống tệp kiểu chữ trong dự án của mình, sau đó giữ tệp này trong thư mục tài sản / phông chữ. Cuối cùng, cấu hình tệp pubspec.yaml để sử dụng nó trong dự án. |
| fontStyle | Nó được sử dụng để tạo kiểu cho phông chữ ở dạng in đậm hoặc nghiêng. |
| Color | Nó được sử dụng để xác định màu sắc của văn bản. |
| letterSpacing | Nó được sử dụng để xác định khoảng cách giữa các ký tự của văn bản. |
| wordSpacing | Nó được sử dụng để xác định khoảng cách giữa hai từ của văn bản. |
| shadows | Nó được sử dụng để vẽ bên dưới văn bản. |
| decoration | Chúng tôi sử dụng điều này để trang trí văn bản bằng cách sử dụng ba tham số: trang trí, màu sắc trang trí, phong cách trang trí. Trang trí xác định vị trí, trang trí Màu xác định màu sắc, trang trí Phong cách xác định hình dạng. |
import 'package:flutter/material.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyTextPage()
);
}
}
class MyTextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Text Widget Example")
),
body: Center(
child:Text(
"Hello World! This is a Text Widget.",
style: TextStyle(
fontSize: 35,
color: Colors.purple,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
letterSpacing: 8,
wordSpacing: 20,
backgroundColor: Colors.yellow,
shadows: [
Shadow(color: Colors.blueAccent, offset: Offset(2,1), blurRadius:10)
]
),
)
),
);
}
}
Output:
Khi chúng ta chạy ứng dụng này trong trình giả lập hoặc thiết bị, chúng ta sẽ nhận được giao diện người dùng tương tự như ảnh chụp màn hình bên dưới:
Widget con RichText Flutter
Đôi khi chúng ta muốn hiển thị một dòng hoặc một đoạn văn với nhiều kiểu như in đậm, in nghiêng, gạch chân, màu sắc khác nhau, phông chữ khác nhau hoặc mọi thứ cùng một lúc. Trong trường hợp đó, chúng ta phải sử dụng widget RichText cho phép chúng ta thực hiện nhiều kiểu thử nghiệm mà không cần chuyển đổi nhiều widget.
RichText là một widget rất hữu ích trong Flutter, được sử dụng để hiển thị một đoạn văn bản trên giao diện người dùng với nhiều kiểu. Bên trong widget, chúng ta có thể có các kiểu khác nhau bằng cách tạo cho nó một cây các widget TextSpan. Mỗi TextSpan có thể đặt kiểu riêng để ghi đè kiểu mặc định.
Cấu trúc RichText Hình ảnh bên dưới giải thích cấu trúc của tiện ích RichText. Trong hình ảnh này, TextSpan mẹ có thuộc tính kiểu riêng và một tham số văn bản, sau đó nó có thể chứa một số TextSpan con có thuộc tính kiểu riêng của chúng.
Từ tổng quan ở trên, bây giờ chúng ta sẽ xem cách sử dụng widget này trong ứng dụng của chúng ta.
Thí dụ
Giả sử ứng dụng của chúng ta có màn hình đăng nhập và tùy chọn để tạo tài khoản người dùng mới. Phần tạo tài khoản người dùng mới có sự kết hợp giữa văn bản thông thường và văn bản màu, như được hiển thị trong màn hình bên dưới:
Trong hình ảnh trên, chúng ta có thể thấy dòng chữ “Bạn chưa có tài khoản? Hãy đăng ký” là một dòng văn bản duy nhất, trong đó phần cuối cùng là một từ có thể nhấp để điều hướng người dùng trên trang đăng ký. Để thực hiện loại văn bản này, chúng tâ sẽ chia nó thành hai phần. Phần đầu tiên sử dụng TextSpan mẹ và nhập văn bản “Bạn chưa có tài khoản?” với màu đen. Phần thứ hai sử dụng TextSpan con và nhập văn bản “Đăng ký” với màu xanh lam. Xem đoạn mã dưới đây:
RichText( text: TextSpan( text: 'Don\'t have an account?', style: TextStyle(color: Colors.black, fontSize: 20), children: <TextSpan>[ TextSpan(text: ' Sign up', style: TextStyle(color: Colors.blueAccent, fontSize: 20) ) ] ), ),
Vì “Đăng ký” là một văn bản có thể nhấp được, vì vậy chúng ta cần triển khai hành động onTap () trên phần này. TextSpan chứa TapGestureRecognizer () triển khai hành động onTap (). Trong ví dụ này, chúng ta sẽ sử dụng thuộc tính trình nhận dạng để làm cho văn bản có thể đọc được. Chúng ta sẽ hiển thị toàn bộ đoạn mã để hiểu nó rõ ràng hơn.
Tạo một dự án mới trong IDE mà bạn đang sử dụng. Mở dự án, điều hướng đến thư mục lib và thay thế mã bên dưới bằng tệp main.dart.
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyTextPage()
);
}
}
class MyTextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Rich Text Widget Example")
),
body: Container(
child: Center(
child: RichText(
text: TextSpan(
text: 'Don\'t have an account?',
style: TextStyle(color: Colors.black, fontSize: 20),
children: <TextSpan>[
TextSpan(text: ' Sign up',
style: TextStyle(color: Colors.blueAccent, fontSize: 20),
recognizer: TapGestureRecognizer()
..onTap = () {}
)
]
),
),
)
)
);
}
}
Output:
Khi chúng ta chạy ứng dụng này trong trình giả lập hoặc thiết bị, chúng ta sẽ nhận được giao diện người dùng tương tự như ảnh chụp màn hình bên dưới:
Làm cách nào để hiển thị một biểu tượng trong widget văn bản trong Flutter?
Đôi khi các nhà phát triển cần hiển thị một biểu tượng với widget văn bản. Để làm điều này, Flutter cung cấp một WidgetSpan () bên trong widget RichText () để thêm một biểu tượng với widget văn bản. Ví dụ dưới đây giải thích nó một cách đơn giản:
import 'package:flutter/material.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyTextPage()
);
}
}
class MyTextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Rich Text Widget Example")
),
body: Container(
child: Center(
child:RichText(
text: TextSpan(
style: Theme.of(context).textTheme.body1,
children: [
TextSpan(text: 'Click ', style: TextStyle(fontSize: 25)),
WidgetSpan(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 2.0),
child: Icon(Icons.add, color: Colors.red),
),
),
TextSpan(text: ' to add', style: TextStyle(fontSize: 25)),
],
),
)
)
)
);
}
}
Output:
Khi chúng ta chạy ứng dụng này trong trình giả lập hoặc thiết bị, chúng ta sẽ nhận được giao diện người dùng tương tự như ảnh chụp màn hình bên dưới:
Cuối cùng
Cám ơn bạn đã theo dõi bài viết về widget văn bản của ứng dụng Flutter, ngoài ra các bạn có thể xem thêm các nội dung khác trong chuyên mục lập trình Flutter được chia sẻ bởi Nguyễn Hưng.
