Báo cáo thực tập nhận thức công ty tnhh phần mềm kỷ nguyên số

Nhằm để sinh viên có thể ứng dụng những gì đã học vảo thực tế và những kiến thức cần chuân bị cho tương lai nên trường đã tạo cơ hội cho sinh viên tìm hiểu sâu hơn cách vận hành, tổ chức

BQ GIAO DUC VA DAO TAO TRUONG DAI HQC HOA SEN KHOA CONG NGHE THONG TIN

BAO CAO THUC TAP NHAN THUC

Tên cơ quan thực tập : Công ty TNHH Phần mẻm Ký Nguyên Số

Thời gian thực tập : Từ 30/01/2023 đến 18/03/2023

Người hướng dẫn : Ông Võ Nguyễn Xuân Hào

Sinh viên thực hiện : Phạm Hoàng Tuấn Anh

KHOA CONG NGHE THONG TIN

BAO CAO THUC TAP NHAN THUC

Tên cơ quan thực tập : Công ty TNHH Phần mẻm Ký Nguyên Số

Thời gian thực tập : Từ 30/01/2023 đến 18/03/2023

Người hướng dẫn : Ông Võ Nguyễn Xuân Hào

Sinh viên thực hiện : Phạm Hoàng Tuấn Anh

Tháng 03, 2023

TRICH YEU

Trong thời đại công nghiệp hóa hiện đại hóa hiện nay, ngành Công nghệ thông tin đã có những bước phát mạnh mẽ không ngừng và tin học đã trở thành chiếc chia khóa dẫn đến thành công cho nhiều cá nhân trong nhiều lĩnh lực hoạt động, nó luôn được cải tiến, đổi mới từng giây từng phút để ngày cảng hoản thiện hơn đối với nhu cầu của con người Từ những lợi ích mà các ứng dụng của ngành Công nghệ thông tin đã góp phần mang lại cho thế giới thì không ai có thế phú nhận được vai trò quan trọng của nó Nhằm để sinh viên có thể ứng dụng những

gì đã học vảo thực tế và những kiến thức cần chuân bị cho tương lai nên trường

đã tạo cơ hội cho sinh viên tìm hiểu sâu hơn cách vận hành, tổ chức và cách làm việc của một doanh nghiệp Qua đó tích lũy những kinh nghiệm riêng cho bản thân mình Tôi đã được thực tập ở Công ty TNHH Phần mềm Kỷ Nguyên Số -

Derasoft tại lầu 4, số 341A, Lê Trọng Tân, Sơn Kỳ, Tân Phú, Hồ Chí Minh Mục

đích chính của tôi khi đi thực tập là có thê biết được cách áp dụng được những kiến thức đã học vào thực tế và học thêm được ngôn ngữ lập trình mới mà doanh nghiệp đang sử dụng — cụ thể là công nghệ Flutter dùng ngôn ngữ lập trình Dart

Bên cạnh đó, tôi cũng muốn học hỏi thêm về cách ứng xử văn hóa doanh nghiệp

và hiểu thêm về văn hóa trong công ty trong suốt quá trình thực tập Nhờ những

sự chỉ dạy và giúp đỡ tận tình của anh hướng dẫn cùng với các bạn sinh viên thực tập khác mà tôi đã hiểu ra được nhiều vấn đề khác nhau và đạt được các mục đích nêu trên Tôi đã cùng các bạn sinh viên thực tập khác xây dựng glao diện cho ứng dụng Giaic Connect bằng công nghệ Flutter Tuy nhiên, do thời gian có hạn nên tôi vẫn chưa thể sử dụng được API để lấy dữ liệu từ server vào ứng dụng

MUC LUC

TRÍCH YÊU ©22 S22 E21122121127111112211211121121112112121121211 22211 rree i MỤC LỤC 52-5 2122112212211221121112112211 0112121212122 tre ii LỜI CẢM ƠN 252 21 22122122111211221121112112112221211121222221 ra iv DANH MUC SO DO ccc cecccssesssesseessesssesseessessresinstisareteerssaretisesstareaterasereaeses Vv DANH MUC HINH ANH co cccccccccscesssesseesseseressesssesisesetsersareseesesartseteesseseesnes vi NHAN XÉT CỦA NGƯỜI HƯỚNG DẪN 52-222 221222221221122 1 xe viii

