Utwórz konto programistów Google Play – Centrum pomocy – Pandasuite, MDC -102: Struktura materiału i układ | Google Codelabs

MDC-102: Struktura materiału i układ

Projektowanie materiałów oferuje formaty nawigacyjne, które gwarantują dużą łatwość użytkowania. Jednym z najbardziej widocznych elementów jest górny pasek aplikacji.

Utwórz konto programisty Google Play

Poinformuj swoje dane osobowe, wybrany adres i hasło.

Zaakceptuj ogólne warunki sprzedaży (GTC).

Dodaj fajne zdjęcie.

Utwórz konto programisty Google Play

Procedura tworzenia konta programistów Google Play jest znacznie prostsza niż w Apple.

Połącz się z adresem Gmaila.

Zaakceptuj GTC.

Dostosuj opłaty rejestracyjne: pojedyncza płatność w wysokości 25 euro w celu opublikowania wszystkich wybranych wniosków !

Poinformuj informacje dotyczące Twojego konta: Nazwa programisty, adres e -mail i numer telefonu.

To odpowiedziało na twoje pytanie ?

Dziękujemy za komentarze, wystąpił problem z przesłaniem komentarzy. Spróbuj ponownie później.

Ostatnia aktualizacja 9 listopada 2021

Powiązane artykuły

  • Utwórz aplikację w konsoli Google Play
  • Wygeneruj certyfikat Androida P12
  • Wyeksportuj plik APK lub AAB
  • Opublikuj aplikację na Androida
  • Publikuj aplikację na Androida poza sklepem Play Store
  • Publikuj w Google Play Store

MDC-102: Struktura materiału i układ

Logo_components_color_2x_web_96dp.png

Komponenty materiałowe (MDC) pomaga programistom wdrażać projektowanie materiałów. Zaprojektowany przez zespół inżynierów i specjalistów od obsługi w Google, MDC oferuje dziesiątki eleganckich i funkcjonalnych komponentów interfejsu użytkownika. Jest dostępny na Android, iOS, sieć i trzepot.materiał.IO/Rozwój.

W warsztacie programowania MDC-101 użyłeś dwóch elementów komponentów materialnych, aby utworzyć stronę połączenia: pola tekstowe i przyciski zawierające animacje „atramentowe”. W tych podstawach wzbogacajmy naszą aplikację, dodając nawigację, strukturę i dane.

Cele warsztatowe

W tych warsztatach programowania utworzysz ekran główny dla Świątynia, Aplikacja e-commerce do sprzedaży odzieży i przedmiotów do domu. Ten ekran będzie zawierał:

  • Wyższy pasek aplikacji
  • Lista produktów w postaci siatki

Aplikacja e-commerce z wyższym paskiem aplikacji i siatką pełną produktów

Aplikacja e-commerce z wyższym paskiem aplikacji i siatką pełną produktów

Należy pamiętać, że ten warsztat programowania został zastąpiony materiałem 3, z wyjątkiem ekranów. Niemniej jednak przekazują te same informacje.

To warsztaty programowe to drugi z czterech warsztatów, które pomogą utworzyć aplikację dla produktu o nazwie Sanctuary. Zalecamy śledzenie wszystkich warsztatów programistycznych w kolejności, aby stopniowo postępować w zadaniach. Znajdziesz tutaj warsztaty programowania:

  • MDC-101 FUTRET: Podstawowe zasady komponentów materialnych
  • MDC-103 FUTRET: Użycie motywów projektowania materiału (kolor, kształty, wysokość i typ)
  • MDC-104 FUTRET: Zaawansowane komponenty projektowe materiału

Aplikacja e-commerce oparta na różowym i brązowym motywie, z wyższym paskiem aplikacji i asymetryczną siatką produktu, która przewija poziomo

Materiał Materiału Materiał i podsystemy w tych warsztatach programistycznych

  • Górny
  • Siatki
  • Karty

W tych warsztatach programistycznych użyjesz domyślnych komponentów dostarczanych przez materiał Turt. Nauczysz się dostosowywać je w sekcji MDC-103: Wykorzystanie motywów projektowania materiału (kolor, kształty, wysokość i typ).

Jak oceniłbyś swój poziom doświadczenia w rozwoju z trzepotem ?

2. Skonfiguruj środowisko programistyczne Trzepotanie

Do tych warsztatów potrzebujesz dwóch oprogramowania: The Flutter Sdk i wydawcy.

