Flutter sẽ dễ dàng hơn nếu bạn biết các thư viện này
Thư viện trong tin học là một tập hợp các tài nguyên hoặc các chương trình con được xây dựng sẵn với mục đích hỗ trợ cho các chương trình máy tính khác.
Theo Wikipedia, thư viện có thể bao gồm dữ liệu cấu hình, tài liệu, dữ liệu trợ giúp, code được viết trước và chương trình con, class, giá trị hoặc các kiểu dữu liệu đã được định nghĩa.
Dưới đây là một vài thư viện Flutter cực kỳ hữu dụng và có hướng dẫn hỗ trợ cho quá trình development trên Pub.dev mà các bạn nên biết. Các thư viện này sẽ giúp bạn cảm thấy sử dụng Flutter là dễ dàng hơn bao giờ hết.
mvc_pattern
Viết code clean và dễ dàng bảo trì là một trong những điều quan trọng trong các dự án dù sử dụng bất kỳ ngôn ngữ nào. Thư viện này cung cấp MVC theo kiểu kết hợp với các framework Flutter.
View:
class _MyHomePageState extends State<MyHomePage> {
final Controller _con = Controller.con;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
widget.title,
),
Text(
'${_con.counter}',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(
_con.incrementCounter
);
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Controller:
class Controller extends ControllerMVC {/// Singleton Factory
factory Controller() {
if (_this == null) _this = Controller._();
return _this;
}
static Controller _this;
Controller._();
static Controller get con => _this;
int get counter => _counter;
int _counter = 0;
void incrementCounter() => _counter++;
}Model:
class Model {static int get counter => _counter;static int _counter = 0;
static int _incrementCounter() => ++_counter;
}
Chi tiết về document
hive
Hive là một cơ sở dữ liệu key-value nhẹ và nhanh chóng được viết bằng Dart thuần túy. Nó hoàn toàn phù hợp nếu bạn cần một kho dữ liệu nhẹ cho ứng dụng của mình. Sau khi thêm các ràng buộc và khởi tạo Hive, bạn có thể sử dụng Hive trong dự án của mình.
var box = Hive.box('myBox');
box.put('name', 'David');
var name = box.get('name');
print('Name: $name');
Chi tiết về document
url_laucher
Là một plugin của Flutter dùng để chạy URL trên nền tảng mobile. Hỗ trợ iOS, Android, web, Window, MacOS và cả Linux.
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(Scaffold(
body: Center(
child: RaisedButton(
onPressed: _launchURL,
child: Text('Show Flutter homepage'),
),
),
));
}
_launchURL() async {
const url = 'https://flutter.dev';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
Chi tiết về document
flushbar
Package này cung cấp một giao diện tùy chỉnh với mục đích thông báo cho người dùng về ứng dụng có thẻ là báo thực hiện thành công một hành động hoặc báo lỗi.
class YourAwesomeApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'YourAwesomeApp',
home: Scaffold(
Container(
child: Center(
child: MaterialButton(
onPressed: (){
Flushbar(
title: "Hey Ninja",
message: "Lorem Ipsum is simply dummy text of the
printing and typesetting industry",
duration: Duration(seconds: 3),
)..show(context);
},
),
),
),
),
);
}
}
Chi tiết về document
dio
Dio là một Http Client mạnh mẽ cho ngôn ngữ Dart có hỗ trợ which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout,...
import 'package:dio/dio.dart';
void getHttp() async {
try {
Response response = await Dio().get("http://www.google.com");
print(response);
} catch (e) {
print(e);
}
}
Chi tiết về document
onesignal_flutter
OneSignal là một dịch vụ push-notification (thông báo đẩy) miễn phí cho các ứng dụng di động. SDK này giúp bạn dễ dàng tích hợp các ứng dụng Flutter của mình với OneSignal.
Thư viện onesignal_flutter là một package dùng để tích hợp OneSignal vào ứng dụng, trước khi dử dụng bạn nên xem hướng dẫn thiết lập.
Chi tiết về document
pull_to_refresh
Đây là package cung cấp cho các thành phần cuộn nâng cao dành cho Android và iOS. Các tính năng nổi bật của Package này bao gồm:
Load nội dung khi kéo lên và refresh nội dung khi kéo xuống
Tương thích với gần như toàn bộ các Widget cuộn của Flutter gồm cả GridView và ListView
Cung cấp cài đặt toàn cục của các chỉ số và thuộc tính mặc định
Cung cấp các chỉ số phổ biến
Hỗ trợ ScrollPhysics mặc định của Android và iOS, kiểm soát khoảng cách overScroll, tùy chỉnh các animation.
Làm mới theo chiều ngang và dọc, cũng hỗ trợ ScrollView đảo ngược (bốn hướng)
Cung cấp nhiều refreshStyle: Behind, Follow, Unfollow, Front, ...
Hỗ trợ twoLevel refresh, triển khai giống TaoBao twoLevel, Wechat twoLevel
Refresh các liên kết khác, giống như hiệu ứng làm mới Wechat FriendCircle
Chi tiết về document
path_provider
Đây là một plugin của Flutter dùng để tìm các vị trí thường được sử dụng trên hệ thống tệp, hỗ trợ trên cả iOS, Android, Linux và MacOS. Thế nhưng, không phải tất cả các method đều được hỗ trợ trên tất cả các nền tảng
Directory tempDir = await getTemporaryDirectory();
String tempPath = tempDir.path;
Directory appDocDir = await getApplicationDocumentsDirectory();
String appDocPath = appDocDir.path;google_fonts
Chi tiết về document
cached_network_image
Thư viện này giúp bạn hiển thị các hình ảnh được lấy từ Internet và giữ nó trong thư mục bộ nhớ cache.
CachedNetworkImage(imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
Chi tiết về document
font_awesome_flutter
Đây là một package được xây dựng dựa trên một bộ icon pack sẵn có - Font Awesome 5.15.1, bao gồm các bộ icon miễn phí:
Regular
Solid
Brand
import 'package:font_awesome_flutter/font_awesome_flutter.dart';}
class MyWidget extends StatelessWidget {
Widget build(BuildContext context) {
return IconButton(
icon: FaIcon(FontAwesomeIcons.gamepad),
onPressed: () { print("Pressed"); }
);
}
Chi tiết về document
submit_button
Đây là một nút có chứa animation, được viết bằng Dart mà bạn hoàn toàn có thể tùy chỉnh cho trang Đăng nhập/ Đăng ký của Ứng dụng.
class _MyHomePageState extends State<MyHomePage> {bool _loading = false;void _submit() {
setState(() {
_loading = true;
});
Future.delayed(Duration(milliseconds: 5000), () {
setState(() {
_loading = false;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
children: [
SubmitButton(
isLoading: _loading,
spinnerColor: Colors.green,
backgroundColor: Colors.red,
button: FlatButton(onPressed: _submit,
child: Text("Submit")
),
),
],
)),
);
}
}
Chi tiết về document
flutter_screenutil
Đây là một plugin của Flutter dùng để điều chỉnh kích thước màn hình và phông chữ để bố cục màn hình của bạn có thể hiện thị hợp lý trên nhiều kích thước màn hình khác nhau
Container(width: ScreenUtil().setWidth(50),
height:ScreenUtil().setHeight(200),
)
Tác giả Efikas
Dịch bởi Devera Academy