MDC-102 : 재료 구조 및 레이아웃

Material Design은 매우 사용 편의성을 보장하는 탐색 형식을 제공합니다. 가장 눈에 띄는 구성 요소 중 하나는 상단 응용 프로그램 막대입니다.

Google Play 개발자 계정을 만듭니다

귀하의 개인 정보, 선택한 주소 및 비밀번호를 알리십시오.

일반 판매 조건 (GTC)을 수락하십시오.

자신의 멋진 사진을 추가하십시오.

Google Play 개발자 계정을 만듭니다

Google Play 개발자 계정을 만드는 절차는 Apple보다 훨씬 간단합니다.

Gmail 주소에 연결하십시오.

GTC를 수락하십시오.

등록비 조정 : 선택한 모든 신청서를 게시하기 위해 25 유로의 단일 지불 !

귀하의 계정과 관련된 정보를 알려주십시오 : 개발자 이름, 이메일 주소 및 전화 번호.

이것은 당신의 질문에 대답했습니다 ?

의견에 감사드립니다. 귀하의 의견을 제출할 문제가있었습니다. 나중에 다시 시도 해주십시오.

2021 년 11 월 9 일에 마지막 업데이트

관련 기사

• Google Play 콘솔에서 응용 프로그램을 만듭니다
• Android P12 인증서를 생성하십시오
• APK 또는 AAB 파일을 내보내십시오
• Android 응용 프로그램을 게시하십시오
• Play 스토어 밖에서 Android 앱을 게시하십시오
• Google Play 스토어에 게시하십시오

MDC-102 : 재료 구조 및 레이아웃

MDC (Material Components)는 개발자가 재료 설계를 구현하도록 도와줍니다. Google의 엔지니어 및 사용자 경험 전문가가 설계 한 MDC는 수십 개의 우아하고 기능적인 사용자 인터페이스 구성 요소를 제공합니다. Android, iOS, 웹 및 플러터에 사용할 수 있습니다.재료.IO/개발.

MDC-101 프로그래밍 워크숍에서는 두 가지 재료 구성 요소 요소를 사용하여 연결 페이지를 작성했습니다. “잉크”애니메이션을 포함하는 텍스트 필드 및 버튼. 이 기지에서는 탐색, 구조 및 데이터를 추가하여 응용 프로그램을 풍부하게하겠습니다.

워크숍 목표

이 프로그래밍 워크숍에서는 홈 화면을 만듭니다 신사, 집을위한 의류 및 품목 판매를위한 전자 상거래 신청. 이 화면에는 다음이 포함됩니다

• 더 높은 응용 프로그램 막대
• 그리드 형태의 제품 목록

이 프로그래밍 워크숍은 스크린 샷을 제외하고 자료 3으로 대체되었습니다. 그럼에도 불구하고 그들은 같은 정보를 전달합니다.

이 프로그래밍 워크숍은 4 개의 워크샵 중 두 번째로 Sanctuary라는 제품 응용 프로그램을 만드는 데 도움이됩니다. 작업을 조금씩 발전시키기 위해 모든 프로그래밍 워크샵을 순서대로 팔로우하는 것이 좋습니다. 프로그래밍 워크샵은 다음과 같습니다

• MDC-101 플러터 : 재료 구성 요소의 기본 원리
• MDC-103 플러터 : 재료 설계 테마 사용 (색, 모양, 고도 및 유형)
• MDC-104 플러터 : 고급 재료 설계 구성 요소

이 프로그래밍 워크숍에서 재료 플러터 재료 구성 요소 및 서브 시스템

• 높은
• 그리드
• 카드

이 프로그래밍 워크숍에서는 Material Flutter가 제공하는 기본 구성 요소를 사용합니다. MDC-103 섹션에서 사용자 정의하는 법을 배웁니다 : 재료 설계 테마 사용 (색, 모양, 고도 및 유형).

플러터로 개발 경험 수준을 어떻게 평가 하시겠습니까? ?

2. 플러터 개발 환경을 구성하십시오

이 워크숍에는 두 개의 소프트웨어가 필요합니다 : Flutter SDK와 Publisher.

다음 장치 중 하나에서 프로그래밍 워크샵을 실행할 수 있습니다

