MDC-102: Cấu trúc và bố cục vật liệu

Thiết kế vật liệu cung cấp các định dạng điều hướng đảm bảo rất dễ sử dụng. Một trong những thành phần dễ thấy nhất là thanh ứng dụng trên.

Tạo tài khoản nhà phát triển Google Play

Thông báo thông tin cá nhân của bạn, địa chỉ bạn chọn và mật khẩu của bạn.

Chấp nhận các điều kiện chung của bán hàng (GTC).

Thêm một bức ảnh đẹp của chính bạn.

Tạo tài khoản nhà phát triển Google Play

Quy trình tạo tài khoản nhà phát triển Google Play đơn giản hơn nhiều so với tại Apple.

Kết nối với địa chỉ Gmail của bạn.

Chấp nhận GTC.

Điều chỉnh phí đăng ký: Một khoản thanh toán 25 euro để xuất bản tất cả các ứng dụng bạn chọn !

Thông báo thông tin liên quan đến tài khoản của bạn: Tên nhà phát triển, địa chỉ email và số điện thoại.

Điều này đã trả lời câu hỏi của bạn ?

Cảm ơn bạn đã nhận xét, có một vấn đề để gửi ý kiến ​​của bạn. vui lòng thử lại sau.

Cập nhật lần cuối vào ngày 9 tháng 11 năm 2021

Các bài viết liên kết

• Tạo một ứng dụng trên bảng điều khiển Google Play
• Tạo chứng chỉ Android P12
• Xuất tệp APK hoặc AAB
• Xuất bản ứng dụng Android
• Xuất bản ứng dụng Android bên ngoài cửa hàng Play
• Xuất bản trên Google Play Store

MDC-102: Cấu trúc và bố cục vật liệu

Các thành phần vật liệu (MDC) giúp các nhà phát triển thực hiện thiết kế vật liệu. Được thiết kế bởi một nhóm các kỹ sư và chuyên gia trải nghiệm người dùng tại Google, MDC cung cấp hàng tá thành phần giao diện người dùng thanh lịch và chức năng. Nó có sẵn cho Android, iOS, web và Flutter.vật liệu.IO/Phát triển.

Trong hội thảo lập trình MDC-101, bạn đã sử dụng hai thành phần vật liệu để tạo trang kết nối: các trường văn bản và các nút bao gồm hoạt hình “Ink”. Trên các cơ sở này, hãy để chúng tôi làm phong phú ứng dụng của mình bằng cách thêm điều hướng, cấu trúc và dữ liệu.

Mục tiêu hội thảo

Trong hội thảo lập trình này, bạn sẽ tạo một màn hình chính cho Đền thờ, Một ứng dụng thương mại điện tử để bán quần áo và các mặt hàng cho ngôi nhà. Màn hình này sẽ chứa:

• Một thanh ứng dụng cao hơn
• Một danh sách các sản phẩm ở dạng lưới

Xin lưu ý rằng hội thảo lập trình này đã được thay thế bằng tài liệu 3, ngoại trừ ảnh chụp màn hình. Tuy nhiên, họ truyền tải các thông tin tương tự.

Hội thảo lập trình này là lần thứ hai trong bốn hội thảo sẽ giúp bạn tạo một ứng dụng cho một sản phẩm có tên là Sanctuary. Chúng tôi khuyên bạn nên theo dõi tất cả các hội thảo lập trình theo thứ tự, để tiến tới các nhiệm vụ từng chút một. Bạn sẽ tìm thấy các hội thảo lập trình của mình tại đây:

• MDC-101 Flutter: Nguyên tắc cơ bản của các thành phần vật liệu
• MDC-103 Flutter: Sử dụng các chủ đề về thiết kế vật liệu (màu sắc, hình dạng, độ cao và loại)
• MDC-104 Flutter: Các thành phần thiết kế vật liệu tiên tiến

Các thành phần vật liệu và các hệ thống con trong hội thảo lập trình này

• Phía trên
• Lưới
• thẻ