1 NHAP DE ooo cccccccccccccccescsecsscsessssessnsessevsessessessnsetseneesevsisessvsnsesinsessnenses 1

2 NỘI DUNG 2222222222221 21222 cee 2

2.1 Giới thiệu cơ quan thực (ập 0 222222212222 22222182 ra 2 2.1.1 Sơ lược về công (y - c nnnHnH HH1 1222121 eg 2

2.1.2 Lịch sử hình thành và phát triển 52 SE 12 z a2 2 2.1.3 Cơ cấu tô chức 2221212221122 rre 3

2.2 Phương pháp nghiền cứu 12c 22122121212 1221 1122111152112 1 se 3 2.3 Các phần mềm được sử dụng -2- s2 2E 11211111212 1 xe 4 2.4 Các công việc được giao và kết quả -s- 5c 5s E111 2 rxe 5

2.4.1 Ôn tập những kiến thức cơ bản, cài đặt Skype, GitHub 5 2.4.2 Tìm hiểu và cài đặt Flutter 2- St T122 E21 1221112 1E re tra 5 2.4.3 Tìm hiểu về cách tạo dự án Hello World - 5c sec 7

2.4.4 Tìm hiểu về ngôn ngữ Dart 5 ST 2212E111111 71 1112112 rre 8

2.4.5 Tìm hiểu về thành phần một dự án 2-52 E222 xe 10 2.4.6 Tìm hiểu về Widget Tree nen tre 11

2.4.7 Tim hiéu vé céc Widget thong dung cece cesses 12

2.4.8 Tim hiéu vé Animation trong Flutter 0000000 cece 18 2.4.9 Tìm hiểu về Navigation trong FÏutfer - cà c c2 s2 se 21

2.4.10 Tìm hiểu về Scrolling Liss S5 5S 2E EE12121 21x rrrrez 24 2.4.11 _ Tìm hiểu về cách xây dựng Lay0uts - ccccssc 26

2.4.12 Tim hiéu vé Interactivity trong Flutter - c2 c2 27

2.4.13 Tim hiéu vé Platform-Native Code -ccccccssrrv 29

2.4.14 Tim hiéu vé JSON Format va Formatting Dates 29 2.4.15 Thiét ké cac giao dién trong dw an Giaic Connect 31

3 KET LUAN oiccccccccccccccccsessessessesecsecsessesscssesscsessessnssesersivsessersesssseseneesees 35

TAT LIEU THAM KHAO u 0 ccccsessssssssesecssssssecesseseecsnessaninseecsniesseesinsanineesees 36

LOI CAM ON

Tôi xin gửi lời cảm ơn tới ông Võ Nguyễn Xuân Hào và ông Phạm Mạnh Huy -— người được công ty phân công hướng dẫn chính cho tôi trong kỳ thực tập tại công ty Phần mềm Ký Nguyên Số Ông đã luôn theo sát, tận tình, chỉ bảo và giải đáp những van để mà tôi gặp phải bên cạnh đó còn giúp tôi trau dồi thêm

những vấn đề thực tế ngoài xã hội khi đi làm

Do sự giới hạn về thời gian thy tập và kiến thức của bản thân còn nhiều thiếu sót, hạn chế nên trong quá trình hoàn thành bài báo cáo này chắc chắn sẽ có sai sót hoặc mắc những lỗi không đáng có Tôi rất mong sẽ nhận được những nhận xét, góp ý quý báu từ thầy cô dé bài báo cáo được hoàn thiện tốt hơn

Tôi xin chân thành cảm ơn

DANH MUC SO DO

Sơ đồ 1: Sơ đồ tổ chức của công ty TNHH Phần mềm Kỷ Nguyên Số

DANH MUC HINH ANH

Hinh 1 Flutter 4

Hinh 2 Android Studio ccc ccc cccececceececesceeceeesceececeeeeeteeseaecneeseeseecaeeeeeeneeesenaees 4

Hinh 3 Tài liệu nghiên cứu - - 022212211121 1211 12 112111811111 1111 1111211011 1k 5 Hình 4 Một số trường hợp dùng StatelessWidget - n2 n2n n2 re 7 Hình 5 Một số trường hợp dùng StatefulWidget sàn He nu 7 Hinh 6 Dự án mặc định - 0002251225112 1111111111111 n SE T 1k 251 15111111111 vz 8 Hình 7 Du an Hello World cc cceececsecccceesensesecsenestsseseeeesteeseeeeeeeeees 8

Hình 8 Cấu trúc folder ::-2222+22221122221222221221212212.2101.211 0c 10

Hinh 9 Layout Widget Tree c cn TH TH 2111111111111 11111121 HH x1 ray 12

Hinh 10 Khi không dùng SafeArea và SaÍeArea ch re, 13

Hình 11 Code của COntaIHeT - c2 1211111211211 11111 1111111111 1111111111111 1x6 13

Hinh 13 Trang trí COntaIner - c2 12.12121111 1111111111 11111 1111111111111 1x6 14

Hình 14 Row và Column lồng nhau 5-55 52 2 121 EE1E71551221 2112111 1 cty 14 Hinh 15 Code của lmape.netwOfk 1 2c 1111 1221011 1212111 1012111181111 g 15

Hinh 16 Dùng Iimage.network trên máy ảO ác n2 2 TH HH HH Hy 15

Hinh 17 Code dùng GlobalKey c2 2112112211211 121115110111 0115 1811118 r ray 15 Hình 18 Code của l FOrm c1 c1 121111111211 1211111 111 1111111111111 111 k1 kr 16 Hinh 19 Code của phương thức ValIdator 2: 2c 2221221221221 151 222k 16 Hinh 20 Khi nhập sai ràng buộc của Validator - c2: 22212221 12eesxes 16 Hinh 21 Code của Ñegex L1 2011 1119101 11111121111 111 110211111111 111 111 11x k ray 17 Hinh 22 Khi nhập sai ràng buộc đã quy định của Regex -ò.c c2 17 Hình 23 Layout khi nằm ngang 5 s2 1111121111211211121211 1tr ru 18 Hình 24 Layout khi nằm đọc SH S21 2111 11111111111 121 212111551 18 Hình 25 Code của AnImatIonCOnfaITT c2 2112112211221 1511121111112 xe, 19

Hình 26 Layout khi dùng AnimatIlonConatIner - ‹ cc cc S222 1k2 19

Hình 27 Code của AnIimatIionCTrossFade ác 212 1121112111 2121011111 x2 20 Hình 28 Layout chuyên giữa 2 widget của AnimationCrossFade 20

vi

Hinh 29 Code cua AnimationOpacity 0 cccccccccccceceneeeenee cesses cnteeneneeenisess 21 Hinh 30 Layout lam mo cua AnimationOpacity c ccc ccseeseceseetteetseetsenees 21 Hinh 31 Code của Navipator.push 1 20121121 1211221 120111211011 111 1111 xay 22 Hinh 32 Code của NavIpator.POP 2 2n n TH TH 1211112211111 11811 ray 22 Hình 33 Layout đi chuyển khi dùng Hero Animation 72 sec s22 se 22 Hinh 34 Layout của BottomAppBar L1 2122111211211 1111111111 111112 1 ray 23 IsiiìÌ (85 /vì0vì 09 aiiiiiẳẳẳÝ 23 Hinh 36 Layout của TabBar c2 0 2221 121112111211111 121111111 1111111151111 re 24 Hình 37 Layout khi kết hợp giữa Stack và Card s-sc ST 22122 25 Hinh 38 Layout dùng LIstVI€W n nn HT n0 14111111 121 tra 26 Hinh 39 Layout dung GrIdVI€W L L c0 n1 111 110 11H11 1111111111111 1 key 26 Hinh 40 Buildine LayOUE 2 2022211211 1211121 111111111221 1011 8110111111111 1x de 27

00 09o.00i 0.iả 0n 28 Hình 42 Layout trước và sau khi nhắn vào dé thể hiên chức năng InkWell 28

Hình 43 Thông tin thiết bị 2 5-2 2 S2EE9S18251112711212111112712112111111 21.1 xe 29

Hình 44 Ví dụ về JSON 2H HH 210211 ere 30

Hình 45 Viết theo kiểu truyền thống tur Viet cla ISON occ cccccccececceccesseeseeeseees 30 Hinh 46 Khi dùng tool của JSỚN c1 1221111111112 2012181201110 30

Hình 47 Kết quả đươc in ra khi dùng JSON 2-5222 1222122222122 2 e2 30

Hình 48 Code của DateFormat dùng DateTime.parse để chuyền đổi 31

Hinh 49 Kết quả ín ra của code hình 46 - 2-2222 22222EE2EEEE22121223222222222X2 31

Hinh 50 Code khi dùng add c2 22221112112 21 2211181 11111211111 1111 xay 31 Hình 51 Kết quả in ra khi đùng add 5:52 5 1 1221 1122121211212 ceg 31 Hình 52 Layout của tạo yêu cầu thu chí không chứa duyệt tự động 32 Hình 53 Layout của tạo yêu cầu thu chi khi duyệt tự động ở trạng thái off 32 Hình 54 Layout cua tạo yêu cầu thu chi khi duyệt tự động ở trạng thái on 33 Hình 55 Layout báo cáo chỉ tiẾt - 5-5 S212 112112111122 11 212.1121021 ray 33 Hình 56 Layout lọc báo cáo của báo cáo chỉ tiẾt 25s 2t Tre 34

vil

NHAN XET CUA NGUOI HUONG DAN

TP.HCM, ngay thang nam

(Thủ trưởng ký tên đóng đấu) Giảm Độc

viii

1 NHAP DE

Tôi thực tập tại công ty TNHH Phần mềm Kỹ Nguyên Số - Derasoft tọa lạc tại 341A, Lê Trọng Tan, Son Ky, Tan Phu, Hồ Chí Minh Thời gian làm việc bắt đầu từ 8 giờ sáng và kết thúc vào 17 giờ chiều kể từ ngảy 30/01/2023 Các mục tiêu mà tôi đặt ra là:

® Mục tiêu 1: Được học tập, làm việc, tìm hiểu và làm quen trong môi trường làm việc chuyên nghiệp

® - Mục tiêu 2: Hoàn thiện các kĩ năng mềm

® Mục tiêu 3: Củng cô được các kiến thức đã học

e Mục tiêu 4: Tìm hiểu về ngôn ngữ lập trình Dart

e©_ Mục tiêu 5: Tìm hiểu về céng nghé Flutter

® - Mục tiêu 6: Xây dựng ứng dung Giaic Connect

Tôi mong minh co thể hoàn thành được các mục tiêu mà bản thân mình đã đặt ra và làm bài báo cáo thực tập nhận thức này thật tốt

2.1

2.1.1

2 NỘI DUNG

Giới thiệu cơ quan thực tập

Sơ lược về công ty Tên công ty: Công ty TNHH Phần mềm Kỷ Nguyên Số

Trụ sở chính: 177/24 đường 3 Tháng 2, Phường 11, Quận 10, TP.HCM Văn phòng: 341A Lê Trọng Tấn, Phường Sơn Kỳ, Quận Tân Phú, TP.HCM

Sáng lập viên: Ông Mai Nguyễn Trần Minh (1977), Giám đốc điều hành

Ngày thành lập: tháng 2/2008

Lĩnh vực kinh doanh chính:

¢ San xuat phan mém

¢ Phat trién giai phap phan mém quan ly doanh nghiép (ERP)

¢ Phat trién giai phap phan mém thuong mai dién tr (E-commerce)

¢ Phat trién giai pháp phần mềm học trực tuyến (E-learning)

e© Phân phối và triển khai giải pháp bảo mật dữ liệu (Website

Security) cho website

Quy mô công ty: Doanh nghiệp vừa và nhỏ (SMB) Website: http://www.derasoft.com

Dién thoai: 8428.62680611 Email: info@derasoft.com

Lich sir hinh thanh va phat trién

Tiền than 1a céng ty TNHH Phan mém Fulsoft, duoc sang lap boi

ông Mai Nguyễn Trần Minh vào tháng 05 năm 2004 với số vốn điều lệ ban đầu 100.000.000 đồng, hoạt động trong lĩnh vực gia công phần mềm

cho các khách hàng tại Mỹ và Nhật Bản

Đến tháng 02 năm 2008, công ty đôi tên thành Công ty TNHH Phần mềm Kỷ Nguyên Số, tăng số vốn điều lệ lên 1.000.000.000 đồng

Đến tháng 02 năm 2010, công ty tăng vốn điều lệ lên

2.000.000.000 đồng Công ty giảm dần hoạt động gia công phần mềm, và bắt đâu đây mạnh các dự án phân mêm trong nước

Đến tháng 05 năm 2014, công ty chấm đứt hoàn toàn hoạt động gia công phân mêm cho nước ngoài, và tập trune mọi nguồn lực đê phát triên

Kỹ thuật Thiết kế Thiết kế Kỹ thuật Ha tầng

Phòng Lâp trình

Phòng Kiếm thử

Phòng

Đào tao

Phòng HCNS

2.2 Phương pháp nghiên cứu

Trong lập trình mobile, có nhiều ngôn ngữ đơn hoặc đa nền tảng hỗ tro nhu C#, C++, Java, Kotlin, Java Script( dién hinh la React Native)

Nhưng theo tôi, ngôn ngữ lập trình Dart là ngôn ngữ tiện lợi nhất và đang

được nhiều người ưu thích hiện vì vô vàn lợi ích mà nó mang lại như:

e Tăng tốc quá trình phát triển: Flutter cho phép phát triển ứng dụng nhanh chóng hơn bằng cách sử dụng một mã nguồn duy nhất trên nhiều nên tảng Điều này giúp tiết kiệm chi phi và rất hiệu quả

e - Tự do tùy chỉnh và kết xuất nhanh hơn: Flutter có kiến trúc phân lớp sẽ giúp bạn tự do tùy chỉnh các thành phần giao diện người dùng Flutter

tiếp cận rất đơn giản và hiệu quả, giúp nhất quán giao diện người dùng trên nhiều nền tang

® Hot-reload: đây là một trong những tinh nang vuot tré1, gidp Flutter tro nên khác biệt với các nền tảng khác

©_ Tương đương với Hiệu suất ứng dụng gốc: UX tốt sẽ mang đến thành công cho ứng dụng của bạn, ngược lại hiệu suất kém sẽ ảnh hưởng nghiêm trọng đến trải nghiệm ứng dụng của user

e Flutter co ngu6n tài liệu hay, ngoài ra còn có một cộng đồng lớn, mạnh

từ đó trở nên thu hút nhiều lập trình viên để có thể trao đôi, hỗ trợ nhau một cách tốt hơn

Hình 2 Android Studio

GithHub: Dùng để kết nối và trao đổi code khi tham gia dự án

2.4 Các công việc được giao và kết quả

2.4.1 Ôn tập những kiến thức co ban, cai dat Skype, GitHub

Khi thực tập tôi được công ty phân công và trao đôi công việc bằng Skype Bên cạnh đó, GitHub là một ứng dụng không thê thiếu để tôi và các bạn thực tập có thể học tập và đồng bộ code với nhau Đầu tiên, tôi được phân công phải ôn tập lại các kiến thức đã học ở trên trường và tập trung chủ yếu vào:

- _ Hướng đối tượng Oop

- - Các kiểu đữ liệu (int, double, String, )

- Cac kién thức về Class, Method và kế thừa

2.4.2 Tìm hiểu và cài đặt Flutter

Trong quá trình thực tập, tôi được công ty cung cấp tải liệu “Marco

L Napoli, Beginning Flutter - A Hands On Guide to App Development”

dùng đề tham khảo và nghiên về ngôn ngữ lập trình Dart trong Flutter, day cũng là tài liệu chính thức sử dụng xuyên suốt thời gian thy tập

A Hands On Guide To App Development

Hinh 3 Tài liệu nghiên cứu

Tôi nhận thấy Flutter là một công cụ đề phát triển ứng dụng trên thiết

bị di động rất hiện đại, dễ sử dụng và nó có thé xây dựng cho cả hệ điều hành Android và IOS một cách đơn giản Flutter còn là mot dw an ma

nguồn mở được lưu trữ trên GitHub với sự đóng góp của cộng đồng và Google Flutter đã sử dụng ngôn ngữ Dart - một ngôn ngữ hướng đối tượng hiện đại có thê biên dịch sang mã ARM gốc và mã JavaScript được sản xuất sẵn

Một số ưu điểm của Flutter như:

e Animation, performance app rat cao va manh

¢ Gan nhu có thé giao tiếp trức tiếp voi native

© Chạy giả lập mobile trên trang web nên rất tiện cho development

e Syntax hién dai, compiler linh déng gitra AOT va JIT

Một số nhược điểm của Flutter như:

® - Đây là một ứng dụng chưa hoàn thiện

e _ Phải cập nhật và sử dụng thường xuyên để có thể sử dụng một cách

Trong Flutter, tôi hiểu được nó có hai trang thai chinh la StatelessWidget

va Stateful Widget

¢ StatelessWidget la mét widget tĩnh và nó không thể tự thay đôi được những gi ma nó hiển thị sau khi đã được Render xong StatelessWidget chỉ có duy nhất một vòng đời

=

st

Hinh 4 Mot sé truong hop dung StatelessWidget

®© StatefulWidget là một widget động và nó có thể thay đôi những gi

đang hiển thị bằng cách thay đôi State cua chính nó StatefulWidget có

=

Hình 5 Một số trường hợp dùng StatefulWidget

2.4.3 Tìm hiểu về cách tạo dự án Hello World

vô sô vòng đời

Sau khi tìm hiểu tài liệu của phần này, tôi biết được cách tạo ứng dụng mặc định và sử dụng tính năng “hot reload” để xem các thay đối ngay lập tức Đề tạo một ứng dụng với Flutter thì chúng ta sử dụng Android Studio

sau đó chọn File -> New -> New Flutter ProJect Ngoài ra tài liệu còn giới

thiệu về các theme đề tạo giao dién va 3 ché d6 build project nhu:

¢ Debug mode: Str dung trong qua trinh phat trién ing dung va khi ding hot reload

¢ Profile mode: Sử dụng khi phân tích performance

® Release mode: Sử dụng khi app đã sẵn sảng cho việc đưa vào sử dụng

2.4.4,

Flutter Demo Home Page Flutter Demo Home Page

You have pushed the button this r

Hinh 6 Dy an mac dinh Hình 7 Dự an Hello World

Nhờ vào tài liệu mà tôi biét khi nao str dung StatelessWidget khi nào

sử dụng StatefulWidget Khi nhắn nút (+) như hình thì số trên màn hình sẽ

tăng lên một thì đó sẽ là sử dụng StatefulWidget còn nếu như không thay đổi thi 1a Stateless Widget

Tìm hiểu về ngôn ngữ Dart Dart là một ngôn ngữ lập trình hiện đại cấp cao được phát triển ban

đầu bởi Google, nó xuất hiện vào năm 2011, nhưng tới tháng 6, 2017 mới

phát hành phiên bản ổn định Mặc dù là vậy nhưng rất Ít người sử dụng chỉ khi được sử dụng bởi Flutter thì mới trở nên phổ biến Dart được sử dụng để xây dựng các ứng dụng trên thiết bị di động, website va may chủ Một số ưu điểm của Dart:

®© Năng suất hơn

Nhanh hon

® Dễsử dụng hơn

Tôi thấy rằng các kiểu, lớp và các cú pháp trong Dart khá giống C Nếu đã học qua các ngôn ngữ như C/C+>, C#, Java/JavaScript thi bạn sẽ nhanh chóng hiểu và làm quen được với Dart một cách dễ dàng

Đôi với chương này tôi học được những kiên thức cơ bản nhất của Flutter và áp dụng vào khi thiết kế ứng dụng Một số kiến thức cơ bản:

Cach comment code trong Flutter

Cach viét ham main(): c6 3 cách nhưng cách tôi hay dùng nhất là

void main() => runApp(MyApp()):

Cách khai báo biến:

Biến số trong Dart đều là reference type nên có một loại biến

dynamic chap nhận mọi kiểu dữ liệu

Dynamic co thé chap nhan gan no voi nhiều kiểu

Ngoài ra cũng có thé tạo biến var với cú pháp:

var tên biến = giá trị của biến;

Một số loại biến thuong dung nhu: Number, Double, Strings, Booleans,

Cach su dung Lists, Maps trong Flutter

Ca Lists va Maps déu duoc dung dé biéu dién mét tap cac đối tượng

List<T> dung dé biéu dién mét nhém cac déi tuong duoc sap xếp và có thiết kế giéng mang

Map<dynamic, dynamic>{} kiêu đữ liệu biểu diễn một tập đối tượng không được sắp xếp ở dạng <key, value>

Cách sử dụng các vong lap: for, while, do while,

Cách sử dung cac cau lénh if else, continue, switch case,

Cách sử dung function, class,

2.4.5 Tìm hiểu về thành phần một dự án

Đối với chương nảy, nó hướng dẫn cho tôi biết làm thế nào dé dé quan

lý cấu trúc các thư mục của ứng dụng cho mình tạo ra Chúng ta cần đặt tên các thư theo nhóm các chức năng để có thể thuận tiện hơn trong việc tìm kiếm, đặc biệt là trong các dự án lớn

d [intern guide android]

Hình 8 Cầu trúc folder

Ta có thể thấy ở hình trên trong thư mục app có chứa rất nhiều thư mục con, những thư mục nảy nó đều mang các chức năng khác nhau nên

nó sẽ được đặt tên theo chức năng của nó Khi tôi nhìn vào tên thư mục thì

tôi có thê biết nó chứa những file con nảo, từ đó dé dàng tìm kiếm hay gọi

nó ra để sử dụng Ngoài ra, tôi còn tìm kiếm được trong tài liệu cách tạo thư mục thông qua lệnh “mkdir” nhưng tôi thấy chỉ nên dùng lệnh này khi tạo nhiều thư mục còn khi tạo một hay it thi tao thu công sẽ nhanh hơn

10

2.4.6 Tim hiéu vé Widget Tree

Widget là thứ giúp tạo ra giao diện cho người dùng, cũng có thể hiểu

nó là thứ ta có thể nhìn thấy và tương tác với ứng dụng, gần như mọi thứ

trong Flutter đều là widget

Bén canh d6 widget trong Flutter có thể hiểu là một cái cây, nó chia lam 3 widget chính: không có con, có một con (chilđ) và có nhiều con (children) hay con co thé hiéu widget g6m co parent widget va children widget

Trong Flutter có chia ra widget cy thế cho từng nền tảng khác nhau:

Material widget la widget danh cho nền tảng Android, nó được thiết kế trên Material Design của hệ điều hành Android

Cupertino widget là widget dành cho nền tảng IOS, nó được thiết

kế trên Human Interface Guideline của Apple

Đa số những widget dùng cho Material và Cupertino đều là những widget co ban nhat

Một cay widget sé được cầu tạo từ sự kết hop gitra cac widget như: Scaffold, Column, Row, Container, Text, Padding,

Scaffold: có thê hiểu là một cai khung, mét widget dugc str dung dé thiết kế giao điện của ứng dụng

Row: một wideet sẽ sắp xếp các widget con của nó theo chiều

ngang và không thể cuộn được

Column: một widget sẽ sắp xếp các widget con của nó theo chiều đọc và không thể cuộn được

Text: no giup hiến thị một chuỗi, một đoạn văn hay cũng có thể là một style duy nhất

Padding: né la mét widget c6 thê bao bọc các widget khác để cung cấp cho chúng phần padding theo hướng quy định mà mình muốn hay có thế hiểu đơn giản là nó giúp ta đệm các widget khác theo hướng mà chúng ta quy định

11

2.4.7

Hinh 9 Layout Widget Tree

Ngoài ra, phần này tài liệu còn hướng dẫn tôi cách xây dựng Shallow

Widget Tree nham thu gon code, dé dé sử dụng lại và tối ưu được bộ nhớ

cho ứng dụng qua 3 loại là Extract Local Variable, Extract Method và

Extract Widget Sau khi sử dụng qua 3 loại này thì tôi thấy Extract Widget

là tối ưu nhất vi widget nay được tác rời thành một widget Stateless Widget, no sé co va dung BuildContext riéng cua no

Tìm hiểu về các Widget thông dung Đối với Flutter thì widget đóng một vai trò rất quan trọng nên người hướng dẫn đã yêu cầu tôi phải tìm hiểu thật kĩ những widget cơ bản nhất

để nâng cao hiểu quả và có thể phân biệt được khi nào cần dùng tới chúng SafeArea: là một widget co nhiém vy chén cho cac widget con của nó một padding để tránh việc các widget con bị chặn khỏi thanh ngang hệ thông, các rãnh, lỗ, góc tròn và các tính năng khác mả nhà sản xuất sáng tạo thêm

12

Hình 10 Khi không dùng SafeArea va SafeArea

Container: được hiểu là một hộp để chứa các widget con va có thé vé hãy quy định kích thước của nó, ngoai ra Container con c6 tac dung ngan cách các nội dung va lam nỗi bật các nội dung

312 a Test Widget

Hình 11 Code của Container Hinh 12 Container trén

may ao Ngoài ra, tài liệu còn hướng dẫn tôi cách trang trí Container sao cho đẹp và tủy chỉnh theo ý thích của bản thân dựa trên các thuộc tính có sẵn cua Container T6i co thê tùy ý chỉnh Contariner bởi nó đều có các thuộc

13