Trong Flutter, có một số sự kiện trong vòng đời mà bạn có thể nghe để xử lý các trạng thái khác nhau của ứng dụng, nhưng hôm nay, chúng ta sẽ thảo luận về các sự kiện didChangeAppLifecycleState trước và sau phiên bản Flutter 3.13.

Trạng thái vòng đời trong ứng dụng Flutter là gì?

Sự kiện này được kích hoạt bất cứ khi nào trạng thái vòng đời của ứng dụng thay đổi. Các trạng thái có thể được tiếp tục, không hoạt động, tạm dừng, tách rời và ẩn. Bạn có thể nghe sự kiện này bằng cách sử dụng mixin WidgetsBindingObserver.

• resumed: Trên tất cả các nền tảng, trạng thái này cho biết ứng dụng đang ở trạng thái chế độ chạy mặc định cho một ứng dụng đang chạy có tiêu điểm đầu vào và dễ thấy.
• detached: Ứng dụng này vẫn được lưu trữ bởi công cụ Flutter nhưng được tách ra khỏi bất kỳ lượt xem máy chủ nào.
• inactive: Ít nhất một chế độ xem của ứng dụng được hiển thị nhưng không có chế độ xem nào có đầu vào tập trung. Ứng dụng vẫn chạy bình thường.
• hidden: Tất cả các chế độ xem của một ứng dụng đều bị ẩn vì ứng dụng đó sắp bị tạm dừng (trên iOS và Android) hoặc vì nó đã bị thu nhỏ hoặc được đặt trên một màn hình không còn hiển thị (trên màn hình không có web) hoặc đang chạy trong một cửa sổ hoặc tab không còn hiển thị (trên web).
• paused: Ứng dụng hiện không hiển thị với người dùng và không phản hồi tới đầu vào của người dùng.

Lắng nghe sự kiện vòng đời trước phiên bản 3.13

Trong các phiên bản Flutter trước 3.13, bạn có thể xử lý các sự kiện trong vòng đời ứng dụng bằng cách sử dụng mixin WidgetsBindingObserver. Để thực hiện việc này, bạn sẽ bao gồm mixin WidgetsBindingObserver trong lớp State của mình và ghi đè phương thức didChangeAppLifecycleState. Trong phương pháp này, bạn có thể truy cập trạng thái hiện tại của ứng dụng (AppLifecycleState) và phản hồi tương ứng với các sự kiện khác nhau trong vòng đời ứng dụng.

class AppLifeCycleExample extends StatefulWidget {
  const AppLifeCycleExample({super.key});

  @override
  State<AppLifeCycleExample> createState() => _AppLifeCycleExampleState();
}

class _AppLifeCycleExampleState extends State<AppLifeCycleExample>
    with WidgetsBindingObserver {
  late final AppLifecycleListener listener;

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.detached:
        _onDetached();
      case AppLifecycleState.resumed:
        _onResumed();
      case AppLifecycleState.inactive:
        _onInactive();
      case AppLifecycleState.hidden:
        _onHidden();
      case AppLifecycleState.paused:
        _onPaused();
    }

    super.didChangeDependencies();
  }

  void _onDetached() => print('detached');
  void _onResumed() => print('resumed');
  void _onInactive() => print('inactive');
  void _onHidden() => print('hidden');
  void _onPaused() => print('paused');

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Lắng nghe sự kiện vòng đời sau phiên bản Flutter 3.13

Sau Flutter 3.13, chúng ta có thể nghe các sự kiện trong vòng đời ứng dụng bằng cách sử dụng lớp AppLifecycleListener mới.

Lớp AppLifecycleListener cung cấp một cách tiếp cận thuận tiện và thay thế để nghe các sự kiện trong vòng đời ứng dụng trong Flutter. Thay vì trực tiếp sử dụng mixin WidgetsBindingObserver, bạn có thể sử dụng lớp AppLifecycleListener để đơn giản hóa quy trình.