Możesz uruchomić warsztat programowania na jednym z następujących urządzeń:

  • Android lub fizyczne urządzenie iOS podłączone do komputera i ustawione w trybie programistów.
  • Symulator iOS (narzędzia XCode do instalacji).
  • Emulator Androida (który należy skonfigurować w Android Studio).
  • Przeglądarka (chrom jest wymagany do debugowania).
  • Jako system Windows, Linux lub MacOS. Musisz opracować swoją aplikację na platformie, na której planujesz ją wdrożyć. Na przykład, jeśli chcesz opracować aplikację komputerową Windows, musisz to zrobić w systemie Windows, aby uzyskać dostęp do odpowiedniego łańcucha kompilacji. Dowiedz się także o konkretnych wymaganiach dotyczących systemów operacyjnych, które są szczegółowo opisane w dokumentach.trzepotanie.Dev/Desktop.

3. Pobierz aplikację odlotu na warsztat programowania

Śledziłeś już warsztat MDC-101 ?

Jeśli skończyłeś warsztat programowania MDC-101, kod powinien być gotowy na rozpoczęcie tego warsztatu. Przejdź do następnego etapu: Dodaj wyższy pasek aplikacji.

Zaczynasz od zera ?

Pobierz aplikację odlotów początkowych

Aplikacja początkowa znajduje się w komponent-komponent-Flutter-Codelabs-102-Starter_and_101-Complete/MDC_100_Series .

… Lub sklonik warsztat z Github

Aby sklonować te warsztaty programowania z GitHub, uruchom następujące polecenia:

Git Clone https: // github.COM/komponentki materiałowe/komponenty materiałowe-kodelab-fluter.GIT CD-komponents-Flutter-Codelabs/MDC_100_Series GIT Checkout 102-Starter_and_101-Complete

Aby uzyskać pomoc, zobacz sekcję klonowania z github

Wybierz właściwą gałąź

Warsztaty programowe MDC-101 przy 104 polegają na sobie. Więc kiedy zakończysz kod warsztatu MDC-102, staje się on kodem początkowym warsztatów MDC-103. Kod jest podzielony na kilka gałęzi, które można wyświetlić listę za pomocą tego polecenia:

Git gałąź – -lista

Aby wyświetlić gotowy kod, przejdź do oddziału 103-starter_and_102 .

Otwórz projekt i wykonaj aplikację

  1. Otwórz projekt w wybranym przez ciebie wydawcy.
  2. Postępuj zgodnie z instrukcjami dotyczącymi wybranego wydawcy. Są one dostępne do akapitu „Uruchom aplikację” (wykonaj aplikację) na stronie Get Start> Drive Test Drive (pierwsze kroki> Test).

Udana operacja. Strona połączenia sanktuarium z warsztatu programowania MDC-101 musi być wyświetlana na urządzeniu.

Strona połączenia obejmująca pola

Strona połączenia obejmująca pola

Teraz, gdy ekran połączenia jest na miejscu, dodajmy kilka produktów do aplikacji.

4. Dodaj wyższy pasek aplikacji

Na razie, jeśli klikniesz przycisk „Dalej”, ekran główny jest wyświetlany z komunikatem „Zrobiłeś to!” (Udało Ci się.)). Doskonały. Jednak nasz użytkownik nie ma nic do roboty i nie wie, gdzie jest w aplikacji. Aby ci pomóc, nadszedł czas, aby dodać nawigację.

Tam nawigacja odnosi się do komponentów, interakcji, wskaźników wizualnych i architektury informacji, które pozwalają użytkownikom nawigować w aplikacji. Pozwala odkrywać treści i funkcje oraz łatwo wykonywać zadania.

Aby dowiedzieć się więcej, zapoznaj się z artykułem poświęconym nawigacji w instrukcjach projektowania materiałów.

Projektowanie materiałów oferuje formaty nawigacyjne, które gwarantują dużą łatwość użytkowania. Jednym z najbardziej widocznych elementów jest górny pasek aplikacji.

Możesz znać ten element pod nazwą „Pasek nawigacyjny” w iOS lub po prostu „pasek aplikacji” lub „nagłówek”.

Aby zaoferować użytkownikom szybki dostęp do innych działań, dodajmy wyższy pasek aplikacji.

Dodaj widżet AppBar

W domu.DART, dodaj pasek appbar do „rusztowania”, a następnie usuń podświetlony stał:

