, December 04, 2022

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

Flutter Tutorial 2022: Giới thiệu Flutter Travel App

Trong series này, chúng ta sẽ cùng nhau thực hiện ứng dụng Travel App với một bản UI Design vô cùng đẹp mắt, thu hút có sẵn....

Flutter Tutorial 2022: Giới thiệu Flutter Travel App
So sánh StatelessWidget và StatefulWidget

Trong bài viết này, các bạn sẽ có cái nhìn tổng quát về hai loại widget lớn nhất là StatelessWidget và StatefulWidget....

So sánh StatelessWidget và StatefulWidget
Tổng hợp các Shortcuts, Extensions & Settings trong VSCode khi lập trình Flutter

Trong bài viết này, mình sẽ liệt kê cho bạn các shortcuts, extensions, setting mà bạn nên sử dụng để lập trình Flutter hàng ngày....

Tổng hợp các Shortcuts, Extensions & Settings trong VSCode khi lập trình Flutter
[Phần 1] Những extension cần thiết khi làm việc với Flutter trên VS Code

VS Code là 1 text editor tuyệt vời được phát triển bởi Mircosoft. Đây là một trong các công cụ được developer trên toàn thế giới yêu thích vì sự tiện lợi, dễ dùng và nó chứa hàng ngàn, thậm chí trăm ngàn các extension phục vụ cho bạn trong quá trình bạn phát triển phần mềm....

[Phần 1] Những extension cần thiết khi làm việc với Flutter trên VS Code
Fix lỗi Flutter 3 không thể build app trên iOS

Cách fix lỗi Flutter 3 không thể build và run được app trên iOS với video hướng dẫn chia tiết...

Fix lỗi Flutter 3 không thể build app trên iOS
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.