Để sử dụng AppLifecycleListener, hãy tạo một phiên bản của lớp và chuyển các lệnh gọi lại sự kiện mong muốn mà bạn muốn nghe. Điều này cho phép bạn dễ dàng xử lý các sự kiện trong vòng đời ứng dụng cụ thể mà không cần triển khai toàn bộ mixin WidgetsBindingObserver.

Bằng cách sử dụng AppLifecycleListener, bạn có thể hợp lý hóa mã của mình và làm cho mã dễ đọc và dễ bảo trì hơn vì bạn chỉ cần tập trung vào các sự kiện cụ thể mà bạn quan tâm.

class AppLifeCycleExample extends StatefulWidget {
  const AppLifeCycleExample({super.key});

  @override
  State<AppLifeCycleExample> createState() => _AppLifeCycleExampleState();
}

class _AppLifeCycleExampleState extends State<AppLifeCycleExample> {
  late final AppLifecycleListener listener;

  @override
  void initState() {
    super.initState();
    listener = AppLifecycleListener(onStateChange: _onStateChanged);
  }

  void _onStateChanged(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.detached:
        _onDetached();
      case AppLifecycleState.resumed:
        _onResumed();
      case AppLifecycleState.inactive:
        _onInactive();
      case AppLifecycleState.hidden:
        _onHidden();
      case AppLifecycleState.paused:
        _onPaused();
    }
  }

  void _onDetached() => print('detached');
  void _onResumed() => print('resumed');
  void _onInactive() => print('inactive');
  void _onHidden() => print('hidden');
  void _onPaused() => print('paused');
  @override
  void dispose() {
    listener.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Điểm khác biệt giữa chúng là gì?

Nhìn qua thì cách cũ và cách mới không có sự khác biệt. Để hiểu rõ hơn về lợi ích của AppLifecycleListener cùng xem sơ đồ vòng đời dưới đây.

Sơ đồ minh họa các trạng thái khác nhau của ứng dụng Flutter và các chuyển đổi có thể có giữa chúng.

Theo cách tiếp cận “cũ”, khi ghi đè phương thức didChangeAppLifecycleState, chúng ta chỉ có thể lắng nghe những thay đổi trạng thái cụ thể, chẳng hạn như khi ứng dụng chuyển sang trạng thái resumed. Tuy nhiên, bạn không thể nắm bắt được thông tin về sự chuyển đổi giữa các trạng thái. Ví dụ: bạn không thể xác định liệu ứng dụng đã chuyển sang trạng thái resumed từ inactive hay detached.

Với lớp AppLifecycleListener, giờ đây chúng ta có thể lắng nghe những chuyển đổi trạng thái này. Điều này có nghĩa là chúng ta có thể theo dõi cũng như phản hồi chuỗi trạng thái mà ứng dụng của bạn trải qua, hiểu biết toàn diện hơn về vòng đời của ứng dụng.

Bằng cách sử dụng lớp AppLifecycleListener, chúng ta có thể nắm bắt, xử lý hiệu quả quá trình chuyển đổi giữa các trạng thái, kiểm soát và tùy chỉnh hành vi ứng dụng một cách chính xác hơn.

Hủy việc thoát Ứng dụng bằng lớp AppLifecycleListener

Trong lớp AppLifecyleListener có một lệnh gọi lại onExitRequested. Lệnh này được sử dụng để hỏi ứng dụng xem liệu nó có cho phép thoát khỏi ứng dụng trong trường hợp lệnh thoát có thể bị hủy hay không.

Ví dụ,chúng ta thể được sử dụng cho các ứng dụng MacOS, khi người dùng cố gắng đóng ứng dụng khi có những thay đổi chưa được lưu.

class AppLifeCycleExample extends StatefulWidget {
  const AppLifeCycleExample({super.key});

  @override
  State<AppLifeCycleExample> createState() => _AppLifeCycleExampleState();
}

class _AppLifeCycleExampleState extends State<AppLifeCycleExample> {
  late final AppLifecycleListener listener;

  @override
  void initState() {
    super.initState();
    listener = AppLifecycleListener(
      onStateChange: _onStateChanged,
      onExitRequested: _onExitRequested,
    );
  }

  void _onStateChanged(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.detached:
        _onDetached();
      case AppLifecycleState.resumed:
        _onResumed();
      case AppLifecycleState.inactive:
        _onInactive();
      case AppLifecycleState.hidden:
        _onHidden();
      case AppLifecycleState.paused:
        _onPaused();
    }
  }

  void _onDetached() => print('detached');
  void _onResumed() => print('resumed');
  void _onInactive() => print('inactive');
  void _onHidden() => print('hidden');
  void _onPaused() => print('paused');
  @override
  void dispose() {
    listener.dispose();
    super.dispose();
  }

  Future<AppExitResponse> _onExitRequested() async {
    final response = await showDialog<AppExitResponse>(
      context: context,
      barrierDismissible: false,
      builder: (context) => AlertDialog.adaptive(
        title: const Text('Bạn có muốn thoát ứng dựng?'),
        content: const Text('Tất cả các tiến trình chưa được lưu sẽ bị mất.'),
        actions: [
          TextButton(
            child: const Text('Huỷ'),
            onPressed: () {
              Navigator.of(context).pop(AppExitResponse.cancel);
            },
          ),
          TextButton(
            child: const Text('Đồng ý'),
            onPressed: () {
              Navigator.of(context).pop(AppExitResponse.exit);
            },
          ),
        ],
      ),
    );

    return response ?? AppExitResponse.exit;
  }

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Cảm ơn mọi người đã đọc hết bài viết này!

The post Cách lắng nghe sự kiện vòng đời trong Flutter từ 3.13 trở đi. appeared first on Tomoshare.

Fastlane là gì? 

Fastlane là một công cụ phân phối ứng dụng (CD) mã nguồn mở giúp tự động hóa việc xây dựng và triển khai ứng dụng Android và iOS lên Firebase,  Play Store hoặc App Store. Bạn có thể tùy chỉnh các lane theo môi trường DEV, STAGING, PROD theo ý muốn và chúng cũng giúp bạn tự động hóa quy trình ký mã cho cả hai nền tảng.

Cấu hình cho fastlane cho flutter thực chất là cấu hình riêng cho 2 môi trường iOS và Android trong project. Cấu hình riêng này hoàn toàn có thể dùng cho môi trường native iOS hoặc Android.

Tôi sẽ chia làm 3 phần
Phần 1: Config fastlane Firebase app distribution cho iOS
Phần 2: Config fastlane Firebase app distribution cho Android
Phần 3: Config fastlane Testflight iOS và Google Playstore Android

Hãy cùng bắt đầu với phần 1: Config fastlane Firebase app distribution cho iOS

Bước 1: Cài đặt fastlane

Bắt đầu cài đặt đơn giản qua Homebrew (macOS). Bạn có thể tham khảo tại tại fastlane doc

brew install fastlane

Bước 2: Khởi tạo fastlane trong project iOS

trỏ tới thư mục iOS trong dự án flutter của bạn thông qua terminal

cd ios

khởi tạo fastlane

fastlane init

Lúc này sẽ có 4 lựa chọn để fastlane tạo sẵn cho bạn config mặc định. Để đơn giản hay bắt đầu với lựa chọn 4: Manual setup

Tiếp tục và Enter cho đến khi hoàn thành

Lúc này kiểm tra trong thư mục ios sẽ sinh ra thu mục fastlane và các file config sẵn, chúng ta sẽ chú ý tới Fastfile, nơi config các lệnh tự động.

Mở file Fastfile bạn sẽ thấy config mặc định lane: custom_lane
chúng ta sẽ thêm 1 dòng printf(“Hello fastlane”) để test

Giờ hãy cùng test qua terminal để xem fastlane nó chạy như nào:
chú ý vẫn tại thư mục ios trong project

fastlane custom_lane

Hello fastlane đã được in ra 🎉

• Fastfile được viết bằng Ruby

• lane: custom_lane nơi bạn gom chạy các task vụ chung lại với nhau. Bạn có thể tìm hiểu thêm tại doc
  
  Giờ chúng ta cùng nhau config chi tiết lane: DEV mục tiêu là đẩy bản build môi trường DEV lên firebase app distribution.

Bước 3: Import certificate và provisioning profile

• Để build được file ipa và đẩy lên firebase distribution cần certificate và provisioning được setup và cấu hình qua tài khoản apple developer. Trong bài viết tôi không đi sâu vào vấn đề tạo certificate cũng như provisioning tuy nhiên bạn có thể tìm hiểu thêm tại đây
• Tới bước này mặc định bạn đã có certificate dạng dev_ios_distribution.p12 (với password) và provisioning dạng ios_app_name_dev_adhoc.mobileprovision cho môi trường DEV
  
  Chúng ta có 2 cách
  – Cách 1: là đưa lên git private mục đích bảo mật dành cho những thành viên có quyền mới truy cập vào build deploy được. Với cách này chúng ta dùng fastlane action match để get từ github private và import. Chi tiết tại fastlane action match
  – Cách 2: đưa thẳng file certificate và provisioning vào cùng thư mục để dễ dàng truy cập. Tôi sẽ đi sâu vào cách này ví nó đơn giản.
  Tạo 2 thư mục certs và profile để save local cùng project ios

Bắt đầu config lane DEV trong Fastfile

Thực hiện fastlane action import_certificate
–keychain_name : kiểm tra xem certificate của bạn được import trong keychain nào, open Keychain Access trong Macos và tìm. Trong trường hợp của máy tôi, certificate iPhone Distribution xxx COMPANY LIMITTED (yyyyy) có trong keychain login
–certificate_password: password certificate_distribution.p12 của bạn
–keychain_password: password vào keychain của bạn.

Thực hiện tiếp fastlane action install_provisioning_profile
Trong trường hợp chạy máy ảo hoặc bạn muốn tách biệt bạn có thể dùng fastlane action create_keychain để tạo riêng keychain cho bạn.

Tiếp tục với action build_ios_app thực hiện export file ipa. Cần chú ý vài điểm sau
–scheme và configuration: đúng như bạn đã config trong xcode
–output_directory: đường dẫn thư mục chứ file ipa sau khi export thành công
–export_method: ad-hoc
–codesigning_identity: tên chính sác của provisioning profile
–provisionningProfile: chính xác tên bundle và tên file provisioning

Sau khi config xong test thử lệnh

fastlane DEV

Vài lỗi có thể gặp phải:

• import certificate error: kiểm tra lại tên file và đường dẫn. Có thể lấy đường dẫn trực tiếp để test kỹ.
• build_ios_app error: thêm debug: true để check kỹ lỗi gặp phải.

Sau khi build thành công bạn sẽ thấy thư mục build/dev có file APP-DEV.ipa như hình

Ngoài ra còn có file .dSYM.zip .File này mục đích để giải mã lỗi ngược dùng cho firebase crashlytics. Trường hợp bạn export không có file dSYM.zip hãy kiểm tra config trong Debug Information Format chọn DWARK with dSYM File.

4. Cấu hình upload Firebase distribution
Giả định bạn đã setup thành công firebase và kết nối với project flutter. Chi tiết config firebase bạn có thể xem tại đây. Chúng ta sẽ tiếp cụ với:

• Tìm App ID thông qua Firebase Console
• Để phân phối ứng dụng thông qua Fastlane, bạn cần một Firebase CLI token. Chạy lệnh sau trong terminal để đăng nhập và tạo token:

firebase login:ci

Sau khi đăng nhập thành công, bạn sẽ nhận được một token. Hãy lưu trữ token này một cách an toàn.

Tiếp tục mở Fastfile và thêm config fastlane action firebase_app_distriution và upload_symbols_to_crashlytics

–groups: tên group test config trong firebase app distribution
–testers: list email chỉ định tới các tester đã add trong firebase app distribution
–upload_symbols_to_crashlytics: nếu bạn không sử dụng Firebase crashlytics hãy bỏ nó đi.

Các lỗi gặp phải:
-sai đường dẫn hoặc tên file ipa
-hãy đảm bảo bạn đã kích hoạt app distribution của ios trên firebase console
-đảm bảo version name, version code khác nhau mỗi lần upload.

Tới đây bạn đã hoàn thành việc config fastlane build Firebase app distribution cho môi trường iOS.
Hãy cùng đón đợi tiếp phần 2 config cho môi trường Android.

The post Fastlane Flutter App Distribution (part 1: Firebase app distribution iOS) appeared first on Tomoshare.

Với Flutter các animation được tạo bằng thư viện Animation. Chúng ta bắt đầu tìm hiểu thôi nào.

Chúng ta sẽ bắt đầu với 1 animation đơn giản nhất

Rotation animation

Bây giờ ta sẽ tạo 1 file tên là animate_widget.dart với nội dung như sau:

class AnimatedWidget extends StatefulWidget {
  const AnimatedWidget({super.key});

  @override
  State<AnimatedWidget> createState() => _AnimatedWidgetState();
}

class _AnimatedWidgetState extends State<AnimatedWidget>
    with TickerProviderStateMixin {
  late Animation _arrowAnimation;
  late AnimationController _arrowAnimationController;

  @override
  void initState() {
    super.initState();
    _arrowAnimationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    )..repeat();
    _arrowAnimation =
        Tween(begin: 0.0, end: pi).animate(_arrowAnimationController);
  }

  @override
  void dispose() {
    _arrowAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: _arrowAnimationController,
        builder: (context, child) => Transform.rotate(
          angle: _arrowAnimation.value,
          child: Image.asset("assets/image.jpg"),
        ),
      ),
    );
  }
}