• 컴퓨터에 연결된 안드로이드 또는 물리적 iOS 장치 및 개발자 모드로 설정.
• iOS 시뮬레이터 (설치할 Xcode 도구).
• 안드로이드 에뮬레이터 (Android Studio에서 구성해야 함).
• 브라우저 (크롬은 디버깅에 필요합니다).
• Windows, Linux 또는 MacOS 데스크탑으로. 배치 할 플랫폼에서 응용 프로그램을 개발해야합니다. 예를 들어, Windows 데스크탑 응용 프로그램을 개발하려면 적절한 컴파일 체인에 액세스하려면 Windows에서 수행해야합니다. 또한 문서에 자세히 설명 된 운영 체제에 대한 특정 요구 사항에 대해 알아보십시오.실룩 거리다.DEV/데스크탑.

삼. 프로그래밍 워크숍의 출발 앱을 다운로드하십시오

당신은 이미 MDC-101 워크숍을 따랐습니다 ?

MDC-101 프로그래밍 워크숍을 마친 경우 코드 가이 워크숍을 시작할 준비가되어 있어야합니다. 다음 단계로 이동하십시오 더 높은 애플리케이션 막대를 추가하십시오.

당신은 처음부터 시작합니다 ?

시작 워크숍 출발 응용 프로그램을 다운로드하십시오

시작 애플리케이션은 재료 성분-플러터-코드 렐라 -102-starter_and_101-complete/mdc_100_series에 있습니다 .

… 또는 Github에서 워크샵을 복제하십시오

Github 에서이 프로그래밍 워크샵을 복제하려면 다음 명령을 실행하십시오

git 클론 https : // github.com/재료 경쟁자/재료 경쟁자-튀김 코드 랩.GIT CD 재료 경쟁자-플러터-코드 랩스/MDC_100_SERIES GIT Checkout 102-Starter_and_101-Complete

도움은 Github의 클로닝 섹션을 참조하십시오

올바른 지점을 선택하십시오

104의 MDC-101 프로그래밍 워크샵은 서로 의존합니다. 따라서 MDC-102 워크숍 코드를 마치면 MDC-103 워크숍의 시작 코드가됩니다. 코드는 여러 분기로 나뉘어져 있으며이 명령을 사용하여 목록을 표시 할 수 있습니다

git branch -목록

완성 된 코드를 표시하려면 103-starter_and_102-complete 지점으로 이동하십시오 .

프로젝트를 열고 응용 프로그램을 실행하십시오

1. 선택한 출판사에서 프로젝트를 엽니 다.
2. 선택한 게시자에 관한 지침을 따르십시오. “앱 실행”단락 (응용 프로그램 실행)에 액세스 할 수 있습니다 (응용 프로그램 실행)> 테스트 드라이브 페이지 (첫 번째 단계> 테스트).

성공적인 운영. MDC-101 프로그래밍 워크숍의 성소 연결 페이지는 장치에 표시되어야합니다.

연결 화면이 제자리에 있으므로 응용 프로그램에 일부 제품을 추가하겠습니다.

4. 더 높은 애플리케이션 막대를 추가하십시오

잠시 “다음”버튼을 클릭하면 홈 화면이 메시지와 함께 표시됩니다!”(당신은 성공했습니다.))). 완벽한. 그러나 우리 사용자는 할 일이 없으며 응용 프로그램의 위치를 ​​모릅니다. 당신을 돕기 위해, 이제 내비게이션을 추가 할 시간입니다.

거기 항해 사용자가 응용 프로그램에서 탐색 할 수있는 구성 요소, 상호 작용, 시각적 지표 및 정보 아키텍처를 나타냅니다. 컨텐츠와 기능을 발견하고 작업을 쉽게 수행 할 수 있습니다.

자세한 내용은 재료 설계 지침의 내비게이션에 전념하는 기사를 참조하십시오.

Material Design은 매우 사용 편의성을 보장하는 탐색 형식을 제공합니다. 가장 눈에 띄는 구성 요소 중 하나는 상단 응용 프로그램 막대입니다.

이 요소는 iOS에서 “Navigation Bar”라는 이름으로 또는 간단히 “Application Bar”또는 “Header”라는 이름으로 알 수 있습니다.

사용자가 다른 작업에 빠르게 액세스 할 수 있도록 더 높은 응용 프로그램 표시 줄을 추가하겠습니다.

AppBar 위젯을 추가하십시오

가정에서.다트, 앱바를 “스캐 폴드”에 추가 한 다음 강조 표시된 내용을 삭제하십시오