Trong hội thảo lập trình này, bạn sẽ sử dụng các thành phần mặc định được cung cấp bởi vật liệu Flutter. Bạn sẽ học cách tùy chỉnh chúng trong phần MDC-103: Sử dụng các chủ đề về thiết kế vật liệu (màu sắc, hình dạng, độ cao và loại).

Làm thế nào bạn sẽ đánh giá mức độ kinh nghiệm của bạn trong phát triển với Flutter ?

2. Cấu hình môi trường phát triển rung

Đối với hội thảo này, bạn cần hai phần mềm: SDK Flutter và Nhà xuất bản.

Bạn có thể chạy hội thảo lập trình trên một trong các thiết bị sau:

• Thiết bị Android hoặc IOS vật lý được kết nối với máy tính của bạn và đặt ở chế độ nhà phát triển.
• Trình mô phỏng iOS (Công cụ XCODE để cài đặt).
• Trình giả lập Android (phải được cấu hình trong Android Studio).
• Trình duyệt (cần phải có trình duyệt để gỡ lỗi).
• Như máy tính để bàn Windows, Linux hoặc MacOS. Bạn phải phát triển ứng dụng của mình trên nền tảng nơi bạn dự định triển khai nó. Ví dụ: nếu bạn muốn phát triển ứng dụng Windows Desktop, bạn phải thực hiện nó trên Windows để truy cập chuỗi biên dịch thích hợp. Cũng tìm hiểu về các yêu cầu cụ thể cho các hệ điều hành, được chi tiết trên tài liệu.chớp cánh.Dev/máy tính để bàn.

3. Tải xuống ứng dụng khởi hành cho hội thảo lập trình

Bạn đã theo dõi hội thảo MDC-101 ?

Nếu bạn đã hoàn thành hội thảo lập trình MDC-101, mã của bạn sẽ sẵn sàng để bắt đầu hội thảo này. Đi đến giai đoạn tiếp theo: Thêm một thanh ứng dụng cao hơn.

Bạn bắt đầu từ đầu ?

Tải xuống ứng dụng khởi hành hội thảo bắt đầu

Ứng dụng bắt đầu nằm trong phần tử-thành phần-flutter-codelabs-102-starter_and_101-forplete/mdc_100_series .

… Hoặc nhân bản hội thảo từ GitHub

Để sao chép hội thảo lập trình này từ GitHub, hãy chạy các lệnh sau:

Git Clone https: // GitHub.Com/thành phần vật liệu/thành phần vật liệu đã gây ra modelabs.GIT CD Vật liệu Thành phần-FLTHER-CODELABS/MDC_100_SERIES GIT Checkout 102-Starter_and_101-Complete

Để được giúp đỡ, hãy xem phần Nhân bản từ GitHub

Chọn đúng nhánh

Hội thảo lập trình MDC-101 tại 104 dựa vào nhau. Vì vậy, khi bạn hoàn thành mã cho Hội thảo MDC-102, nó trở thành mã bắt đầu của Hội thảo MDC-103. Mã được chia thành một số nhánh mà bạn có thể hiển thị danh sách bằng lệnh này:

Chi nhánh Git -List

Để hiển thị mã đã hoàn thành, hãy chuyển đến nhánh 103 starter_and_102 hoàn chỉnh .

Mở dự án và thực hiện ứng dụng

1. Mở dự án trong nhà xuất bản bạn chọn.
2. Thực hiện theo các hướng dẫn liên quan đến nhà xuất bản bạn đã chọn. Chúng có thể truy cập được vào đoạn “Chạy ứng dụng” (thực hiện ứng dụng) trên trang GET bắt đầu> lái thử (bước đầu tiên> Kiểm tra).

Hoạt động thành công. Trang kết nối Sanctuary từ Hội thảo lập trình MDC-101 phải được hiển thị trên thiết bị của bạn.

Bây giờ màn hình kết nối đã được đặt ra, hãy thêm một số sản phẩm vào ứng dụng.

4. Thêm một thanh ứng dụng cao hơn

Hiện tại, nếu bạn nhấp vào nút “Tiếp theo”, màn hình chính được hiển thị với thông báo “Bạn đã làm nó!” (Bạn đã thành công.)). Hoàn hảo. Tuy nhiên, người dùng của chúng tôi không có gì để làm và không biết anh ấy đang ở đâu trong ứng dụng. Để giúp bạn, đã đến lúc thêm điều hướng.