Trong phương thức initState(), _arrowAnimationControll được khởi tạo với thời gian xảy ra của animation là 300 mili giây.

_arrowAnimation được khởi tạo với giá trị begin là 0,0 và giá trị end là π do đó, nó sẽ xoay 180 độ. (pi = π = 180°)

Trong đoạn code trên chúng ta tạo 1 image và thêm một animation cho nó. Để image có animation thì cần phải bọc nó trong 1 AnimatedBuilder widget và dùng thuộc tính Transform.rotate để có thể tạo 1 vòng tròn với góc là giá trị của _arrowAnimation.

AnimatedBuilder widget là một widget rất hữu ích khi xây dựng animation. Nó hiệu quả hơn việc gọi setState() mỗi khi có sự thay đổi giá trị của animation.

Ở đây mình có sử dụng hàm repeat() để có thể lặp đi lặp lại việc xoay tròn widget

Và để có thể sử dụng được animation thì bắt buộc phải kế thừa class TickerProviderStateMixin bằng cách thêm thuộc tính with TickerProviderStateMixin

Và cũng đừng quên dùng phương thức _arrowAnimationController.dispose() trong hàm dispose, nếu không thì sẽ bị memory leak đấy.

Scale Up, Down Animation

Chúng ta sửa lại 1 chút ở file animate_widget.dart ở trên

