Trong bài viết này mình sẽ giới thiệu về Flutter TextField (trường văn bản), một trong những widget của ứng dụng Flutter
Flutter TextField (trường văn bản)
Flutter TextField hoặc TextBox là một phần tử đầu vào chứa dữ liệu chữ và số, chẳng hạn như tên, mật khẩu, địa chỉ, v.v. Nó là phần tử điều khiển GUI cho phép người dùng nhập thông tin văn bản bằng mã có thể lập trình được. Nó có thể là trường văn bản một dòng (khi chỉ yêu cầu một dòng thông tin) hoặc trường văn bản nhiều dòng (khi yêu cầu nhiều dòng thông tin).
TextField trong Flutter là widget nhập văn bản được sử dụng phổ biến nhất cho phép người dùng thu thập dữ liệu đầu vào từ bàn phím vào một ứng dụng. Chúng ta có thể sử dụng widget TextField trong việc tạo biểu mẫu, gửi tin nhắn, tạo trải nghiệm tìm kiếm và nhiều hơn thế nữa. Theo mặc định, Flutter trang trí TextField bằng một gạch dưới. Chúng ta cũng có thể thêm một số thuộc tính với TextField, chẳng hạn như nhãn, biểu tượng, văn bản gợi ý nội tuyến và văn bản lỗi bằng cách sử dụng InputDecoration làm trang trí. Nếu chúng ta muốn loại bỏ hoàn toàn các thuộc tính trang trí, thì bắt buộc phải đặt trang trí thành null.
Đoạn mã sau giải thích một ví dụ demo về tiện ích TextFiled trong Flutter:
TextField ( decoration: InputDecoration( border: InputBorder.none, labelText: 'Enter Name', hintText: 'Enter Your Name' ), );
Một số thuộc tính phổ biến nhất được sử dụng với widget TextField như sau:
decoration: Nó được sử dụng để hiển thị trang trí xung quanh TextField.
border: Nó được sử dụng để tạo đường viền hình chữ nhật tròn mặc định xung quanh TextField.
labelText: Nó được sử dụng để hiển thị văn bản nhãn trên vùng chọn TextField.
hintText: Nó được sử dụng để hiển thị văn bản gợi ý bên trong TextField.
icon: Nó được sử dụng để thêm các biểu tượng trực tiếp vào TextField.
Chúng ta sẽ xem cách sử dụng widget TextField trong ứng dụng Flutter thông qua các bước sau:
Bước 1: Tạo một dự án Flutter trong IDE mà bạn đã sử dụng. Ở đây, chúng ta sẽ sử dụng Android Studio.
Bước 2: Mở dự án trong Android Studio và điều hướng đến thư mục lib. Trong thư mục này, hãy mở tệp main.dart và nhập gói material.dart như bên dưới:
import 'package:flutter/material.dart';
Bước 3: Tiếp theo, gọi lớp MyApp chính bằng cách sử dụng chức năng ứng dụng void main run và sau đó tạo lớp widget chính của bạn có tên là MyApp mở rộng với StatefulWidget:
void main() => runApp( MyApp() );
class MyApp extends StatefulWidget { }
Bước 4: Tiếp theo, chúng ta cần tạo widget Scaffold -> Column widget trong vùng xây dựng widget lớp như bên dưới:
class MyApp extends StatefulWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter TextField Example'),
),
body: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: <Widget> [
]
)
)
)
);
}
}
Bước 5: Cuối cùng, tạo widget TextField như đoạn mã bên dưới.
child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Password', hintText: 'Enter Password', ), ),
chúng ta sẽ xem mã nguồn hoàn chỉnh có chứa widget con TextField. Ứng dụng Flutter này có hai TextFields và một RaisedButton. Sau khi điền thông tin chi tiết, người dùng bấm vào nút. Vì chúng ta chưa chỉ định bất kỳ giá trị nào trong thuộc tính onPressed () của nút, nên nó không thể in chúng ra bảng điều khiển. Thay thế mã sau trong tệp main.dart và xem kết quả.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp( home: MyApp(),));
}
class MyApp extends StatefulWidget {
@override
_State createState() => _State();
}
class _State extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter TextField Example'),
),
body: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter Your Name',
),
),
),
Padding(
padding: EdgeInsets.all(15),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
),
),
),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Sign In'),
onPressed: (){},
)
],
)
)
);
}
}
Output
Khi chúng ta chạy ứng dụng trong trình giả lập android, 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 sau:
Nếu chúng ta nhấp vào bên trong hộp văn bản, chúng ta có thể thấy bàn phím đã xuất hiện từ cuối màn hình, nhãn đi vào góc trên cùng bên trái của đường viền và văn bản gợi ý được hiển thị trong trường. Ảnh chụp màn hình dưới đây giải thích rõ ràng hơn:
Làm cách nào để lấy giá trị của TextField?
Chúng ta biết rằng Flutter không có ID như trong Android cho widget TextField. Flutter cho phép người dùng truy xuất văn bản chủ yếu theo hai cách: Đầu tiên là phương thức onChanged và một phương thức khác là phương thức controller. Cả hai đều được thảo luận dưới đây:
1. Phương thức onChanged: Đây là cách dễ nhất để lấy giá trị trường văn bản. Phương thức này lưu trữ giá trị hiện tại trong một biến đơn giản và sau đó sử dụng nó trong tiện ích TextField. Dưới đây là ví dụ mẫu:
String value = "";
TextField(
onChanged: (text) {
value = text;
},
)
2. Phương thức bộ điều khiển: Là một phương pháp phổ biến để lấy giá trị trường văn bản bằng TextE EditorController. Nó sẽ được gắn vào widget TextField và sau đó lắng nghe sự thay đổi và kiểm soát giá trị văn bản của widget. Dưới đây là mã mẫu:
TextEditingController mycontroller = TextEditingController();
TextField(
controller: mycontroller,
)
Mã mẫu để thấy các thay đổi.
controller.addListener(() {
// Do something here
});
Mã mẫu để lấy hoặc đặt giá trị.
print(controller.text); // Print current value controller.text = "Demo Text"; // Set new value
Chúng ta hãy xem chi tiết cách thứ hai để truy xuất giá trị trường văn bản trong ứng dụng Flutter với sự trợ giúp của các bước sau:
Tạo một TextE EditorController. Đính kèm TextE EditController vào TextField bằng cách sử dụng thuộc tính controller.
Lấy giá trị của TextField bằng cách sử dụng phương thức text () được cung cấp bởi TextE EditorController.
Bây giờ, hãy tạo một dự án Flutter mới trong IDE của bạn và mở tệp main.dart. Thay thế mã dưới đây trong tệp main.dart. Trong ví dụ này, chúng ta sẽ hiển thị hộp thoại cảnh báo với giá trị hiện tại của trường văn bản khi người dùng nhấn vào một nút.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp( home: MyApp(),));
}
class MyApp extends StatefulWidget {
@override
_State createState() => _State();
}
class _State extends State<MyApp> {
TextEditingController nameController = TextEditingController();
TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter TextField Example'),
),
body: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
controller: nameController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter Your Name',
),
),
),
Padding(
padding: EdgeInsets.all(15),
child: TextField(
controller: passwordController,
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
),
),
),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Sign In'),
onPressed: (){
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Alert Message"),
// Retrieve the text which the user has entered by
// using the TextEditingController.
content: Text(nameController.text),
actions: <Widget>[
new FlatButton(
child: new Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
},
);
},
)
],
)
)
);
}
}
Output:
Khi chúng ta chạy ứng dụng trong trình giả lập android, 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 sau:
Bấm vào bên trong hộp văn bản và thêm giá trị, như được hiển thị trong trường. Khi chúng ta nhấn nút đăng nhập, một hộp thoại cảnh báo xuất hiện có chứa văn bản mà người dùng đã nhập vào trường. Nếu chúng ta nhấp vào nút OK, hộp thoại cảnh báo sẽ biến mất. Nhìn vào ảnh chụp màn hình bên dưới:
Làm thế nào để làm cho TextField có thể mở rộng?
Đôi khi, chúng ta muốn mở rộng TextField có nghĩa là nó có thể có nhiều hơn một dòng. Flutter có thể làm điều này rất dễ dàng bằng cách thêm các thuộc tính maxLines và đặt nó thành null, theo mặc định. Chúng ta cũng có thể chỉ định giá trị chính xác để mở rộng số dòng theo mặc định.
TextField( maxLines: 4, )
Làm thế nào để che khuất giá trị trường văn bản?
Ít người biết đến có nghĩa là làm cho trường không thể đọc được hoặc không thể hiểu được một cách dễ dàng. Văn bản bị che khuất không thể nhìn thấy rõ ràng. Trong Flutter, nó chủ yếu được sử dụng với trường văn bản có chứa mật khẩu. Chúng ta có thể làm cho giá trị trong Trường văn bản bị che khuất bằng cách đặt Văn bản tối nghĩa thành true.
TextField( obscureText: true, ),
Cuối cùng
Cám ơn bạn đã theo dõi bài viết về trường văn bản trong ứ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.