Const Scaffold 리턴 (// todo : App Bar (102) Appbar : AppBar (// todo : 버튼 및 제목 추가 (102)), 

추가appbar AppBar 필드 : 스캐 폴딩은 완벽하고 무료 레이아웃을 얻을 수 있으며, 응용 프로그램 막대는 페이지 상단과 본체 아래에 남겨 둡니다.

발판 MaterialApps에서 중요한 위젯입니다. 패널, “스낵바”알림 막대 및 하단 시트 요소와 같은 모든 종류의 현재 문제 구성 요소를 표시하는 실용적인 API를 제공합니다. 부동 액션 버튼의 배치를 용이하게합니다.

스캐 폴드에 대한 자세한 내용은 플러터 문서를 참조하십시오.

프로젝트를 기록하십시오. 신사가 업데이트되면 클릭하십시오 다음 (다음) 홈 화면을 표시합니다.

요소는 잘 배치되어 있지만 제목이 부족합니다.

텍스트 위젯을 추가하십시오

가정에서.DART, AppBar 응용 프로그램 표시 줄에 제목을 추가하십시오

// todo : 앱 바 추가 (102) AppBar : AppBar (// todo : 버튼 및 제목 추가 (102) 제목 : const 텍스트 ( 'Shrine'), // todo : 후행 버튼 추가 (102) 

프로젝트를 기록하십시오.

각 플랫폼의 변형을 발견했을 수 있습니다. 재료 설계 시스템은 각 플랫폼 (Android, iOS, Web)이 다르고 사용자 기대치가 다르다는 것을 고려합니다. 예를 들어 iOS에서 제목은 거의 항상 중앙에 있습니다. 이것은 Uikit에서 제공하는 기본 동작입니다. 안드로이드에서는 왼쪽에 줄 지어 있습니다. 따라서 에뮬레이터 또는 안드로이드 장치를 사용하는 경우 왼쪽에 제목을 정렬해야합니다. 시뮬레이터 또는 iOS 장치의 경우 중앙에 있어야합니다.

자세한 내용은 재료 디자인으로 다른 플랫폼에 대한 적응에 대한이 기사를 참조하십시오.

많은 응용 프로그램 막대에는 제목 옆에 버튼이 있습니다. 응용 프로그램에 메뉴 아이콘을 추가하십시오.

라인 시작시 ICONBUTTON 버튼 추가

항상 집에.Dart, 선행 필드의 IconButton 요소 정의 : AppBar 응용 프로그램 바. (제목 필드 앞에 놓기 : 라인의 시작부터 끝까지 시작에 따라) :

 // TODO : 버튼 및 제목 추가 (102) 선장 : ICONBUTTON (ICON : Const Icon (아이콘.메뉴, semanticlabel : 'menu',), onpressed : () < print('Menu button'); >, ))), 

프로젝트를 기록하십시오.

메뉴 아이콘 ( “햄버거”라고도 함)은 원하는 위치에 나타납니다.

클래스 아이콘 버튼 자료 아이콘을 애플리케이션에 통합하는 실용적인 방법입니다. 그녀는 위젯을 사용합니다 상. Flutter에는 교실에 완전히 아이콘이 있습니다 아이콘. 아이콘은 “const”채널 매핑에 따라 자동으로 가져옵니다.

아이콘 클래스에 대한 자세한 내용은 Flutter Documentation을 참조하십시오. 아이콘 위젯에 대한 자세한 내용은 Flutter Documentation을 참조하십시오.

라인 끝에 버튼을 추가 할 수도 있습니다. 플러터 에서이 버튼은 “액션”이라고합니다.

자귀 시작 그리고 끝 관련 언어에 관계없이 독서의 의미를 표현하십시오. 영어와 같이 왼쪽에서 오른쪽으로 읽는 혀로 일할 때, 시작 수단 왼쪽으로 그리고 끝 수단 오른쪽으로. 아랍어처럼 오른쪽에서 왼쪽으로 읽는 언어로 용어 시작 수단 오른쪽으로, 그리고 끝 수단 왼쪽으로.

사용자 인터페이스의 역전에 대한 자세한 내용은 양방향에 대한 재료 설계 지침을 참조하십시오.

행동을 추가하십시오

두 개의 다른 Iconbutton 요소를위한 충분한 공간이 있습니다.

제목 다음에 AppBar 인스턴스에 추가하십시오

// TODO : 후행 버튼 추가 (102) 동작 : [ICONBUTTON (아이콘 : Const Icon (아이콘.Search, SemanticLabel : 'Search',), OntPresd : () < print('Search button'); >, ), ICONBUTTON (아이콘 : Const Icon (아이콘.tun, semanticlabel : 'filter',), onpresd : () < print('Filter button'); >, ),], 

프로젝트를 기록하십시오. 홈 화면이 다음과 같이 발생해야합니다

응용 프로그램에는 이제 줄의 시작 부분에 버튼, 제목 및 오른쪽에 두 가지 작업이 있습니다. 애플리케이션 막대는 또한 영향을 미칩니다높이 약간의 그늘 때문에 내용과는 다른 레벨에 있음을 나타냅니다.

아이콘 클래스에서 필드 Semanticlabel 접근성 정보를 추가하여 펄럭이는 일반적인 방법입니다. iOS AccessibilityLabelbel의 Android 컨텐츠 문구 및 Uiaccessibility 기능에 매우 가까운 시스템입니다 . 많은 과정에서 찾을 수 있습니다.

이 필드에 포함 된 정보는이 버튼의 역할에 대한 화면 리더에 대한 정보를 제공 할 수 있도록합니다.

위젯에 SemanticLabel 필드가없는 경우 : 위젯에서 캡슐화 할 수 있습니다 의미론. Semantics 위젯에 대한 자세한 내용은 Flutter Documentation을 참조하십시오.

5. 그리드에 시트를 추가하십시오

우리의 응용 프로그램은 조금 더 구조화되었으므로 내용을 파일에 배치하여 콘텐츠를 구성하겠습니다.

그만큼 카드 주어진 주제와 관련된 내용 및 조치를 표시하는 독립적 인 요소입니다. 그들은 컬렉션 형태로 유사한 내용을 제시하는 유연한 방법을 제공합니다.

자세한 내용은 자료 설계 지침의 파일에 전념하는 기사를 참조하십시오.

카드 위젯 (시트)에 대한 자세한 내용을 보려면 Flutter에서 레이아웃 생성에 관한 기사를 참조하십시오.

그리드 뷰 위젯을 추가하십시오

상단 애플리케이션 막대 아래에 시트를 추가하여 시작하겠습니다. 현재 위젯 카드 (시트) 자신을 눈에 띄게 배치하기에 충분한 정보가 포함되어 있지 않습니다. 따라서 우리는 그것을 위젯에 캡슐화 할 것입니다 그리드 뷰.

스캐 폴드 요소의 본문 중앙을 그리드 뷰 위젯으로 교체하십시오

// TODO : 그리드보기 추가 (102) 본체 : GridView.count (Crossaxiscount : 2, 패딩 : Const Edgeinsts.모두 (16.0), Childaspectratio : 8.0/9.0, // todo : 카드 그리드 구축 (102) 어린이 : [card ()],), 

이 코드를 분석합시다. GRIVER 위젯은 제조업체 COUNT ()을 호출합니다. 표시되는 요소 수는 계산 될 수 있고 무한하지 않기 때문. 그러나 그는 자신의 레이아웃을 정의하기 위해 추가 정보가 필요합니다.

crossaxiscount 변수 : 라인 당 요소 수를 나타냅니다. 우리는 두 개의 열을 얻고 싶습니다.

엘’횡단 축 Flutter에서 우리가 스크롤하지 않는 축에 해당합니다. 스크롤 감각이 호출됩니다 주요 축. GridView의 기본 케이스와 마찬가지로 수직 스크롤링을 사용하는 경우 횡 방향 축은 가로입니다.

자세한 내용은 레이아웃 생성 전용 페이지를 참조하십시오.

패딩 필드 : GridView 위젯의 4면에 여유 공간을 정의합니다. 물론,이 마진은 요소 나 아래의 결과로 보이지 않습니다.

Childaspecto 필드 : 요소의 크기를 비율 형태로 식별합니다 (높이 너비).

기본적으로 GridView는 동일한 크기의 블록을 만듭니다.

우리는 시트가 있지만 비어 있습니다. 이 시트에 어린이 위젯을 추가하십시오.

내용을 넣으십시오

시트에는 이미지 영역, 제목 및 보조 텍스트가 포함되어야합니다.

GridView 위젯에서 어린이 업데이트 :

// TODO : 카드 그리드 구축 (102) 어린이 : [CARD (ClipBehavior : Clip.안티 리아, 아동 : 열 (Crossaxisalignment : Crossaxisalignment.시작, 어린이 : [Aspectratio (Aspectratio : 18.0/11.0, 어린이 : 이미지.자산 ( '자산/다이아몬드.png '),), 패딩 (패딩 : Const Edgeinsts.Fromltrb (16.0, 12.0, 16.0, 8.0), 아동 : 열 (CrossaxisAlignment : CrossaxisAlignment.시작, 어린이 : [Text ( 'Title'), Const Sizebox (높이 : 8.0), text ( 'secondary text'),],),],],),)]]]], 

이 코드는 어린이 위젯을 수직으로 가질 수있는 열 위젯 (열)을 추가합니다.

CrossaxisAlignment 매개 변수 : 필드는 CrossaxisAlignment 값을 지정합니다.시작, “”줄의 시작 “”측면에서 텍스트를 정렬합니다 “를 의미합니다.

위젯 종횡비 제공된 이미지 유형에 관계없이 표시된 이미지의 비율을 정의합니다.

요소 심 텍스트의 여백을 정의합니다.

두 위젯 텍스트 다른 하나는 8 개의 빈 공간 지점으로 배치되어 구분됩니다 (크기 박스))). 우리는 다른 요소를 만듭니다 열 그들에게 내부 마진을주기 위해.