class AnimatedWidget extends StatefulWidget {
  const AnimatedWidget({super.key});

  @override
  State<AnimatedWidget> createState() => _AnimatedWidgetState();
}

class _AnimatedWidgetState extends State<AnimatedWidget>
    with TickerProviderStateMixin {
  late Animation _heartAnimation;
  late AnimationController _heartAnimationController;

  @override
  void initState() {
    super.initState();
      _heartAnimationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
    _heartAnimation = Tween(begin: 160.0, end: 200.0).animate(
      CurvedAnimation(
        curve: Curves.bounceOut,
        parent: _heartAnimationController,
      ),
    );

    _heartAnimationController.addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed) {
        _heartAnimationController.repeat();
      }
    });
  }

  @override
  void dispose() {
    _heartAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        const SizedBox(height: 100),
        Center(
          child: AnimatedBuilder(
            animation: _heartAnimationController,
            builder: (context, child) {
              return Center(
                child: SizedBox(
                  child: Center(
                    child: Icon(
                      Icons.favorite,
                      color: Colors.red,
                      size: _heartAnimation.value,
                    ),
                  ),
                ),
              );
            },
          ),
        ),
        const Spacer(),
        InkWell(
          onTap: () {
            _heartAnimationController.forward();
          },
          child: Container(
            color: Colors.red,
            margin: const EdgeInsets.only(bottom: 30),
            padding: const EdgeInsets.all(20),
            child: const Text("Run Example"),
          ),
        )
      ]),
    );
  }
}