Return const rusztowanie (// todo: Dodaj pasek aplikacji (102) AppBar: AppBar (// todo: Dodaj przyciski i tytuł (102)), 

DodanieAppBar Na polu AppBar: rusztowanie pozwala nam uzyskać idealny i bezpłatny układ, pozostawiając pasek aplikacji u góry strony i poniżej ciała.

Szafot jest ważnym widżetem w MaterialApps. Zapewnia praktyczne interfejsy API do wyświetlania wszelkiego rodzaju bieżących elementów spraw, takich jak panele, proszki powiadomienia „Snackbar” i dolne elementy arkusza. Ułatwia nawet umieszczenie pływającego przycisku akcji.

Skonsultuj się z dokumentacją trzepotania, aby dowiedzieć się więcej o rusztowaniu.

Nagraj projekt. Po zaktualizowaniu sanktuarium kliknij Następny (Następnie) Aby wyświetlić ekran główny.

ekran wskazujący

ekran wskazujący

Element jest dobrze ustawiony, ale brakuje mu tytułu.

Dodaj widżet tekstowy

W domu.Dart, dodaj tytuł do paska aplikacji AppBar:

// TODO: Dodaj pasek aplikacji (102) AppBar: AppBar (// todo: Dodaj przyciski i tytuł (102) Tytuł: Const Text („Shrine”), // TODO: Dodaj przyciski końcowe (102) 

Nagraj projekt.

pasek aplikacji, którego tytuł jest sanktuarium

pasek aplikacji, którego tytuł jest sanktuarium

Być może zauważyłeś warianty dla każdej platformy. System projektowania materiałów bierze pod uwagę, że każda platforma (Android, iOS, Web) jest inna i że oczekiwania użytkowników są różne. Na przykład na iOS tytuły są prawie zawsze wyśrodkowane. Jest to domyślne zachowanie dostarczone przez UIKIT. Na Androidzie są one ustawione po lewej stronie. Dlatego jeśli używasz emulatora lub urządzenia z Androidem, tytuł powinien być wyrównany po lewej stronie. W przypadku symulatora lub urządzenia iOS należy go wyśrodkować.

Aby dowiedzieć się więcej, zapoznaj się z tym artykułem na temat adaptacji na różne platformy z projektowaniem materiałów.

Wiele pasków aplikacji ma przycisk obok tytułu. Dodaj ikonę menu do naszej aplikacji.

Dodaj przycisk IconButton na początku linii

Zawsze w domu.DART, zdefiniuj element iconButton dla wiodącego pola: paska aplikacji AppBar. (Umieść go przed polem tytułowym: zgodnie z początkiem od początku do końca linii):

 // TODO: Dodaj przyciski i tytuł (102) Wiodący: iconButton (ikona: const ikona (ikony.Menu, semanticlabel: „menu”,), onpressed: () < print('Menu button'); >, )), 

Nagraj projekt.

pasek aplikacji z tytułem i ikoną menu hamburgera

pasek aplikacji z tytułem i ikoną menu hamburgera

Ikona menu (zwana także „Hamburger”), pojawia się w pożądanej lokalizacji.

Klasa IconButton to praktyczny sposób zintegrowania ikon materialnych z aplikacją. Używa widżetu Ikona. Flutter ma pełną kolekcję ikon w klasie Ikony. Ikony są automatycznie importowane zgodnie z mapami kanałów „const”.

Aby dowiedzieć się więcej o klasie ikon, zobacz dokumentację trzepotania. Aby dowiedzieć się więcej o widżecie ikony, zobacz dokumentację trzepotania.

Możesz także dodać przyciski na końcu linii. W trzepotaniu przyciski te nazywane są „Działania”.

Warunki początek I KONIEC wyrażaj znaczenie czytania, niezależnie od zainteresowanego języka. Kiedy pracujesz w języku czytając od lewej do prawej, na przykład angielski, początek oznacza w lewo I KONIEC oznacza w prawo. W języku, który czyta od prawej do lewej, podobnie jak arabski, termin początek oznacza w prawo, I KONIEC oznacza w lewo.

Aby dowiedzieć się więcej o odwróceniu interfejsu użytkownika, zapoznaj się z instrukcjami projektowania materiałów dotyczących dwukierunkowości.

Dodaj działania

Jest wystarczająco dużo miejsca na dwa inne elementy ikonButton.

Dodaj je do instancji AppBar po tytule:

// TODO: Dodaj przyciski końcowe (102) Działania: [iconButton (ikona: const ikona (ikony.Wyszukaj, semanticLabel: „Search”), ontpresd: () < print('Search button'); >, ), IconButton (ikona: const icon (ikony.Tune, SemanticLabel: „Filter”,), onPresd: () < print('Filter button'); >, ),], 

Nagraj projekt. Twój ekran główny powinien powstać w następujący sposób:

Pasek aplikacji z sanktuarium jako menu tytułu i hamburgera oraz ikony badań i personalizacji na końcu

Pasek aplikacji z sanktuarium jako menu tytułu i hamburgera oraz ikony badań i personalizacji na końcu

Aplikacja ma teraz przycisk na początku linii, tytuł i dwie akcje po prawej stronie. Pasek aplikacji ma również efektpodniesienie ze względu na lekki odcień wskazujący, że jest on na innym poziomie niż treść.

W klasie ikony pole Semanticlabel to powszechny sposób na dodanie informacji o dostępności do trzepotania. Jest to system bardzo zbliżony do funkcji treści Androida i funkcji UIACCESILIBILE na iOS dostępność . Znajdziesz to na wielu kursach.

Informacje zawarte w tym polu umożliwiają dostarczanie informacji o czytnikach ekranu na temat roli tego przycisku.

Jeśli widżet nie ma pola semanticlabel :, możesz go zamknąć w widżecie Semantyka. Aby dowiedzieć się więcej o widżecie semantyki, zobacz dokumentację trzepotania.

5. Dodaj arkusz w siatce

Teraz, gdy nasza aplikacja jest nieco bardziej ustrukturyzowana, zorganizujmy jej treść, umieszczając je w plikach.

karty są niezależnymi elementami, które wyświetlają treść i działania związane z danym tematem. Oferują elastyczny sposób prezentacji podobnej treści w formie kolekcji.

Aby dowiedzieć się więcej, zobacz artykuł poświęcony plikom w instrukcjach projektowania materiałów.

Aby dowiedzieć się więcej o widżecie karty (arkusz), zapoznaj się z artykułem na temat tworzenia układów w Flutter.

Dodaj widżet Gridview

Zacznijmy od dodania arkusza pod górnym paskiem aplikacji. Obecnie widżet Karta (Arkusz) nie zawiera wystarczających informacji, aby wyraźnie ustawić się. Dlatego zamkniemy go w widżecie Gridview.

Wymień środek w korpusie elementu rusztowania na widżet Gridview:

// TODO: Dodaj widok siatki (102) Ciało: Gridview.Count (Crossaxiscount: 2, Padding: Const Edgeinsts.Wszystkie (16.0), Childasectratio: 8.0/9.0, // TODO: Zbuduj siatkę kart (102) Dzieci: [card ()],),), 

Przeanalizujmy ten kod. Widżet rozrywki wywołuje hrabstwo producenta (), ponieważ liczba wyświetlanych elementów można policzyć i nie jest nieskończona. Ale potrzebuje dodatkowych informacji, aby zdefiniować swój układ.

Zmienna CotaSaxiscount: Wskazuje liczbę elementów na linię. Chcemy uzyskać dwie kolumny.

L ‘Oś poprzeczna w trzepcie odpowiada osi, której nie przewijamy. Poczucie przewijania jest nazywane Oś główna. Jeśli używasz przewijania pionowego, podobnie jak domyślny przypadek z Gridview, oś poprzewka jest pozioma.

Aby dowiedzieć się więcej, zobacz stronę poświęconą tworzeniu układów.

Pole wyściółki: definiuje wolną przestrzeń po czterech stronach widżetu Gridview. Oczywiście, margines ten nie jest widoczny w wyniku elementu lub pod nim, ponieważ na chwilę nie umieszczono żadnego siatki dziecięcej.

Pole Childasecto: identyfikuje rozmiar elementów w postaci proporcji (szerokość wysokości).

Domyślnie Gridview tworzy bloki identycznych rozmiarów.

Mamy arkusz, ale jest pusty. Dodaj widżety dzieci do tego arkusza.

Umieść zawartość

Arkusze muszą zawierać obszary dla obrazu, tytuł i tekst wtórny.

Zaktualizuj dzieci z widżetu Gridview:

// todo: zbuduj siatkę kart (102) Dzieci: [karta (clipbehavior: klip.Antyialia, dziecko: kolumna (krzyżaksysysolizacja: Kotsaksysysolizacja.Start, dzieci: [aspektRatio (aspektRatio: 18.01.11.0, dziecko: obraz.Aktywa („Aktywa/diament.png '),), wyściółka (wyściółka: const edgeinsts.Fromltrb (16.0, 12.0, 16.0, 8.0), Dziecko: kolumna (krzyżaksysysolizacja: Kotsaksysysolizacja.Start, Dzieci: [tekst („tytuł”), const sizexbox (wysokość: 8.0), Text („tekst drugorzędny”),],),),],),)]], 

Ten kod dodaje widżet kolumny (kolumna), który pozwala na pionowo mieć widżety dzieci.

Parametr krzyżowo -ospałego: pole określa wartość krzyżowską.Rozpocznij, co oznacza „wyrównanie tekstu po„ uruchomieniu linii ”„ strona ”.

Widżet Aspectratio definiuje proporcje wyświetlonego obrazu, niezależnie od rodzaju dostarczonego obrazu.

Element Wyściółka definiuje margines tekstu.

Dwa widżety Tekst Jeden powyżej drugiego jest umieszczony i oddzielony osiem pustych punktów przestrzeni (Siasedbox)). Tworzymy inny element Kolumna Aby dać im margines wewnętrzny.