프로젝트를 기록하십시오.

이 개요에서는 시트가 여백이 있고 모서리가 둥글고 그림자를 투사합니다 (고도를 나타냅니다). 전체 양식은 재료 설계 시스템에서 “컨테이너”라고합니다 (컨테이너라는 위젯 클래스와 혼동하지 않음).

컨테이너 외에도 시트의 모든 요소는 선택 사항입니다. 헤더 텍스트, 스티커 또는 아바타, 자막 텍스트, 분리기, 심지어 여드름과 아이콘을 추가 할 수 있습니다.

시트의 내용에 대한 자세한 내용은 자재 설계 지침 에서이 기사를 참조하십시오.

시트는 일반적으로 다른 시트가있는 컬렉션에 표시됩니다. 그리드의 컬렉션 형태로 배열하십시오.

6. 파일 모음을 만듭니다

화면에 여러 시트가 있으면 하나 이상의 컬렉션으로 그룹화됩니다. 컬렉션의 파일은 coplanar입니다. 그들은 모두 동일한 고도를 유지합니다 (즉, 선택하거나 움직이지 않을 때는 말하기가 여기에서 할 수 없습니다).

파일 모음을 만듭니다

현재, 우리의 시트는 Children Field : Gridview Grid 내부에 있습니다. 이것은 읽기 어려울 수있는 많은 양의 중첩 코드로 이어집니다. 코드 의이 부분을 필요한만큼 빈 시트를 생성하고 파일 목록을 반환 할 수있는 함수로 변환하겠습니다.