Ta thêm hai biến _heartAnimation và _heartAnimationController tương ứng với Animation và AnimationController .

_heartAnimationController sẽ được khởi tạo với duration là 1200 mili giây.

_heartAnimation với begin là 150 và end là 170. Tương ứng với kích thước bé nhất và lớn nhất của trái tim.

Giờ thì ta cần ghép icon trái tim với animation ở trên.

Và chúng ta có kết quả chạy như ở dưới đây

Qua bài này mình đã giới thiệu các animation đơn giản và được sử dụng nhiều trong Flutter. Cảm ơn các bạn đã theo dõi.

The post Một vài ví dụ về animation trong Flutter appeared first on Tomoshare.

Trước khi vào bài viết thì mình xin giới thiệu 1 chút về Flutter:

Flutter là Mobile UI Framework được Google phát hành vào năm 2017, được sử dụng để phát triền giao diện các ứng dụng di động trên các nền tảng Android/ iOS/ MacOs/……

Bất kỳ ngôn ngữ lập trình nào thì cũng phải tìm cách xử lý khi chạy những task nặng, tốn thời gian…Thì khi đó việc lập trình bất đồng bộ hoặc xử lý chúng trong background được tạo ra, thay vì xử lý trên Main thread thì việc gây giật UI hoặc ứng dụng chạy chậm, gây nóng máy làm khó chịu cho người sử dụng.