Nagraj projekt.

Pojedynczy element z obrazem, tytuł i tekst wtórny

Pojedynczy element z obrazem, tytuł i tekst wtórny

W tym przeglądzie widać, że arkusz jest ustawiony na marginesie, jego narożniki są zaokrąglone i projektuje cień (reprezentujący jego wysokość). Cała forma nazywa się „kontenerem” w systemie projektowania materiału (nie należy mylić z klasą widżetu o nazwie Container).

Oprócz pojemnika wszystkie elementy arkuszy są opcjonalne w materiale. Możesz dodać tekst nagłówka, naklejkę lub awatar, tekst napisów, separatory, a nawet pryszcze i ikony.

Aby dowiedzieć się więcej o treści arkuszy, zapoznaj się z tym artykułem w instrukcjach projektowania materiałów.

Arkusze są zazwyczaj wyświetlane w kolekcji z innymi arkuszami. Ułóż je w postaci kolekcji w siatce.

6. Utwórz zbiór plików

Kiedy na ekranie jest obecnych kilku arkuszy, są one zgrupowane w jednej lub więcej kolekcji. Pliki kolekcji to koplan: mają one taką samą wysokość w spoczynku (to znaczy, kiedy nie zostaną wybrane lub poruszone, czego nie zrobimy tutaj).