build () 함수 위의 개인 함수를 만듭니다 (밑줄로 시작하는 함수는 개인 API임을 기억하십시오)

// TODO : 카드 모음 (102) 목록 _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'), ], ), ), ], ), ); >, ); 반품 카드; > 

GridView 위젯의 Children Field에서 생성 된 파일 지정. 잊지 마십시오 GridView 위젯에 포함 된 모든 요소를이 새 코드로 바꾸십시오 ::

// TODO : 그리드보기 추가 (102) 본체 : GridView.count (Crossaxiscount : 2, 패딩 : Const Edgeinsts.모두 (16.0), Childaspectratio : 8.0/9.0, 어린이 : _buildgridcards (10) // 교체), 

프로젝트를 기록하십시오.

카드는 존재하지만 지금은 아무것도 표시하지 않습니다. 제품 데이터를 추가 할 때가 왔습니다.

제품 데이터를 추가하십시오

응용 프로그램에는 이미지, 이름 및 가격이 포함 된 일부 제품이 포함되어 있습니다. 파일에 이미 존재하는 위젯에 이것을 추가하십시오

그런 다음 집에서.DART, 새 패키지 가져 오기 및 데이터 모델에 제공된 일부 파일 :

가져 오기 패키지 : 플러터/재료.다트 '; 가져 오기 패키지 : intl/intl.다트 '; 수입 '모델/제품.다트 '; import 'model/products_repository.다트 '; 

마지막으로 _BuildGridCards ()를 수정하여 제품 정보를 검색하고 파일 에서이 데이터를 사용하십시오