Ở đó dẫn đường Đề cập đến các thành phần, tương tác, chỉ số trực quan và kiến ​​trúc thông tin cho phép người dùng điều hướng trong một ứng dụng. Nó cho phép bạn khám phá nội dung và tính năng và dễ dàng thực hiện các tác vụ.

Để tìm hiểu thêm, hãy tham khảo bài viết dành cho điều hướng trong các hướng dẫn thiết kế vật liệu.

Thiết kế vật liệu cung cấp các định dạng điều hướng đảm bảo rất dễ sử dụng. Một trong những thành phần dễ thấy nhất là thanh ứng dụng trên.

Bạn có thể biết yếu tố này dưới tên “Thanh điều hướng” theo iOS hoặc đơn giản là “thanh ứng dụng” hoặc “tiêu đề”.

Để cung cấp cho người dùng quyền truy cập nhanh vào các hành động khác, hãy thêm một thanh ứng dụng cao hơn.

Thêm tiện ích Ứng dụng

Ở nhà.Phi tiêu, thêm một Ứng dụng vào “giàn giáo”, sau đó xóa const được tô sáng:

Trả về giàn giáo const (// TODO: Thêm ứng dụng Thanh (102) Ứng dụng: Ứng dụng (// TODO: Thêm nút và Tiêu đề (102)), 

Việc bổ sungỨng dụng Tại trường appbar: Giàn giáo cho phép chúng tôi có được bố cục hoàn hảo và miễn phí, để lại thanh ứng dụng ở đầu trang và bên dưới cơ thể.

Khung là một tiện ích quan trọng trong vật liệu. Nó cung cấp các API thực tế để hiển thị tất cả các loại thành phần hiện tại, chẳng hạn như bảng, các thanh thông báo “Snackbar” và các phần tử bảng dưới cùng. Nó thậm chí còn tạo điều kiện cho vị trí của một nút hành động nổi.

Tham khảo tài liệu Flutter để tìm hiểu thêm về Giàn giáo.

Ghi lại dự án. Khi ngôi đền được cập nhật, nhấp vào Kế tiếp (Sau) để hiển thị màn hình chính.

Yếu tố được định vị tốt, nhưng nó thiếu một tiêu đề.

Thêm một tiện ích văn bản

Ở nhà.DART, thêm một tiêu đề vào thanh ứng dụng ứng dụng ứng dụng:

// TODO: Thêm thanh ứng dụng (102) Ứng dụng: Ứng dụng (// TODO: Thêm nút và tiêu đề (102) Tiêu đề: Const Text ('Shrine'), // TODO: Thêm nút Trailing (102) 

Ghi lại dự án.

Bạn có thể nhận thấy các biến thể cho từng nền tảng. Hệ thống thiết kế vật liệu có tính đến mỗi nền tảng (Android, iOS, Web) là khác nhau và kỳ vọng của người dùng là khác nhau. Ví dụ, trên iOS, các tiêu đề hầu như luôn tập trung. Đây là hành vi mặc định do UIKIT cung cấp. Trên Android, họ được xếp hàng bên trái. Do đó, nếu bạn sử dụng trình giả lập hoặc thiết bị Android, tiêu đề của bạn sẽ được căn chỉnh ở bên trái. Trong trường hợp mô phỏng hoặc thiết bị iOS, nó phải được tập trung.

Để tìm hiểu thêm, hãy tham khảo bài viết này về sự thích ứng với các nền tảng khác nhau với thiết kế vật liệu.

Nhiều thanh ứng dụng có một nút bên cạnh tiêu đề. Thêm biểu tượng menu vào ứng dụng của chúng tôi.

Thêm nút IconButton ở đầu dòng

Luôn luôn ở nhà.DART, Xác định một phần tử ICONBUTTON cho trường hàng đầu: của thanh ứng dụng ứng dụng ứng dụng. (Đặt nó trước trường tiêu đề: Theo bắt đầu từ đầu đến cuối dòng):

 // TODO: Thêm nút và tiêu đề (102) Dẫn đầu: IconButton (Biểu tượng: Biểu tượng Const (biểu tượng.Menu, SemanticLabel: 'Menu',), onpression: () < print('Menu button'); >, )), 

Ghi lại dự án.

Biểu tượng menu (còn được gọi là “Hamburger”), xuất hiện tại vị trí mong muốn.

Lớp Biểu tượng là một cách thiết thực để tích hợp các biểu tượng vật liệu vào ứng dụng của bạn. Cô ấy sử dụng một tiện ích Biểu tượng. Flutter có một bộ sưu tập hoàn chỉnh các biểu tượng trong lớp học Biểu tượng. Các biểu tượng được tự động nhập theo ánh xạ kênh “const”.

Để tìm hiểu thêm về lớp biểu tượng, hãy xem tài liệu Flutter. Để tìm hiểu thêm về tiện ích biểu tượng, hãy xem tài liệu Flutter.

Bạn cũng có thể thêm các nút ở cuối dòng. Trong Flutter, các nút này được gọi là “hành động”.

Điều kiện bắt đầu Và KẾT THÚC thể hiện ý nghĩa của việc đọc, bất kể ngôn ngữ liên quan. Khi bạn làm việc bằng lưỡi từ trái sang phải, chẳng hạn như tiếng Anh, bắt đầu có nghĩa Qua bên trái Và KẾT THÚC có nghĩa rẽ phải. Bằng một ngôn ngữ đọc từ phải sang trái, như tiếng Ả Rập, thuật ngữ bắt đầu có nghĩa rẽ phải, Và KẾT THÚC có nghĩa Qua bên trái.

Để tìm hiểu thêm về sự đảo ngược của giao diện người dùng, hãy tham khảo các hướng dẫn thiết kế vật liệu về tính hai chiều.

Thêm hành động

Có đủ chỗ cho hai yếu tố biểu tượng khác.

Thêm chúng vào thể hiện appbar sau tiêu đề:

// TODO: Thêm nút Trailing (102) Hành động: [IconButton (Biểu tượng: Biểu tượng Const (biểu tượng.Tìm kiếm, SemanticLabel: 'Tìm kiếm',), ONTPRESD: () < print('Search button'); >, ), IconButton (Biểu tượng: Biểu tượng Const (Biểu tượng.Điều chỉnh, SemanticLabel: 'Filter',), ONPRESD: () < print('Filter button'); >, ),], 

Ghi lại dự án. Màn hình chính của bạn sẽ phát sinh như sau:

Ứng dụng hiện có một nút ở đầu dòng, tiêu đề và hai hành động ở bên phải. Thanh ứng dụng cũng có ảnh hưởng củađộ cao do một bóng nhẹ cho thấy nó ở một mức độ khác với nội dung.

Trong một lớp biểu tượng, trường Semanticlabel là một cách phổ biến để thêm thông tin khả năng truy cập vào Flutter. Nó là một hệ thống rất gần với từ ngữ nội dung Android và chức năng không thể đạt được . Bạn sẽ tìm thấy nó trong nhiều khóa học.

Thông tin có trong trường này cho phép cung cấp thông tin về người đọc màn hình về vai trò của nút này.

Nếu một tiện ích không có trường SemanticLabel:, bạn có thể gói gọn nó trong một tiện ích Ngữ nghĩa. Để tìm hiểu thêm về tiện ích ngữ nghĩa, hãy xem tài liệu Flutter.

5. Thêm một tờ trong lưới

Bây giờ ứng dụng của chúng tôi có cấu trúc hơn một chút, hãy để chúng tôi sắp xếp nội dung của nó bằng cách đặt chúng vào các tệp.

CÁC thẻ là các yếu tố độc lập hiển thị nội dung và hành động liên quan đến một chủ thể nhất định. Họ cung cấp một cách linh hoạt để trình bày nội dung tương tự dưới dạng một bộ sưu tập.

Để tìm hiểu thêm, hãy xem bài viết dành cho các tệp trong hướng dẫn thiết kế vật liệu.

Để tìm hiểu thêm về tiện ích thẻ (tờ), hãy tham khảo bài viết về việc tạo ra bố cục trong Flutter.

Thêm tiện ích GridView

Hãy bắt đầu bằng cách thêm một tờ dưới thanh ứng dụng trên. Hiện tại, tiện ích Thẻ (Tờ) không chứa đủ thông tin để định vị bản thân rõ ràng. Do đó chúng tôi sẽ gói gọn nó trong một tiện ích Chế độ hiển thị theo ô.

Thay thế trung tâm trong phần thân của phần tử giàn giáo bằng tiện ích GridView:

// TODO: Thêm chế độ xem lưới (102) Body: GridView.Đếm (Crossaxiscount: 2, Padding: Const Edgeinsts.Tất cả (16.0), Childaspectratio: 8.0/9.0, // TODO: Xây dựng lưới thẻ (102) Trẻ em: [card ()],),), 

Hãy phân tích mã này. Tiện ích Griver gọi số lượng nhà sản xuất (), vì số lượng các phần tử mà nó hiển thị có thể được tính và không phải là vô hạn. Nhưng anh ấy cần thêm thông tin để xác định bố cục của mình.

Biến Crossaxiscount: Cho biết số lượng phần tử trên mỗi dòng. Chúng tôi muốn có được hai cột.

L ‘trục ngang trong Flutter tương ứng với trục mà chúng ta không cuộn. Cảm giác cuộn được gọi là trục chính. Nếu bạn sử dụng cuộn dọc, như trường hợp mặc định với GridView, trục ngang là ngang.

Để tìm hiểu thêm, hãy xem trang dành riêng để tạo bố cục.

Trường đệm: Xác định không gian trống ở bốn mặt của tiện ích GridView. Tất nhiên, biên độ này không thể nhìn thấy do kết quả của phần tử hoặc dưới nó, bởi vì chưa có Child GridView được đặt bên cạnh phần tử này trong thời điểm này.

Trường trẻ em: Xác định kích thước của các phần tử dưới dạng tỷ lệ (chiều rộng trên chiều cao).

Theo mặc định, GridView tạo ra các khối có kích thước giống hệt nhau.

Chúng tôi có một tờ, nhưng nó trống. Thêm các vật dụng trẻ em vào bảng này.

Đặt nội dung

Các tờ phải bao gồm các khu vực cho một hình ảnh, một tiêu đề và văn bản phụ.

Cập nhật trẻ em từ Widget GridView:

// TODO: Xây dựng lưới thẻ (102) Trẻ em: [Thẻ (Clipbehavior: Clip.Antialias, Trẻ em: Cột (CrossAxalignment: CrossAxalignment.Bắt đầu, Trẻ em: [Aspectratio (Aspectratio: 18.0/11.0, con: hình ảnh.Tài sản ('tài sản/kim cương.png '),), padding (đệm: const edgeinsts.Fromltrb (16.0, 12.0, 16.0, 8.0,.Bắt đầu, Trẻ em: [Text ('Tiêu đề'), Const SizedBox (Chiều cao: 8.0), văn bản ('văn bản thứ cấp'),],),),],),)]], 

Mã này thêm một tiện ích cột (cột) cho phép bạn có các vật dụng trẻ em theo chiều dọc.

Tham số CrossAxAsalComment: Trường chỉ định giá trị CrossAxAsalComment.Bắt đầu, có nghĩa là “Căn chỉnh văn bản trên ‘BẮT ĐẦU LINE'” Side “.

Các tiện ích Aspectratio Xác định tỷ lệ của hình ảnh được hiển thị, bất kể loại hình ảnh được cung cấp.

Phần tử Đệm Xác định biên độ cho văn bản.

Hai vật dụng Chữ Một trên cái kia được đặt và phân tách bởi tám điểm không gian trống (Hộp số kích thước)). Chúng tôi tạo một yếu tố khác Cột để cho họ lề nội thất.

