Khi khung phát triển ứng dụng di động Flutter ngày càng trở nên phổ biến, nhiều doanh nghiệp đang chọn sử dụng nó cho các dự án của họ.
Nhiều nhà phát triển đánh giá cao khả năng phát triển ứng dụng với giao diện người dùng hoàn hảo pixel bằng cách sử dụng cấu trúc widget đơn giản. Tôi nghĩ Flutter là tương lai của phát triển ứng dụng dành cho thiết bị di động vì tính đơn giản trong việc phát triển giao diện người dùng và khả năng tăng cường logic tính năng bằng ngôn ngữ lập trình Dart.
Hướng dẫn này chủ yếu tập trung vào việc dạy bạn những kiến thức cơ bản về khung Flutter bằng cách xây dựng một ứng dụng Máy tính Mẹo đơn giản. Chúng tôi sẽ đề cập đến các mẫu mã tiêu chuẩn bao gồm các lớp tiện ích Trạng thái và Không trạng thái và một số tiện ích mà bạn sẽ sử dụng nhiều nhất trong quá trình phát triển ứng dụng Flutter.
Ý tưởng ở đây là bắt đầu bằng cách thiết lập một dự án Flutter dành cho người mới bắt đầu. Sau đó, chúng tôi sẽ chuyển sang triển khai giao diện người dùng tổng thể và chức năng cơ bản.
Vì vậy, hãy bắt đầu!
Cách thiết lập dự án Flutter của bạn
Để tạo một dự án Flutter mới, bạn phải cài đặt Flutter SDK trên hệ thống của mình. Để có quá trình cài đặt đơn giản và nhanh chóng, bạn có thể làm theo tài liệu chính thức về bộ nhớ đệm.
Hãy nhớ rằng nó cũng yêu cầu Android Studio và Android SDK nếu bạn đang phát triển ứng dụng cho nền tảng Android.
Sau khi mọi thứ được thiết lập thành công theo tài liệu hướng dẫn, bạn có thể tiếp tục và chạy lệnh Flutter sau trong terminal:
flutter create tipCalculator
Lệnh này sẽ tự động tải xuống và thiết lập dự án Flutter khởi động cho bạn. Bây giờ bạn có thể mở dự án trong Visual Studio Code IDE.
Nếu bạn đã kết nối trình mô phỏng thiết bị hoặc thiết bị điện thoại thông minh thực tế, thì bạn có thể chỉ cần chạy lệnh sau để khởi chạy ứng dụng:
flutter run
Ngoài ra, bạn có thể nhấn 'F5' trên bàn phím của mình, thao tác này sẽ kích hoạt tùy chọn menu trong VSCode. Từ menu đó, bạn có thể chọn thiết bị mà bạn muốn khởi chạy ứng dụng.
Lưu ý rằng, bạn phải ở bên trong tệp có phần mở rộng .dart để chạy thành công lệnh này.
Xây dựng và chạy nó bằng cách sử dụng lệnh trên hoặc F5 để tải mẫu khởi động sau trong trình mô phỏng / thiết bị thực tế của bạn:
Bây giờ, bạn sẽ thiết lập và chạy ứng dụng Flutter của mình.
Hãy đi vào chi tiết hơn một chút về những gì đang diễn ra trong tệp dự án chính, main.dart .
Trong main.dart tệp, chúng tôi có hai đối tượng lớp. Một mở rộng cho các widget Trạng thái và một mở rộng cho các widget Không trạng thái. Vậy điều đó có nghĩa là gì?
- Tiện ích con trạng thái:lớp chứa các trạng thái của ứng dụng. Các trạng thái có thể thay đổi và kích hoạt hiển thị các widget trong lớp widget trạng thái này. Nó góp phần thay đổi trạng thái động.
- Widget không trạng thái:lớp này không chứa bất kỳ trạng thái nào. Nó đại diện cho chế độ xem widget không thay đổi. Nó không góp phần vào bất kỳ thay đổi trạng thái động nào.
Tệp main.dart cũng chứa main() hàm gọi MyApp lớp bên trong runApp để kích hoạt khởi chạy ứng dụng Flutter trong thiết bị.
Cách tạo giao diện người dùng của Máy tính Mẹo
Để bắt đầu triển khai giao diện người dùng của mình, chúng ta cần xóa mọi thứ có bên trong MyHomePageState theo mặc định.
Sau khi xóa nó, chúng tôi sẽ trả về một Scaffold đơn giản widget từ bên trong chức năng xây dựng.
Scaffold widget cung cấp các thuộc tính để thêm appBar cũng như body . Hiện tại, chúng tôi sẽ thêm một thanh ứng dụng đơn giản. Bạn có thể thấy việc triển khai tổng thể trong đoạn mã bên dưới:
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
),
body: Container()
);
}
}
Xây dựng và chạy nó sau khi thêm appBar sử dụng AppBar tiện ích con với title tài sản. Bạn sẽ nhận được kết quả sau trong màn hình trình giả lập của mình:
Lưu ý rằng Flutter có tải lại nóng trong khi lưu tệp Dart. Vì vậy, bất cứ khi nào bạn lưu bất kỳ thay đổi nào trong tệp Dart của dự án, những thay đổi đó sẽ tự động được phản ánh trong trình giả lập.
Bước 1:Thiết kế Thanh ứng dụng
Ở đây, chúng tôi sẽ sửa đổi AppBar widget sử dụng các thuộc tính khác nhau mà nó cung cấp. Bạn có thể xem mã đã sửa đổi trong đoạn mã bên dưới:
appBar: AppBar(
title: Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
centerTitle: true,
elevation: 0.0,
backgroundColor: Colors.white70,
),
Xây dựng và chạy nó, và bạn sẽ nhận được kết quả sau trong màn hình giả lập:
Ở đây, chúng tôi đã sử dụng một số AppBar cơ bản thuộc tính widget chẳng hạn như
-
elevation, cho phép chúng tôi kiểm soát hiệu ứng đổ bóng trong Thanh ứng dụng tương tự như z-index, -
centerTitletập trung vào tiêu đề, - và chúng tôi cũng đã thay đổi màu nền thành màu trắng.
Bước 2:Thiết kế Thân giàn
Cho đến thời điểm này, chúng tôi chỉ có một Container trống tiện ích con trong body tài sản. Bây giờ, chúng ta sẽ thêm một số thuộc tính và tiện ích con vào Container tiện ích con như được hướng dẫn trong đoạn mã bên dưới:
body: Container(
color: Colors.white70,
padding: const EdgeInsets.all(16.0),
child: Center(
child: Form(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
),
),
),
Xây dựng và chạy nó, và bạn sẽ nhận được kết quả sau trong màn hình giả lập:
Như bạn có thể thấy trong ảnh chụp màn hình ở trên, chúng tôi đã thay đổi màu nền của thân máy thành màu trắng. Ngoài ra, chúng tôi đã thêm một số padding cùng với Center widget dưới dạng widget con sẽ tập trung toàn bộ giao diện người dùng trong phần thân.
Center tiện ích con có Form widget (một trong những con của nó) mà chúng ta sẽ tạo một biểu mẫu đơn giản với các trường văn bản.
Và quan trọng nhất, chúng tôi có Column tiện ích con dưới dạng tiện ích con của Form . Column tiện ích con cung cấp cho chúng tôi children thuộc tính mảng widget trong đó chúng tôi có thể tích hợp bất kỳ số lượng widget nào sẽ xuất hiện theo chiều dọc trên màn hình.
Bước 3:Xác định Hằng số và Biến số
Trước khi triển khai các phần tử biểu mẫu (bao gồm các trường văn bản), chúng ta cần xác định một số hằng số để xử lý các đầu vào từ các trường đầu vào.
Bạn có thể thấy các hằng và biến bắt buộc trong đoạn mã bên dưới:
// This is the default bill amount
static const defaultBillAmount = 0.0;
// This is the default tip percentage
static const defaultTipPercentage = 15;
// This is the TextEditingController which is used to keep track of the change in bill amount
final _billAmountController =
TextEditingController(text: defaultBillAmount.toString());
// This is the TextEditingController which is used to keep track of the change in tip percentage
final _tipPercentageController =
TextEditingController(text: defaultTipPercentage.toString());
// This stores the latest value of bill amount calculated
double _billAmount = defaultBillAmount;
// This stores the latest value of tip percentage calculated
int _tipPercentage = defaultTipPercentage;
Trong đoạn mã ở trên, bạn có thể thấy rằng chúng tôi đang sử dụng TextEditingController phương pháp. Phương thức bộ điều khiển này cho phép chúng tôi xử lý các đầu vào văn bản trong TextFormField tiện ích con sau này được khởi tạo thành giá trị mặc định.
Bước 4:Thêm trường biểu mẫu nhập
Bây giờ, chúng ta sẽ thêm hai trường Biểu mẫu đầu vào bằng cách sử dụng TextFormField tiện ích con.
Trong khi sử dụng widget này, chúng ta cần phải gán thuộc tính controller với các biến controller mà chúng ta đã xác định trước đó. Bạn có thể xem việc triển khai mã hóa tổng thể của tiện ích con trong đoạn mã bên dưới:
body: Container(
color: Colors.white70,
padding: const EdgeInsets.all(16.0),
child: Center(
child: Form(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
key: Key("billAmount"),
controller: _billAmountController,
keyboardType: TextInputType.numberWithOptions(decimal: true),
decoration: InputDecoration(
hintText: 'Enter the Bill Amount',
labelText: 'Bill Amount',
labelStyle: TextStyle(
fontSize: 25,
letterSpacing: 1,
fontWeight: FontWeight.bold
),
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(20.0),
),
),
),
SizedBox(height: 25,),
TextFormField(
key: Key("tipPercentage"),
controller: _tipPercentageController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Enter the Tip Percentage',
labelText: 'Tip Percentage',
labelStyle: TextStyle(
fontSize: 25,
letterSpacing: 1,
fontWeight: FontWeight.bold
),
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(20.0),
),
),
),
],
),
),
),
),
Ở đây, chúng tôi đã gán keyboardType thuộc tính cho phép chúng tôi hiển thị loại bàn phím được yêu cầu khi người dùng chạm vào trường nhập liệu.
Chúng tôi cũng có các thuộc tính trang trí mà chúng tôi có thể tạo kiểu cho các trường đầu vào của mình bằng cách sử dụng InputDecoration tiện ích con.
Trong InputDecoration tiện ích con, chúng tôi có một số thuộc tính giúp chúng tôi hiển thị văn bản chỗ dành sẵn cũng như nhãn phía trên đầu vào. Chúng tôi cũng đã áp dụng border thuộc tính để hiển thị đường viền đường viền cong.
Xây dựng và chạy nó, và bạn sẽ nhận được kết quả sau trong màn hình trình giả lập của mình:
Bước 5:Thêm chức năng và trình xử lý sự kiện
Vì chúng tôi sẽ tính toán số tiền boa ngay khi người dùng nhập số tiền hoặc tỷ lệ phần trăm hóa đơn, chúng tôi cần lắng nghe những thay đổi trong các trường nhập văn bản.
Để làm được điều đó, chúng ta cần thêm trình xử lý sự kiện vào bộ điều khiển bằng cách sử dụng addListener phương pháp.
Bây giờ, ngay khi có bất kỳ thay đổi nào trong trường nhập, chúng tôi cũng muốn kích hoạt một chức năng nhất định để cập nhật số tiền hóa đơn và tỷ lệ tiền boa.
Vì vậy, chúng tôi sẽ sử dụng các chức năng cần thiết với setState phương pháp giúp chúng tôi hiển thị toàn bộ giao diện người dùng ngay khi một số thay đổi xảy ra.
Lưu ý rằngsetStatephương thức kích hoạt chạy lạibuildphương pháp.
Bạn có thể thấy việc triển khai mã hóa tổng thể trong đoạn mã bên dưới:
@override
void initState() {
super.initState();
_billAmountController.addListener(_onBillAmountChanged);
_tipPercentageController.addListener(_onTipAmountChanged);
}
_onBillAmountChanged() {
setState(() {
_billAmount = double.tryParse(_billAmountController.text) ?? 0.0;
});
}
_onTipAmountChanged() {
setState(() {
_tipPercentage = int.tryParse(_tipPercentageController.text) ?? 0;
});
}
Ở đây, chúng ta có initState cả phương pháp nữa. Phương thức này chạy ngay khi chúng ta vào màn hình này của ứng dụng. Vì vậy, chúng tôi thêm trình nghe sự kiện ngay khi chúng tôi vào màn hình.
Bước 6:Thêm Phần Số tiền
Bây giờ trở lại các tiện ích giao diện người dùng của chúng tôi. Chúng tôi sẽ thêm phần Số tiền ngay bên dưới các trường nhập bên trong tiện ích con Cột.
Ở đây, chúng tôi cũng sẽ sử dụng SizedBox widget cho phép chúng tôi cung cấp một số khoảng cách cần thiết giữa các widget. Bạn có thể thấy việc triển khai mã hóa của phần Số tiền trong đoạn mã bên dưới:
),
SizedBox(height: 20,),
Container(
margin: EdgeInsets.all(15),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
border: Border.all(color: Colors.white),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(2, 2),
spreadRadius: 2,
blurRadius: 1,
),
],
),
child: Column(
children: [
Text("Tip Amount"),
Text("Total Amount")
],
),
),
Ở đây, chúng ta có Container với một số trang trí theo phong cách yêu cầu. child tài sản chứa Column khác tiện ích con có hai Text tiện ích con được sắp xếp theo chiều dọc.
Xây dựng và chạy nó, và bạn sẽ nhận được kết quả sau trong màn hình trình giả lập của mình:
Bước 7:Tạo một tiện ích con không trạng thái riêng biệt để hiển thị số tiền
Vì chúng tôi muốn hiển thị Số tiền Mẹo và Tổng số tiền với một chút kiểu dáng. Nó sẽ không chứa bất kỳ trạng thái nào nhưng sẽ phụ thuộc vào giá trị được truyền từ tiện ích Stateful.
Bạn có thể thấy việc triển khai mã hóa tổng thể của AmountText lớp tiện ích con không trạng thái trong đoạn mã bên dưới:
class AmountText extends StatelessWidget {
final String text;
const AmountText(
this.text, {
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8),
child: Text(text.toUpperCase(),
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blueAccent, fontSize: 20)),
);
}
}
Ở đây, chúng ta đã sử dụng lớp phương thức khởi tạo để lấy giá trị của văn bản thực tế sẽ được hiển thị. Phương thức xây dựng của lớp này trả về Container tiện ích con với padding đơn giản và Text widget như một widget con.
Kể từ AmountText của chúng tôi widget đã sẵn sàng, bây giờ chúng ta có thể gọi widget trong widget Stateful.
Chúng tôi sẽ thêm tiện ích con vào bên trong Column tiện ích con mà chúng tôi đã xác định trước đó với Text đơn giản vật dụng. Chúng tôi chỉ cần thay thế tiện ích Văn bản bằng AmountText tiện ích con và chuyển các giá trị văn bản bắt buộc.
Bạn có thể thấy việc triển khai mã hóa trong đoạn mã bên dưới:
Container(
margin: EdgeInsets.all(15),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
border: Border.all(color: Colors.white),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(2, 2),
spreadRadius: 2,
blurRadius: 1,
),
],
),
child: Column(
children: [
AmountText(
'Tip Amount: ${_getTipAmount()}',
key: Key('tipAmount'),
),
AmountText(
'Total Amount: ${_getTotalAmount()}',
key: Key('totalAmount'),
),
],
),
),
Ở đây, chúng ta đã chuyển hàm vào bên trong AmountText tiện ích con. Hàm trả về giá trị Số tiền Mẹo và Tổng số tiền tương ứng, như bạn có thể thấy trong đoạn mã bên dưới:
_getTipAmount() => _billAmount * _tipPercentage / 100;
_getTotalAmount() => _billAmount + _getTipAmount();
Cuối cùng, chúng ta cần phải kết thúc các bộ điều khiển khi thoát khỏi chế độ xem. Để làm được điều đó, chúng tôi cần sử dụng dispose tích hợp sẵn hàm số. Chức năng này chạy trong khi chúng ta đang thoát khỏi màn hình hiện tại.
Bên trong phương thức này, chúng ta cần gọi các bộ điều khiển với dispose để kết thúc bộ điều khiển văn bản đầu vào. Điều này sẽ khiến bộ điều khiển ngừng lắng nghe những thay đổi trong các trường đầu vào.
Bạn có thể thấy chức năng xử lý trong đoạn mã bên dưới:
@override
void dispose() {
// To make sure we are not leaking anything, dispose any used TextEditingController
// when this widget is cleared from memory.
_billAmountController.dispose();
_tipPercentageController.dispose();
super.dispose();
}
Xây dựng và chạy nó để nhận được kết quả cuối cùng của việc triển khai Máy tính Mẹo của chúng tôi, bạn có thể xem trong bản trình diễn bên dưới:
Bạn sẽ nhận thấy rằng giá trị của cả hai số tiền đều thay đổi khi chúng tôi thay đổi đầu vào trong các trường đầu vào.
Bây giờ chúng ta đã đến phần cuối của hướng dẫn này. Bạn đã triển khai thành công một máy tính Mẹo đơn giản bằng cách sử dụng khung Flutter và Dart.
Đi đâu từ đây?
Mục đích chính của hướng dẫn này là dạy bạn các mẫu lập trình cơ bản trong khung phát triển ứng dụng Flutter bằng cách xây dựng một Máy tính Mẹo đơn giản.
Có rất nhiều tiện ích và bổ sung thú vị khác mà bạn có thể khám phá. Bạn có thể thay đổi giao diện người dùng của ứng dụng trong khi vẫn giữ nguyên các thành phần chức năng.
Nhìn chung, Flutter làm cho thiết kế giao diện người dùng phức tạp trở nên đơn giản hơn với mẫu widget. Bạn có thể đơn giản tạo một giao diện người dùng tuyệt vời chỉ bằng cách xếp chồng các Widget lại với nhau bằng cách sử dụng các thuộc tính con của chúng.
Bước tiếp theo có thể là sử dụng cơ chế điều hướng của Flutter để điều hướng đến các màn hình khác nhau. Flutter cũng đơn giản hóa việc bổ sung các menu ngăn kéo tùy chỉnh và các tab dưới cùng.
Đây chỉ là điểm khởi đầu của quá trình phát triển Flutter. Có nhiều thứ hơn là nhìn thấy nó. Chúng ta chỉ cần tiếp tục khám phá và viết mã.
Bản demo của toàn bộ dự án có sẵn trong Codepen.
Bạn có thể lấy cảm hứng cho ứng dụng Flutter của mình từ những người khác đã có sẵn trên đó.
Happy Coding!