// TODO : 카드 모음 만들기 (102) //이 전체 메소드 목록을 바꾸십시오 _BuildGridCards (buildContext Context) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > 최종 테마 테마 = 테마.(문맥); 최종 NumberFormat formatter = 숫자 형식.간단한 (지역 : 구내.로컬로 (컨텍스트).toString ()); 반품 제품.지도 ((제품) < 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, ), ], ), ), ), ], ), ); >))).tolist (); > 

알아 차렸다 : 컴파일 및 실행을 시작하기 전에 기다리십시오. 만들기위한 수정이 남아 있습니다.

텍스트를 작성하기 위해 테마 데이터를 사용합니다 테마 가치에서 BuildContext 현재의.

텍스트 형식에 대한 자세한 내용은 자료 설계 지침의 타이포그래피에 관한 기사를 참조하십시오. 테마의 서식에 대한 자세한 내용을 보려면 MDC-103을 사용한이 프로그래밍 워크숍 후에도 계속하십시오 : 재료 설계 테마 (색상, 모양, 고도 및 유형).

또한 값을 전송하기 위해 build () 함수를 수정하십시오 BuildContext 컴파일을 시작하기 전에 _buildgridcards ()에서 :

// TODO : 그리드보기 추가 (102) 본체 : GridView.count (Crossaxiscount : 2, 패딩 : Const Edgeinsts.모두 (16.0), Childaspectratio : 8.0/9.0, 어린이 : _buildgridCards (컨텍스트) // 코드 변경), 

핫 애플리케이션을 다시 시작하십시오.

파일 사이에 수직 공간을 추가하지 않는다는 것을 알 수 있습니다. 상단과 하단에 4 개의 마진이 있기 때문에.

프로젝트를 기록하십시오.

생성 된 데이터는 표시되지만 이미지는 불필요한 공간으로 둘러싸여 있습니다. 기본적으로 이미지는 필드와 함께 그려집니다 박스 피트 한정된 .Scaledown (이 경우). 이 값을 대체하십시오 .불필요한 공간을 확대하고 제거 할 수 있도록 fitwidth.

적합 필드 추가 : BoxFit 값처럼.fitwidth :

 // TODO : 상자 크기 조정 (102) 적합 : BoxFit.fitwidth, 

우리의 제품은 이제 응용 프로그램에 완벽하게 표시됩니다.

7. 축하해요 !

우리의 응용 프로그램은 기본 작업을 제공하여 사용자가 연결 화면에서 제품이 표시되는 홈 화면으로 이동할 수 있습니다. 몇 줄의 코드는 더 높은 응용 프로그램 막대 (제목과 3 개의 버튼 포함)와 파일 (응용 프로그램의 내용을 제시하기 위해)을 추가하기에 충분했습니다. 획득 한 홈 화면은 간단하고 기능적이며 기본 구조와 사용 가능한 콘텐츠가 있습니다.

MDC-102 애플리케이션의 완성 된 버전은 103-Starter_and_102-Complete Branch에서 사용할 수 있습니다 .

이 지점의 응용 프로그램과 페이지의 버전을 비교할 수 있습니다.

다음 단계

애플리케이션 막대, 시트, 텍스트 필드 및 페이지 상단에있는 버튼을 사용하면 이제 자료 플러터 라이브러리의 4 가지 주요 구성 요소를 사용했습니다. 자세한 내용은 재료 구성 요소 카탈로그를 참조하십시오.

응용 프로그램이 완벽하게 작동하더라도 브랜드 아이덴티티 나 특정 관점을 반영하지 않습니다. MDC-103 워크숍 : 재료 디자인 테마 사용 (색, 모양, 고도 및 유형), 이러한 구성 요소의 스타일을 개인화하여 현대적이고 역동적 인 브랜드를 표현합니다.

이 프로그래밍 워크숍의 실현은 시간과 합리적인 노력을 요구했습니다

전적으로 동의합니다

동의하거나 동의하지도 않습니다

전혀 동의하지 않습니다

재료 구성 요소를 계속 사용하고 싶습니다

전적으로 동의합니다

동의하거나 동의하지도 않습니다

전혀 동의하지 않습니다

달리 명시되지 않는 한,이 페이지의 내용은 Creative Commons 할당 4 라이센스에 의해 관리됩니다.0 및 코드 샘플은 Apache 2 라이센스에 의해 관리됩니다.0. 자세한 내용은 Google 개발자 사이트의 규칙을 참조하십시오. Java는 Oracle 및/또는 계열사의 등록 상표입니다.