Utwórz zbiór plików

Na razie nasz arkusz znajduje się w polu dla dzieci: Gridview Grid. Prowadzi to do dużej ilości zagnieżdżonego kodu, który może być trudny do odczytania. Przekształćmy tę część kodu w funkcję, która pozwala wygenerować tyle pustych arkuszy, ile to konieczne i zwrócić listę plików.

Utwórz funkcję prywatną powyżej funkcji build () (pamiętaj, że funkcje rozpoczynające się od podważającej linii to prywatne interfejsy API):

// TODO: Zrób zbiór kart (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'), ], ), ), ], ), ); >, ); Karty powrotne; > 

Przypisz pliki generowane w polu dziecięcym widżetu Gridview. nie zapomnij Wymień wszystkie elementy zawarte w widżecie Gridview na ten nowy kod ::

// TODO: Dodaj widok siatki (102) Ciało: Gridview.Count (Crossaxiscount: 2, Padding: Const Edgeinsts.Wszystkie (16.0), Childasectratio: 8.0/9.0, Dzieci: _BuildGridCards (10) // zamień), 

Nagraj projekt.

Siatka elementów z obrazem, tytuł i tekst wtórny

Siatka elementów z obrazem, tytuł i tekst wtórny

Karty są obecne, ale na razie nic nie wyświetlają. Nadszedł czas na dodanie danych produktu.

Dodaj dane produktu

Aplikacja zawiera niektóre produkty z obrazami, nazwami i cenami. Dodaj to do widżetów już obecnych w pliku

Potem w domu.DART, zaimportuj nowy pakiet i niektóre pliki dostarczone dla modelu danych:

Pakiet importu: trzepot/materiał.Dart '; Pakiet importu: INTL/INTL.Dart '; Model/produkt importu.Dart '; Import „Model/Products_Repository.Dart '; 

Na koniec zmodyfikuj _buildGridCards (), aby pobrać informacje o produkcie i używać tych danych w plikach:

