Flutter in 100 seconds

0:00 flutter a UI framework for building apps

0:02 on iOS Android the web and desktop at

0:04 its core flutter combines a high

0:06 performance graphics engine with the

0:08 dart programming language in development

0:10 dart provides full type safety and

0:11 stateful hot reload to help you build

0:13 reliable apps quickly in production dart

0:16 compiles to native machine code which

0:18 means your graphics will render

0:19 beautifully on any platform install

0:21 flutter then run flutter create to

0:23 create a new project now open the main

0:25 dart file this is where you build your

0:27 app the UI is laid out as a tree of

0:29 widgets and the framework provides

0:30 hundreds of pre-built widgets to handle

0:32 things like animations scrolling

0:34 responsive layout and more you can build

0:36 your own widget by extending the

0:38 stateless widget class you then define

0:40 your UI by overriding its build method

0:41 now it's important to understand that

0:43 everything in flutter is a widget this

0:45 method returns a widget and it's

0:47 children return widgets and their

0:48 children return widgets giving us an

0:50 expressive declarative UI structure

0:52 which you can easily Traverse using

0:54 flutters awesome tool whenever the input

0:56 data to this widget changes flutter will

0:58 rebuild the UI by calling your build

1:00 method stateless widgets are immutable

1:01 and don't have any internal data when

1:03 you have an interactive widgets where

1:05 the internal data might change based on

1:06 user input you can extend a stateful

1:08 widget properties defined on this class

1:10 can be reactive for example we might

1:12 have a counter that starts at zero then

1:14 in our build method we have one of

1:16 flutters built-in buttons that cause a

1:17 function whenever it's pressed it

1:19 increments the counter by coin set state

1:21 which tells the framework that the

1:22 widgets data has changed causing the UI

1:24 to re-render with the latest data you

1:26 can now play with this app on a real

1:27 device using the flutter run command

1:29 that's cool and all but let's make some

1:31 changes we'll go back to our source code

1:33 and Center the button on the middle of

1:34 the screen instead of writing code just

1:36 click on the button and hit control

1:38 shift R then wrap your button with a

1:39 center widget next change the color of

1:41 the button and notice how flutter

1:42 previews that color directly in your IDE

1:44 now too hot reload the app simply type

1:47 or into the command line it only took a

1:48 few milliseconds to build a new version

1:50 of our app and notice how the state of

1:52 the counter was unchanged that's what I

1:53 like to call an awesome developer

1:55 experience this has been flutter in 100

1:57 seconds if you want to learn more check

1:59 out my newly updated flutter fire based

2:01 course on fire ship i/o thanks for

2:03 watching and I will see you in the next

2:04 one

2:05 you

0:00 Flutter là một framework UI dùng để xây dựng ứng dụng trên iOS, Android, web và desktop. Về cơ bản, Flutter kết hợp một engine đồ họa hiệu suất cao với ngôn ngữ lập trình Dart.

0:10 Trong quá trình phát triển, Dart cung cấp tính năng kiểm tra kiểu đầy đủ và khả năng tải lại nóng có trạng thái, giúp bạn xây dựng các ứng dụng đáng tin cậy một cách nhanh chóng. Khi đưa vào sản xuất, Dart biên dịch thành mã máy gốc, nghĩa là đồ họa của bạn sẽ hiển thị mượt mà trên mọi nền tảng.

0:21 Để cài đặt Flutter, hãy chạy lệnh "flutter create" để tạo một dự án mới. Sau đó, mở file "main.dart". Đây là nơi bạn xây dựng ứng dụng của mình. UI được bố trí dưới dạng một cây các widget, và framework cung cấp hàng trăm widget dựng sẵn để xử lý các tác vụ như hoạt ảnh, cuộn, bố cục đáp ứng và nhiều hơn nữa.

0:34 Bạn có thể tự xây dựng widget của riêng mình bằng cách kế thừa từ lớp widget không trạng thái. Sau đó, bạn xác định UI của mình bằng cách ghi đè phương thức build. Điều quan trọng cần hiểu là mọi thứ trong Flutter đều là một widget. Phương thức này trả về một widget, và các phần tử con của nó cũng trả về các widget, tạo ra một cấu trúc UI khai báo, dễ hiểu mà bạn có thể dễ dàng duyệt qua bằng các công cụ tuyệt vời của Flutter.

0:56 Bất cứ khi nào dữ liệu đầu vào cho widget này thay đổi, Flutter sẽ xây dựng lại UI bằng cách gọi phương thức build của bạn. Các widget không trạng thái là bất biến và không có bất kỳ dữ liệu nội bộ nào. Khi bạn có các widget tương tác, nơi dữ liệu nội bộ có thể thay đổi dựa trên thao tác của người dùng, bạn có thể kế thừa từ một widget có trạng thái.

1:08 Các thuộc tính được xác định trên lớp này có thể phản ứng. Ví dụ: chúng ta có thể có một bộ đếm bắt đầu từ số không. Sau đó, trong phương thức build của chúng ta, chúng ta có một trong các nút tích hợp của Flutter, nút này sẽ kích hoạt một hàm bất cứ khi nào nó được nhấn. Nó tăng bộ đếm bằng cách gọi "setState", báo cho framework biết rằng dữ liệu của widget đã thay đổi, khiến UI kết xuất lại với dữ liệu mới nhất.

1:26 Bây giờ bạn có thể chạy ứng dụng này trên một thiết bị thực bằng lệnh "flutter run". Thật tuyệt vời, nhưng hãy thử thay đổi một chút. Chúng ta sẽ quay lại mã nguồn và căn giữa nút ở giữa màn hình. Thay vì viết code, chỉ cần nhấp vào nút và nhấn Control+Shift+R, sau đó bọc nút của bạn bằng một widget Center.

1:41 Tiếp theo, thay đổi màu của nút và bạn sẽ thấy Flutter hiển thị trước màu đó trực tiếp trong IDE. Bây giờ, để tải lại nóng ứng dụng, chỉ cần nhập "r" vào dòng lệnh. Chỉ mất vài mili giây để xây dựng một phiên bản mới của ứng dụng, và bạn sẽ thấy trạng thái của bộ đếm không thay đổi. Đó là điều mà tôi gọi là trải nghiệm nhà phát triển tuyệt vời.

1:55 Đó là Flutter trong 100 giây. Nếu bạn muốn tìm hiểu thêm, hãy xem khóa học Flutter Firebase mới được cập nhật của tôi trên fireship(dot)io.

2:03 Cảm ơn bạn đã theo dõi và hẹn gặp lại trong video tiếp theo.