Ghi lại dự án.

Trong tổng quan này, bạn có thể thấy rằng tấm được định vị với một biên độ, các góc của nó được làm tròn và nó chiếu một cái bóng (đại diện cho độ cao của nó). Toàn bộ biểu mẫu được gọi là “container” trong hệ thống thiết kế vật liệu (không bị nhầm lẫn với lớp tiện ích được gọi là container).

Ngoài thùng chứa, tất cả các yếu tố của các tấm đều là tùy chọn trong vật liệu. Bạn có thể thêm văn bản tiêu đề, nhãn dán hoặc hình đại diện, văn bản phụ đề, dấu phân cách, và thậm chí mụn nhọt và biểu tượng.

Để tìm hiểu thêm về nội dung của các tờ, hãy tham khảo bài viết này trong các hướng dẫn thiết kế vật liệu.

Các tờ thường được hiển thị trong một bộ sưu tập với các tờ khác. Sắp xếp chúng dưới dạng một bộ sưu tập trong lưới.

6. Tạo một bộ sưu tập các tệp

Khi có một số tờ có mặt trên màn hình, chúng được nhóm thành một hoặc nhiều bộ sưu tập. Các tập tin của một bộ sưu tập là coplanar: chúng có cùng một độ cao khi nghỉ ngơi (nghĩa là khi chúng không được chọn hoặc di chuyển, mà chúng tôi sẽ không làm ở đây).