Và cũng là một UI Framework, Flutter đã cung cấp Stream và Future để hỗ trợ chúng ta trong việc giải quyết các vấn đề trong lập trình bất đồng bộ

1. Stream: 

1. Thực chất Stream là một luồng data bất đồng bộ, nó giống như 1 cái ống gồm 1 đầu nhận dữ liệu và đầu kia sẽ là dữ liệu khi nó xử lý xong
2. Cấu trúc của 1 Stream: 

• Để handle một Stream thì ta có StreamController.

• Để đẩy dữ liệu vào Stream thì thông qua thuộc tính sink(có thể đẩy bất kỳ dữ liệu nào vào Stream: value, object, collection….)

• Để publish dữ liệu ra ngoài thì chúng ta dùng thuộc tính stream,  và dùng hàm listen để lắng nghe dữ liệu trả về

Như ví dụ dưới đây, chúng ta sẽ tạo 1 danh sách có 10 phần tử, sau mỗi lần chạy thì sẽ add dữ liệu đó vào Stream.

class _StreamWidgetExampleState extends State<StreamWidgetExample> {
 final StreamController _counterController = StreamController<int>();
 Stream get _counterStream => _counterController.stream;
 late StreamSubscription _subscription;

  _increment() {
    List.generate(10, (data) {
      _counterController.sink.add(data);
    });
  }

  @override
  void initState() {
    super.initState();
    _increment();
    _subscription = _counterStream.listen((data) {
      print("Receive data $data");
    });
  }

  @override
  void dispose() {
    _subscription.cancel();
    _counterController.close();
    super.dispose();
  }
}

và đây là kết quả khi chạy function trên

2. Future

• Future là một hàm thực thi cho các hoạt động bất đồng bộ, và có 2 trạng thái đó là Completed và UnCompleted

