Những ngày đầu tiếp cận Flutter 2.0, có gì khác với React Native

kienphan -

Bối cảnh

Sau 1 quãng thời gian 2 năm với React Native, cũng có làm được 1 số ứng dụng lên appstore. Nhưng có 1 số lý do việc sử dụng React Native vẫn không được thoải mái cho lắm

  • Vẫn là bản beta. Có những thư viện ngày xưa là core thì bây giờ chuyển sang react native community maintain (VD như AsyncStorage, Webview,...), dẫn đến nhiều dự án cũ upgrade khá là phiền phức.
  • Cảm giác (chủ quan) dùng live reload vẫn khá là chậm
  • Có thư viện hiện chỉ chạy tốt trên 1 nền tảng
  • Animation trên react native phải nói là khá tù, splash screen thời điểm mình làm thì không support animation
  • ...

Quan trọng là: Đã chán, muốn tìm hiểu 1 cái gì đó mới :D

Flutter 2.0

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
  • Release: Đã biết đến flutter từ thời 1.0, nhưng thôi lên 2.0 tìm hiểu luôn 1 thể, có vẻ được phát triển release stable, quan trọng hơn là cả flutter và ngôn ngữ Dart đều được support bởi Google
  • IDE/Editor: Android Studio IDE support flutter luôn, do đó chỉ cần cài flutter SDK nữa là được, ai thích editor có thể dùng vscode với plugin
  • Tốc độ live reload khi build layout UI khá ấn tượng

Quan trọng: Học cái mới cho nó vui chứ lý do cũng chỉ là lý do thôi :D

Ngôn ngữ lập trình

Dart, cú pháp trông cũng không có gì khó cả, trông cũng không khác Swift/Typescript/Java lắm, nên nếu có kiến thức ngôn ngữ lập trình sẵn rồi thì việc tiếp cận không phải là vấn đề

import 'package:flutter/material.dart';

void main() async {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyApp(),
      ),
    ),
  );
}

Tất cả đều là Widget

  • Với react native, ta component hóa UI ra từng phần thì ở đây có khái niệm tương tự như thế, để dễ tưởng tượng.
  • Widget từ những thứ thấy được (Icon, Image, Text,...), cho đến những thứ không thấy được (Grid, Row, Column,...)
  • Việc code layout gồm những Widget lồng nhau, đối với những web developer ban đầu có vẻ khá khó chịu, trông code có vẻ khá dài từ trên xuống
import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}
  • Khi có 1 design layout, việc nghĩ thiết kế Widget tương ứng có thể quan trọng để việc code được thuận lợi hơn.

VD là layout gồm Row và Column

Column bên trái lại chia ra nhiều Row bên trong và Text

Nên làm gì tiếp theo

  • Build thử 1 app đơn giản để kiểm chứng
  • Chạy dự án lớn hơn với Flutter
  • Flutter Web áp dụng để xây dựng Web hay Single Page App được không?