Tạo một bộ sưu tập các tệp

Hiện tại, tờ của chúng tôi được định vị bên trong trường trẻ em: GridView Grid. Điều này dẫn đến một lượng lớn mã lồng nhau có thể khó đọc. Hãy để chúng tôi chuyển đổi phần này của mã thành một hàm cho phép tạo càng nhiều bảng trống càng cần thiết và trả về danh sách các tệp.

Tạo một hàm riêng trên hàm Build () (hãy nhớ rằng các hàm bắt đầu bằng một dòng gạch chân là API riêng):

// TODO: Tạo một bộ sưu tập thẻ (102) Danh sách _BuildGridCards (int cent) < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ); >, ); Thẻ trở về; > 

Gán các tệp được tạo tại trường trẻ em của tiện ích GridView. đừng quên Thay thế tất cả các thành phần có trong tiện ích GridView bằng mã mới này ::

// TODO: Thêm chế độ xem lưới (102) Body: GridView.Đếm (Crossaxiscount: 2, Padding: Const Edgeinsts.Tất cả (16.0), Childaspectratio: 8.0/9.0, trẻ em: _BuildGridCards (10) // thay thế), 

Ghi lại dự án.

Các thẻ có mặt, nhưng chúng không hiển thị bất cứ thứ gì trong thời điểm này. Đã đến lúc thêm dữ liệu sản phẩm.