• Uncompleted: khi bạn gọi một hàm không đồng bộ, nó trả về một uncompleted future. Future này đang chờ cho các hoạt động không đồng bộ của hàm kết thúc hoặc trả về một error.
• Completed: nếu một hành động không đồng bộ thành công, future sẽ hoàn thành với một giá trị. Nếu không nó hoàn thành với một error.
  • Hoàn thành với một giá trị: một future của kiểu Future<T> hoàn thành với một giá trị thuộc kiểu T. Ví dụ, một future với kiểu Future<String> thì nó sẽ trả về một giá trị string. Nếu một future không cung cấp một kiểu giá trị nào thì kiểu của future là Future<void>.
  • Hoàn thành với một error: nếu một hoạt động bất đồng bộ được thực hiện bởi một hàm thất bại vì bất kỳ lý do gì thì future hoàn thành với một error.
• Khi sử dụng hàm Future thì bắt buộc phải có từ khoá async và await:

Khi tạo 1 hàm bất đồng bộ thì ta phải thêm từ khoá async trước thân hàm:

• async: Bạn có thể sử dụng từ khóa async trước thân hàm bất đồng bộ.

• async function: là một function được đánh dấu bởi từ khóa async.

• await: bạn có thể sử dụng từ khóa await để lấy kết quả từ một việc bất đồng bộ. Từ khóa await chỉ được sử dụng với hàm async.

 futureExampleFunc() async {
    //do something
 }

Đây là hàm không có kiểu dữ liệu trả về

  Future<Auth> futureFunc() async {
    //do something
    return Auth();
  }

Còn đây là hàm có kiểu dữ liệu trả về

  initData() async {
    var auth = await futureFunc();
    print(auth);
  }

Bây giờ chỉ cần thêm await khi chờ hàm này thực thi xong thì sẽ gán dữ liệu cho auth

Đây là sơ đồ hoạt động của 1 Async Function

Mặc dù Stream và Future đã hỗ trợ rất tốt trong việc lập trình bất đồng bộ, nhưng việc này vẫn chưa giải quyết được triệt để vấn đề vì chúng đều thực hiện trên luồng chính. Vì vậy Isolate được đưa ra như là một giải pháp cho việc này, bằng việc thực hiện các việc trên dưới background.

3. Isolate

Sơ đồ hoạt động của Isolate

Isolate là một tham chiếu đến một thread, thường khác với main thread hiện tại. Hay có thể nói dễ hiểu hơn thì Isolate là một phiên bản tương ứng của Thread trên ngôn ngữ lập trình Dart. Nó tương tự với Vòng lặp sự kiện (Event Loop) nhưng có một số điểm khác biệt như sau:

• Nó là 1 thread với bộ nhớ riêng, biệt lập.
• Nó không thể chia sẻ trực tiếp dữ liệu với các thread khác.
• Bất kể dữ liệu nào được truyền giữa các thread đều bị trùng lặp.

Mỗi Isolate có một vòng lặp sự kiện (Event Loop) của riêng mình nhờ đó chúng sẽ hoạt động song song và độc lập với nhau.

Hãy xem ví dụ dưới đây để có thể hiểu rõ hơn cách hoạt động của 1 Isolate. Chúng ta tạo ra 1 Isolate để xử lý cho việc chạy 1 vòng lặp từ 1 -> 1000000, sau khi chạy xong vòng lặp sẽ kết thúc và trả dữ liệu về cho hàm gọi nó.

void myIsolate(SendPort sendPort) {
  int data = 0;
  for (int i = 0; i <= 1000000; i++) {
    data += i;
  // sau mỗi vòng lặp thì data sẽ cộng thêm giá trị của biến i
  }
  //sau khi kết thúc vòng lặp sẽ gọi hàm exit để kết thúc isolate này và trả data về
  Isolate.exit(sendPort, data);
}

  void _runMyIsolate() async {
    var receivePort = ReceivePort();
  // đăng ký một isolate thông qua hàm spawn, ở đây ta sẽ truyền hàm xử lý dữ liệu và 1 port
    await Isolate.spawn(myIsolate, receivePort.sendPort);
    print(await receivePort.first);
  }

Chúng ta có thể thấy khi thực hiện việc tạo 1 thread isolate là thông qua method Isolate.spawn thì lúc này ứng dụng sẽ tạo ra 1 thread với tên là myIsolate chạy song song với luồng main, và luồng này sẽ bị đóng lại khi sử dụng method Isolate.exit.