// TODO: Zrób zbiór kart (102) // Zastąp całą listę metod _buildGridCards (kontekst BuildContext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Motyw końcowy Temedata = motyw.z (kontekstu); Końcowy formatter formattera = numberFormat.Prostecurrent (lokalne: lokale.Localof (kontekst).ToString ()); Produkty zwrotne.Mapa ((produkt) < 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, ), ], ), ), ), ], ), ); >)).Notować (); > 

ZAUWAŻONY : Poczekaj przed uruchomieniem kompilacji i wykonania. Pozostaje modyfikacja do wykonania.

Aby sformatować tekst, używamy danych motywu Temedata z wartości BuildContext aktualny.

Aby dowiedzieć się więcej o formatowaniu tekstu, zapoznaj się z artykułem na temat typografii w instrukcjach projektowania materiałów. Aby dowiedzieć się więcej o formatowaniu z motywu, kontynuuj po tym warsztatach programowania z MDC-103: Zastosowanie tematów projektowania materiału (kolor, kształty, wysokość i typ).

Modyfikuj także funkcję build (), aby przesyłać wartość BuildContext na _BuildGridCards () przed uruchomieniem kompilacji:

// TODO: Dodaj widok siatki (102) Ciało: Gridview.Count (Crossaxiscount: 2, Padding: Const Edgeinsts.Wszystkie (16.0), Childasectratio: 8.0/9.0, dzieci: _BuildGridCards (kontekst) // Zmień kod), 

Uruchom ponownie gorącą aplikację.

Siatka elementów z obrazem, tytuł i cena

Siatka elementów z obrazem, tytuł i cena

Możesz zauważyć, że nie dodajemy pionowej przestrzeni między plikami. Ponieważ mają cztery marginesy przy górnej i dolnej.

Nagraj projekt.

Wyświetlane dane są wyświetlane, ale obrazy są otoczone niepotrzebną przestrzenią. Domyślnie obrazy są rysowane z polem Boxfit zdefiniowane .Skaledown (w tym przypadku). Zastąpić tę wartość .FitWidth, aby mogła powiększyć i usunąć niepotrzebną przestrzeń.

Dodaj pole do dopasowania: jak wartość Boxfit.FitWidth:

 // todo: dostosuj rozmiar pudełka (102) dopasowanie: boxfit.FitWidth, 

Siatka artykułów z przyciętym obrazem, tytuł produktu i cena

Siatka artykułów z przyciętym obrazem, tytuł produktu i cena

Nasze produkty są teraz doskonale wyświetlane w aplikacji.

7. Gratulacje !

Nasza aplikacja oferuje podstawową operację umożliwiającą użytkownikowi przejście z ekranu połączenia do ekranu głównego, na którym wyświetlane są produkty. Kilka wierszy kodu wystarczyło, aby dodać wyższy pasek aplikacji (z tytułem i trzema przyciskami) i plików (aby przedstawić treść naszej aplikacji). Uzyskany ekran główny jest prosty i funkcjonalny i ma podstawową strukturę i treść użyteczną.

Wykończona wersja aplikacji MDC-102 jest dostępna w oddziale 103-starter_and_102 .

Możesz porównać swoją wersję na stronie z zastosowaniem tej gałęzi.

Następujące kroki

Z paskiem aplikacji, arkuszem, polem tekstowym i przyciskiem znajdującym się u góry strony, użyliśmy teraz czterech głównych elementów biblioteki Flutter. Aby dowiedzieć się więcej, zobacz katalog komponentów materialnych.

Nawet jeśli nasza aplikacja działa idealnie, nie odzwierciedla tożsamości marki ani określonego punktu widzenia. W warsztatach MDC-103: Korzystanie z motywów projektowania materiału (kolor, kształty, wysokość i typ) spersonalizujemy styl tych komponentów, aby wyrazić nowoczesną i dynamiczną markę.

Realizacja tego warsztatu programowania poprosiła mnie o czas i rozsądne wysiłki

Kompletnie się zgadzam

Żaden nie zgadza się ani nie zgadzam

W ogóle nie zgadzam się

Chcę nadal używać komponentów materialnych

Kompletnie się zgadzam

Żaden nie zgadza się ani nie zgadzam

W ogóle nie zgadzam się

O ile nie wskazano inaczej, zawartość tej strony podlega licencji Creative Commons Cassment 4.0, a próbki kodu podlegają licencji Apache 2.0. Aby uzyskać więcej informacji, zobacz reguły witryny programistów Google. Java jest zarejestrowanym znakiem towarowym Oracle i/lub jej spółek stowarzyszonych.