Thêm dữ liệu sản phẩm

Ứng dụng chứa một số sản phẩm có hình ảnh, tên và giá cả. Thêm cái này vào các tiện ích đã có trong tệp

Sau đó ở nhà.DART, nhập gói mới và một số tệp được cung cấp cho mô hình dữ liệu:

Gói nhập '.Phi tiêu '; Nhập 'Gói: Intl/Intl.Phi tiêu '; Nhập 'Mô hình/Sản phẩm.Phi tiêu '; Nhập 'Mô hình/Sản phẩm_Repository.Phi tiêu '; 

Cuối cùng, sửa đổi _BuildGridCards () để truy xuất thông tin sản phẩm và sử dụng dữ liệu này trong các tệp:

// TODO: Tạo một bộ sưu tập thẻ (102) // Thay thế toàn bộ danh sách phương thức này _BuildGridCards (bối cảnh buildcontext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Chủ đề theo chủ đề cuối cùng = Chủ đề.của (bối cảnh); NumberFormat Formatter = numberFormat.Đơn giản.Localof (bối cảnh).toString ()); Trở lại sản phẩm.Bản đồ ((sản phẩm) < return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >)).Liệt kê (); > 

NHẬN THẤY : Chờ trước khi khởi chạy phần tổng hợp và thực thi. Vẫn còn một sửa đổi để thực hiện.

Để định dạng văn bản, chúng tôi sử dụng dữ liệu chủ đề Theo chủ đề từ giá trị BuildContext hiện hành.

