, October 26, 2021

0 kết quả được tìm thấy

Các thư viện Flutter sẽ giúp bạn làm việc dễ dàng hơn 2021

  • Đăng bởi  Chau Le
  •  Jul 02, 2021

  •   6 min reads
Các thư viện Flutter sẽ giúp bạn làm việc dễ dàng hơn 2021

Trong máy tính, thư viện là một tập hợp các tài nguyên ít thay đổi hoặc các chương trình con được sử dụng trong các chương trình máy tính.

Chúng có thể bao gồm thiết lập dữ liệu, tài liệu, các hỗ trợ, codes viết sẵn và chương trình con, classes, giá trị hoặc các định nghĩa kiểu dữ liệu (Wikipedia).

Dưới đây là danh sách một số thư viện Flutter mà mọi developer nên biết. Hãy cùng nhau tìm hiểu nhé.

mvc_pattern

Viết Flutter code rõ ràng (clean) và có thể bảo trì (maintain) là rất quan trọng cho các dự án của bạn. Thư viện này cung cấp mô hình MVC theo cách kết hợp phần lớn framework của 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;
}

Để xem tài liệu, hãy bấm vào đây.

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 dependency bắt 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');

Để xem tài liệu, hãy bấm vào đây.

url_launcher

Đây là một Flutter plugin để khởi chạy một URL trên mobile app. Hỗ trợ iOS, Android, web, Windows, macOS và Linux.

Ví dụ

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';
  }
}

Để xem tài liệu, hãy bấm vào đây.

flushbar

Cá nhân tôi thích sử dụng package này để hiển thị thông báo thành công hoặc lỗi cho người dùng trong ứng dụng của tôi. Các package này đã hoạt động tốt bằng cách cung cấp một giao diện có thể tùy chỉnh để thông báo cho người dùng.

thư viện Flutter: flushbar

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);
              },
            ),
          ),
        ),
      ),
    );
  }
}

Để xem tài liệu, hãy bấm vào đây.

dio

Dio là một ứng dụng HTTP client mạnh mẽ cho Dart, hỗ trợ Interceptors, Global configuration, FormData, Request Cancel, File download, Timeout, v.v.

import 'package:dio/dio.dart';
void getHttp() async {
  try {
    Response response = await Dio().get("http://www.google.com");
    print(response);
  } catch (e) {
    print(e);
  }
}

Để xem tài liệu, hãy nhấn vào đây.

Onesignal_flutter

onesignal flutter

OneSignal là một dịch vụ push notification 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 iOS và / hoặc Android của mình với OneSignal.

Thư viện này là flutter package để tích hợp OneSignal vào ứng dụng của bạn. Để tích hợp OneSignal vào ứng dụng của bạn, hãy xem Setup Guide để cài đặt vào app của bạn.

Để xem tài liệu, hãy bấm vào đây.

pull_to_refresh

Đây là một package được cung cấp cho thành phần Flutter nâng cao để drop-down refresh và pull up load. Packgage hỗ trợ cho cả Android và iOS.

Tính năng của package này bao gồm

  • Refresh pull up load và pull down
  • Nó gần như phù hợp với tất cả các tiện ích Scroll, như GridView, ListView…
  • Cung cấp cài đặt global và thuộc tính mặc định
  • Cung cấp một số chỉ số phổ biến nhất
  • Hỗ trợ ScrollPhysics mặc định của Android và iOS, khoảng cách overScroll có thể được kiểm soát, hoạt ảnh lò xo tùy chỉnh, giảm xóc, tốc độ.
  • Refresh 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, và nhiều style khác
  • Hỗ trợ refresh two-level, triển khai giống như TaoBao two-level, Wechat two-level
  • Liên kết đặt ở nơi khác, giống như hiệu ứng làm mới Wechat FriendCircle

Để xem tài liệu, hãy bấm vào đây.

path_provider

Đây là một Flutter plugin để tìm các vị trí thường được sử dụng trên hệ thống tập tin hệ thống (filesystem). Hỗ trợ iOS, Android, Linux và MacOS. 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

Để xem tài liệu, hãy bấm vào đây.

cache_network_image

Đây là một thư viện Flutter để hiển thị hình ảnh từ internet và giữ chúng 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),
),

Để xem tài liệu, hãy bấm vào đây.

font_awesome_flutter

Đây là một flutter package được xây dựng dựa trên Font Awesome Icon pack có sẵn.

Dựa trên Font Awesome 5.15.1. Bao gồm tất cả các icon miễn phí:

  • Regular
  • Solid
  • Brands
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"); }
     );
  }
}

Để xem tài liệu, hãy bấm vào đây.

submit_button

Đây là một nút có animation Flutter hoàn toàn có thể tùy chỉnh cho các biểu mẫu và trang đăng nhập/đăng ký. Được viết bằng Dart.

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")
                  ),
               ),
               ],
           )),
           );
       }
   }

Để xem tài liệu, hãy nhấn vào đây.

flutter_screenutil

Đây là một Flutter plugin để điều chỉnh kích thước màn hình và phông chữ. Để giao diện người dùng của bạn hiển thị bố cục hợp lý trên các kích thước màn hình khác nhau.

Container(
   width: ScreenUtil().setWidth(50),
   height:ScreenUtil().setHeight(200),
)

Để xem tài liệu, hãy nhấn vào đây.

Bài viết được dịch từ bài viết gốc:

Some Flutter Libraries that will make your life easier in 2021
In computing, a library is a collection of non-volatile resources or subprograms used in computer programs.

Bài viết liên quan

[FREE EBOOK] TIPS & TRICKS GIÚP X3 TỐC ĐỘ CODE FLUTTER CỦA BẠN

Cuốn ebook "TIPS & TRICKS GIÚP X3 TỐC ĐỘ CODE FLUTTER CỦA BẠN" chỉ ra 32 trường hợp giúp bạn code nhanh hơn so với việc code thông thường...

[FREE EBOOK] TIPS & TRICKS GIÚP X3 TỐC ĐỘ CODE FLUTTER CỦA BẠN
Flutter 2.5 có gì mới?

Bản phát hành Flutter 2.5 lần này có rất nhiều bản cập nhật mới thú vị. Cùng bắt đầu tìm hiểu trong bài viết này nhé!...

Flutter 2.5 có gì mới?
Tìm hiểu Flutter Opacity Widget qua ví dụ cơ bản

Bài viết sau sẽ giới thiệu một cách tổng quan về Opacity widget và cung cấp đoạn code để bạn có thể tự thực hành thông qua những ví dụ cơ bản....

Tìm hiểu Flutter Opacity Widget qua ví dụ cơ bản
Flutter Tutorial 2021 #34 - Hướng dẫn tạo hiệu ứng "fancy" khi chuyển màn hình

Thêm một hiệu ứng mới nữa mà các bạn sẽ được giới thiệu tới! Đó chính là hiệu ứng "fancy" khi chuyển màn hình. Hiệu ứng này sẽ giúp tăng trải nghiệm và gây ấn tượng cực mạnh với người dùng....

Flutter Tutorial 2021 #34 - Hướng dẫn tạo hiệu ứng "fancy" khi chuyển màn hình
Flutter Tutorial 2021 #33 - "Giao tiếp" giữa 2 màn hình bất kỳ trong Flutter

Làm sao để giao tiếp 2 hoặc 3, 4 màn hình trong app với nhau? Chúng ta cùng xem video bên dưới để hiểu được cách truyền dữ liệu từ màn hình A sang màn hình B và ngược lại nhé!...

Flutter Tutorial 2021 #33 - "Giao tiếp" giữa 2 màn hình bất kỳ trong Flutter
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.