4. Kết luận

Flutter ( Dart ) là Single-Thread , do đó để làm hài lòng người dùng, các nhà phát triển phải đảm bảo rằng ứng dụng sẽ chạy trơn tru nhất có thể. Stream, Futures và Isolates là những công cụ rất mạnh có thể giúp bạn đạt được mục tiêu này.

The post Đa luồng trong Flutter  appeared first on Tomoshare.

Giới thiệu

Vào đầu năm 2019, Flutter phiên bản 1.0 đã được phát hành chính thức. Còn SwiftUI cũng được giới thiệu bởi Apple vào năm 2019, Apple nói rằng SwiftUI là tương lai của việc phát triển ứng dụng trên các nền tảng của Apple (vì nó là đa nền tảng, cho phép bạn phát triển ứng dụng iOS, MacOS, WatchOS và tvOS chỉ bằng một mã nguồn duy nhất).

Thay vì nói lí thuyết, ta sẽ thử viết 1 màn hình để play video. Xuyên suốt quá trình dựng UI, chúng ta sẽ cùng code và phân tích ưu điểm của mỗi framework nhé.

1/ UI tổng quan

Flutter trước nhé.

TopView class sẽ hiển thị tabs, ta sẽ tạo class HomeView. Ở HomeView, ta dùng widget CupertinoPageScaffold. Sẽ có navi, và 1 SingleChildScrollView để đảm bảo tính đầy đủ dữ liệu ở các thiết bị màn hình nhỏ.

TopView và HomeView kế thừa từ StatefulWidget.

Rồi, đến SwiftUI, cũng sẽ hiển thị tabs tương tự

HomeScreen struct sẽ hiển thị video player và danh sách video.

2/ UI về video player

Về phía Flutter, mỗi UI element được đặt trong 1 vị trí thích hợp bằng cách set MainAxisAlignment của Column widget và Row widget. CupertinoSlider widget sẽ đảm nhận việc hiển thị thanh slider. 

Đối với SwiftUI, BigMovieCellOverlay struct sẽ đảm nhận việc hiển thị player thông qua VStack và HStack. Rectangle được bọc trong ZStack sẽ đóng vai trò Slider progress của video. 

3/ UI về List

a/ Scroll ngang

Về phía Flutter, Widget ListView trong Broadcasting được set Axis.horizontal, được xếp chồng bằng cách sử dụng Stack. Mỗi thumbnail được triển khai trong lớp BigPicCell được mô tả bên dưới.

Về phía SwiftUI, mỗi thumbnail được triển khai ở BigPicCell struct.

b/ Decoration

Flutter, League class gần giống với Broadcasting class. Mỗi thumbnail được triển khai ở class bên dưới.

BigPicCell class sẽ đảm nhận việc hiển thị thumbnails và thông tin, được bọc bởi 1 Column widget

Thumbnail dùng BoxDecoration widget tạo cái viền vàng xung quanh.

Tương tự thì SwiftUI cũng có League và BigPicCell struct sẽ đảm nhận việc hiển thị thumbnails và thông tin.

ZStack set border(Color.yellow, width: isWatchingId == id ? 2 : 0) để hiển thị viền vàng xung quanh. Khi tap vào, video sẽ được play và Text(“ Live”) sẽ được hiển thị ở thumbnail.

Group {isRecord ? nil : LiveLabel()}
.padding(EdgeInsets.init(top: 15.0, leading: 15.0, bottom: 0.0, trailing: 0.0)).

4/Summary:

Đã trải qua quãng thời gian làm việc khá lâu với SwiftUI, trước đó là UIKit và Interfacebuilder của iOS. Bằng so sánh chủ quan của mình, tôi đánh giá cao về sự hiện đại trong cách Flutter framework hỗ trợ chúng ta dựng UI.

Còn về phía bạn, hãy chia sẽ cảm nghĩ của mình ở phần bình luận nhé.

The post SwiftUI vs Flutter : Cách xây dựng UI appeared first on Tomoshare.