Để tìm hiểu thêm về định dạng của văn bản, hãy tham khảo bài viết về kiểu chữ trong hướng dẫn thiết kế vật liệu. Để tìm hiểu thêm về định dạng từ một chủ đề, hãy tiếp tục sau hội thảo lập trình này với MDC-103: Sử dụng các chủ đề về thiết kế vật liệu (màu sắc, hình dạng, độ cao và loại).

Cũng sửa đổi hàm build () để truyền giá trị BuildContext Tại _BuildGridCards () trước khi khởi chạy phần tổng hợp:

// TODO: Thêm chế độ xem lưới (102) Body: GridView.Đếm (Crossaxiscount: 2, Padding: Const Edgeinsts.Tất cả (16.0), Childaspectratio: 8.0/9.0, trẻ em: _BuildGridCards (bối cảnh) // Mã thay đổi), 

Khởi động lại ứng dụng nóng.

Bạn có thể nhận thấy rằng chúng tôi không thêm khoảng cách dọc giữa các tệp. Bởi vì họ có bốn tỷ suất lợi nhuận trên cùng và dưới cùng.

Ghi lại dự án.

Dữ liệu được sản xuất được hiển thị, nhưng hình ảnh được bao quanh bởi một không gian không cần thiết. Theo mặc định, hình ảnh được vẽ bằng trường Boxfit xác định .Scaledown (trong trường hợp này). Thay thế giá trị này bằng .Fitwidth để cô ấy có thể phóng to và loại bỏ không gian không cần thiết.

Thêm một trường phù hợp: Giống như giá trị BoxFit.Vừa chiều rộng:

 // TODO: Điều chỉnh kích thước hộp (102) Fit: Boxfit.vừa chiều rộng, 

Các sản phẩm của chúng tôi hiện được hiển thị hoàn hảo trong ứng dụng.

7. Chúc mừng !

Ứng dụng của chúng tôi cung cấp hoạt động cơ bản cho phép người dùng đi từ màn hình kết nối đến màn hình chính nơi các sản phẩm được hiển thị. Một vài dòng mã là đủ để thêm thanh ứng dụng cao hơn (với tiêu đề và ba nút) và các tệp (để trình bày nội dung của ứng dụng của chúng tôi). Màn hình chính thu được là đơn giản và chức năng, và có cấu trúc cơ bản và nội dung có thể sử dụng.

Phiên bản đã hoàn thành của ứng dụng MDC-102 có sẵn trong nhánh 103 starter_and_102 hoàn chỉnh .

Bạn có thể so sánh phiên bản của mình trên trang với ứng dụng của nhánh này.

Các bước sau

Với thanh ứng dụng, trang tính, trường văn bản và nút nằm ở đầu trang, giờ đây chúng tôi đã sử dụng bốn thành phần chính của thư viện Flutter vật liệu. Để tìm hiểu thêm, hãy xem danh mục các thành phần vật liệu.

Ngay cả khi ứng dụng của chúng tôi hoạt động hoàn hảo, nó không phản ánh bản sắc thương hiệu hoặc quan điểm cụ thể. Trong Hội thảo MDC-103: Sử dụng các chủ đề thiết kế vật liệu (màu sắc, hình dạng, độ cao và loại), chúng tôi sẽ cá nhân hóa phong cách của các thành phần này để thể hiện một thương hiệu hiện đại và năng động.

Việc thực hiện hội thảo lập trình này đã yêu cầu tôi một thời gian và những nỗ lực hợp lý

Hoàn toàn đồng ý

Không đồng ý, cũng không đồng ý

hoàn toàn không đồng ý

Tôi muốn tiếp tục sử dụng các thành phần vật liệu

Hoàn toàn đồng ý

Không đồng ý, cũng không đồng ý

hoàn toàn không đồng ý

Trừ khi có quy định khác, nội dung của trang này được điều chỉnh bởi giấy phép Creative Commons 4.0 và các mẫu mã được điều chỉnh bởi giấy phép Apache 2.0. Để biết thêm thông tin, hãy xem các quy tắc của trang web của nhà phát triển Google. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các công ty liên kết của nó.