MDC-102: Malzeme yapısı ve düzen

Malzeme Tasarımı, büyük kullanım kolaylığı garanti eden navigasyon formatları sunar. En görünür bileşenlerden biri üst uygulama çubuğu.

Bir Google Play geliştirici hesabı oluşturun

Kişisel bilgilerinizi, seçtiğiniz adresinizi ve şifrenizi bilgilendirin.

Genel Satış Koşullarını Kabul Edin (GTC).

Kendinizin güzel bir fotoğrafını ekleyin.

Bir Google Play geliştirici hesabı oluşturun

Bir Google Play geliştirici hesabı oluşturma prosedürü Apple’dan çok daha basit.

Gmail adresinize bağlanın.

GTC’yi kabul et.

Kayıt Ücretlerini Ayarlayın: Seçtiğiniz tüm başvuruları yayınlamak için 25 Euro’luk tek bir ödeme !

Hesabınızla ilgili bilgileri bilgilendirin: Geliştirici adı, e -posta adresi ve telefon numarası.

Bu sorunuzu cevapladı ?

Yorumlar için teşekkür ederiz Yorumlarınızı göndermek için bir sorun vardı. lütfen daha sonra tekrar deneyiniz.

9 Kasım 2021’deki son güncelleme

İlişkili Makaleler

• Google Play konsolunda bir uygulama oluşturun
• Android P12 sertifikasını oluşturun
• APK veya AAB dosyasını dışa aktarın
• Bir Android uygulaması yayınlayın
• Play Store’un dışında bir Android uygulaması yayınlayın
• Google Play Store’da yayınlayın

MDC-102: Malzeme yapısı ve düzen

Malzeme Bileşenleri (MDC), geliştiricilerin malzeme tasarımını uygulamalarına yardımcı olur. Google’daki bir mühendis ve kullanıcı deneyimi uzmanından oluşan bir ekip tarafından tasarlanan MDC, düzinelerce zarif ve işlevsel kullanıcı arayüzü bileşeni sunuyor. Android, iOS, Web ve Flutter için kullanılabilir.malzeme.IO/Geliştir.

MDC-101 Programlama Atölyesi’nde, bir bağlantı sayfası oluşturmak için iki malzeme bileşeni öğesi kullandınız: “Mürekkep” animasyonlarını içeren metin alanları ve düğmeler. Bu bazlarda, navigasyon, yapı ve veriler ekleyerek uygulamamızı zenginleştirelim.

Atölye hedefleri

Bu programlama atölyesinde, için bir ana ekran oluşturacaksınız Tapınak, Ev için giyim ve eşya satışı için bir e-ticaret başvurusu. Bu ekran şunları içerecektir:

• Daha yüksek bir uygulama çubuğu
• Bir ızgara şeklinde ürün listesi

Bu programlama atölyesinin, ekran görüntüleri hariç Material 3 ile değiştirildiğini lütfen unutmayın. Yine de aynı bilgileri aktarıyorlar.

Bu programlama atölyesi, Sanctuary adlı bir ürün için bir uygulama oluşturmanıza yardımcı olacak dört çalıştaydan ikincisidir. Tüm programlama atölyelerini sırayla takip etmenizi, görevlerde yavaş yavaş ilerlemenizi öneririz. Programlama atölyelerinizi burada bulacaksınız:

• MDC-101 Flutter: Malzeme Bileşenlerinin Temel Prensipleri
• MDC-103 Flutter: Malzeme Tasarımı Temaları (Renk, Şekiller, Yükseklik ve Tip)
• MDC-104 Flutter: Gelişmiş Malzeme Tasarım Bileşenleri

Bu programlama atölyesinde malzeme çırpınan malzeme bileşenleri ve alt sistemleri

• Üst
• Izgara
• Kart

Bu programlama atölyesinde, malzeme flutter tarafından sağlanan varsayılan bileşenleri kullanacaksınız. Bunları MDC-103 bölümünde özelleştirmeyi öğreneceksiniz: Malzeme Tasarımı Temalarının Kullanımı (renk, şekiller, yükseklik ve tip).

Flutter ile geliştirme deneyim seviyenizi nasıl değerlendirirsiniz? ?

2. Flutter geliştirme ortamını yapılandırın

Bu atölye için iki yazılıma ihtiyacınız var: Flutter SDK ve bir yayıncı.

Programlama atölyesini aşağıdaki cihazlardan birinde çalıştırabilirsiniz:

• Bilgisayarınıza bağlı ve geliştirici modunda ayarlanan bir android veya fiziksel iOS cihazı.
• İOS simülatörü (yüklenecek xcode araçları).
• Android Emulator (Android Studio’da yapılandırılması gerekir).
• Bir tarayıcı (hata ayıklama için krom gereklidir).
• Windows, Linux veya MacOS masaüstü olarak. Uygulamanızı dağıtmayı planladığınız platformda geliştirmelisiniz. Örneğin, bir Windows masaüstü uygulaması geliştirmek istiyorsanız, uygun derleme zincirine erişmek için Windows’ta yapmalısınız. Ayrıca, Dokümanlar üzerinde ayrıntılı olarak açıklanan işletim sistemleri için özel gereksinimler hakkında bilgi edinin.çırpmak.Dev/Masaüstü.

3. Programlama Atölyesi için Kalkış Uygulamasını İndirin

MDC-101 çalıştayını zaten izlediniz ?

MDC-101 Programlama Atölyesini bitirdiyseniz, kodunuz bu atölyeye başlamaya hazır olmalı. Bir sonraki aşamaya gidin: Daha yüksek bir uygulama çubuğu ekleyin.

Sıfırdan başlıyorsun ?

Başlangıç ​​Atölyesi Kalkış Başvurusunu İndirin

Başlangıç ​​uygulaması malzeme bileşeni-flutter-codelabs-102 starter_and_101-complete/mdc_100_series .

… Veya Github’dan atölyeyi klonlayın

GitHub’dan bu programlama atölyesini klonlamak için aşağıdaki komutları çalıştırın:

Git klonu https: // github.Com/malzeme bileşenleri/malzeme-bileşenler.GIT CD Malzeme Biçimleri-Flutter-CodeBs/MDC_100_SERIES GIT CHECTOUT 102-Starter_and_101-Complete

Yardım için Github’dan klonlama bölümüne bakın

Doğru Şubeyi Seçin

104’teki MDC-101 programlama atölyeleri birbirine güveniyor. MDC-102 çalıştayının kodunu bitirdiğinizde, MDC-103 Atölyesi’nin başlangıç ​​kodu olur. Kod, bu komutu kullanarak listeyi görüntüleyebileceğiniz birkaç dala ayrılmıştır:

Git Şube -liste

Bitmiş kodu görüntülemek için 103-starter_and_102-complete şubesine gidin .

Projeyi açın ve uygulamayı yürüt

1. Projeyi seçtiğiniz yayıncıya açın.
2. Seçtiğiniz yayıncıyla ilgili talimatları izleyin. Başlatma> Test Sürücüsü sayfasında “Uygulamayı Çalıştırın” paragrafı (uygulamayı yürüt) tarafından erişilebilirler (ilk adımlar> test).

Başarılı operasyon. MDC-101 Programlama Atölyesi’nden Sanctuary Bağlantı sayfası cihazınızda görüntülenmelidir.

Artık bağlantı ekranı yerinde olduğuna göre, uygulamaya bazı ürünler ekleyelim.

4. Daha yüksek bir uygulama çubuğu ekleyin

Şimdilik, “Sonraki” düğmesine tıklarsanız, ana ekran “Yaptınız!” (Başardın.)). Mükemmel. Ancak, kullanıcımızın yapacak hiçbir şeyi yoktur ve uygulamada nerede olduğunu bilmiyor. Size yardımcı olmak için navigasyon ekleme zamanı.

Orada navigasyon Kullanıcıların bir uygulamada gezinmesine izin veren bileşenler, etkileşimler, görsel göstergeler ve bilgi mimarisini ifade eder. İçerik ve özellikleri keşfetmenizi ve görevleri kolayca gerçekleştirmenizi sağlar.

Daha fazla bilgi edinmek için, Malzeme Tasarım Talimatlarında navigasyona ayrılan makaleye danışın.

Malzeme Tasarımı, büyük kullanım kolaylığı garanti eden navigasyon formatları sunar. En görünür bileşenlerden biri üst uygulama çubuğu.

Bu öğeyi iOS altında “navigasyon çubuğu” veya basitçe “uygulama çubuğu” veya “başlık” adı altında bilebilirsiniz.

Kullanıcılara diğer eylemlere hızlı erişim sunmak için daha yüksek bir uygulama çubuğu ekleyelim.

Bir Appbar Widget ekleyin

Evde.Dart, “iskele” için bir appbar ekleyin, ardından vurgulanan constu silin:

Const iskele (// todo: uygulama çubuğu ekle (102) appbar: appbar (// todo: düğmeler ve başlık ekle (102)), 

EklenmesiAppbar Appbar Field: İskele, mükemmel ve ücretsiz bir düzen elde etmemizi sağlar, uygulama çubuğunu sayfanın üstünde ve gövdenin altında bırakır.

İskele MaterialApps’ta önemli bir widget. Paneller, “Snackbar” bildirim çubukları ve alt tabaka elemanları gibi her türlü mevcut konu bileşenini görüntülemek için pratik API’ler sağlar. Bir yüzen eylem düğmesinin yerleştirilmesini bile kolaylaştırır.

İskele hakkında daha fazla bilgi edinmek için Flutter belgelerine danışın.

Projeyi kaydedin. Tapınak güncellendikten sonra tıklayın Sonraki (Aşağıda) Ana ekranı görüntülemek için.

Eleman iyi konumlandırılmış, ancak bir başlık yok.

Bir metin widget ekleyin

Evde.Dart, Appbar uygulama çubuğuna bir başlık ekleyin:

// todo: uygulama çubuğu ekle (102) appbar: appbar (// todo: düğmeler ve başlık ekle (102) başlık: const text ('tapınak'), // todo: fraging düğmeleri ekle (102) 

Projeyi kaydedin.

Her platform için varyasyonları fark etmiş olabilirsiniz. Malzeme Tasarım Sistemi, her platformun (Android, iOS, Web) farklı olduğunu ve kullanıcı beklentilerinin farklı olduğunu dikkate alır. Örneğin, iOS’ta başlıklar neredeyse her zaman ortalanmıştır. Bu, Uikit tarafından sağlanan varsayılan davranıştır. Android’de solda dizilmişler. Bu nedenle, bir emülatör veya bir Android cihazı kullanıyorsanız, başlığınız solda hizalanmalıdır. Bir simülatör veya bir iOS cihazı durumunda,.

Daha fazla bilgi edinmek için, malzeme tasarımı ile farklı platformlara uyum hakkındaki bu makaleye danışın.

Birçok uygulama çubuğunun başlığın yanında bir düğmesi vardır. Uygulamamıza bir menü simgesi ekleyin.

Çizginin başlangıcına bir Iconbutton düğmesi ekleyin

Her zaman evde.Dart, önde gelen alan için bir iconbutton öğesi tanımlayın: Appbar uygulama çubuğu. (Başlık alanının önüne yerleştirin: Başlangıçtan başından sonuna kadar çizginin sonuna göre):

 // Todo: Düğmeler ve Başlık Ekle (102) Lider: Iconbutton (simge: const simgesi (simgeler.Menü, Semanticlabel: 'Menü',), Onpresyon: () < print('Menu button'); >, )), 

Projeyi kaydedin.

Menü simgesi (“hamburger” olarak da adlandırılır), istenen yerde görünür.

Sınıf İkonbutton Materyal simgelerini uygulamanıza entegre etmenin pratik bir yoludur. Bir widget kullanıyor Simge. Flutter, sınıfta tam bir simgeler koleksiyonuna sahiptir İkonlar. Simgeler otomatik olarak “const” kanal eşlemelerine göre aktarılır.

Simgeler sınıfı hakkında daha fazla bilgi edinmek için Flutter belgesine bakın. Icon Widget hakkında daha fazla bilgi edinmek için Flutter belgesine bakın.

Çizginin sonuna düğmeler de ekleyebilirsiniz. Flutter’da, bu düğmelere “eylemler” denir.

Şartlar başlangıç Ve SON İlgili dilden bağımsız olarak okumanın anlamını ifade edin. İngilizce gibi soldan sağa bir dil okuma, başlangıç araç Sola Ve SON araç Sağa. Arapça gibi sağdan sola okuyan bir dilde, terim başlangıç araç Sağa, Ve SON araç Sola.

Kullanıcı arayüzünün tersine çevrilmesi hakkında daha fazla bilgi edinmek için, çift yönlülükle ilgili malzeme tasarım talimatlarına danışın.

Eylem ekle

Diğer iki ikonbutton öğesi için yeterli yer var.

Bunları başlıktan sonra AppBar örneğine ekleyin:

// Todo: İz düğmeleri ekleyin (102) Eylemler: [iconbutton (simge: const simgesi (simgeler.Ara, SemanticLabel: 'Ara',), Ontpresd: () < print('Search button'); >, ), İconbutton (simge: const simgesi (simgeler.Tune, SemanticLabel: 'Filtre',), OnPresd: () < print('Filter button'); >, ),], 

Projeyi kaydedin. Ana ekranınız aşağıdaki gibi ortaya çıkmalıdır:

Uygulamanın şimdi çizginin başında bir düğmesi, bir başlık ve sağda iki eylem var. Uygulama çubuğunun ayrıca bir etkisi vardıryükseklik İçeriğinkinden farklı bir seviyede olduğunu gösteren hafif bir gölge nedeniyle.

Bir simge sınıfında, alan Semantiklabel Çarpışmaya erişilebilirlik bilgileri eklemenin yaygın bir yoludur. IOS AccessiblityLabelbel’de Android içerik ifadesine ve UIAccessibility işlevselliğine çok yakın bir sistemdir . Birçok kursta bulacaksınız.

Bu alanda yer alan bilgiler, ekran okuyucularına bu düğmenin rolü hakkında bilgi vermeyi mümkün kılar.

Bir widget’ın bir semantiklabel alanı yoksa :, bir widget’ta kapsülleyebilirsiniz Semantik. Semantik widget’ı hakkında daha fazla bilgi edinmek için Flutter belgelerine bakın.

5. Bir ızgaraya bir sayfa ekleyin

Artık uygulamamız biraz daha yapılandırılmış olduğuna göre, içeriğini dosyalara yerleştirerek düzenleyelim.

kart belirli bir konu ile ilişkili içeriği ve eylemleri görüntüleyen bağımsız unsurlardır. Bir koleksiyon şeklinde benzer içeriği sunmanın esnek bir yolunu sunarlar.

Daha fazla bilgi edinmek için, malzeme tasarım talimatlarındaki dosyalara ayrılan makaleye bakın.

Kart widget’ı (sayfa) hakkında daha fazla bilgi edinmek için Flutter’da Düzenlerin Oluşturulması Makalesine bakın.

Bir Gridview Widget ekleyin

Üst uygulama çubuğunun altına bir sayfa ekleyerek başlayalım. Şu anda widget Kart (Sayfa) kendinizi gözle görülür bir şekilde konumlandırmak için yeterli bilgi içermez. Bu nedenle onu bir widget’ta kapsülleyeceğiz Gridview.

İskele elemanının gövdesindeki merkezi bir Gridview widget’ıyla değiştirin:

// Todo: Bir Izgara Görünümü Ekle (102) Vücut: Gridview.Sayım (Crossaxiscount: 2, dolgu: const edgeinsts.Hepsi (16.0), Childaspectratio: 8.0/9.0, // Todo: Bir Kart Izgarası (102) Çocuk Yapın: [Card ()],),,), 

Bu kodu analiz edelim. Gericilik widget’ı üretici sayımını () çağırır, çünkü gösterdiği öğelerin sayısı sayılabilir ve sonsuz değildir. Ancak düzenini tanımlamak için ek bilgiye ihtiyacı var.

Crossaxiscount Değişkeni: Satır başına eleman sayısını gösterir. İki sütun almak istiyoruz.

L ‘enine eksen Flutter’da kaydırmadığımız eksene karşılık gelir. Kaydırma duygusu denir ana eksen. Gridview ile varsayılan durum gibi dikey kaydırma kullanırsanız, enine eksen yataydır.

Daha fazla bilgi edinmek için, düzen oluşturmaya adanmış sayfaya bakın.

Dolgu Alanı: Gridview widget’ın dört tarafında boş bir alan tanımlar. Tabii ki, bu marj elemanın bir sonucu olarak veya altında görünmez, çünkü şu an için bu öğenin yanına henüz bir çocuk gridview yerleştirilmemiştir.

Childaspecto Alanı: Elementlerin boyutunu oranlar şeklinde tanımlar (yükseklikte genişlik).

Varsayılan olarak, Gridview aynı boyutta bloklar oluşturur.

Bir sayfamız var ama boş. Bu sayfaya çocukların widget’larını ekleyin.

İçeriği koy

Sayfalar bir görüntü, başlık ve ikincil metin alanları içermelidir.

Gridview widget’ından çocukları güncelleyin:

// Todo: Bir Kart Izgarası (102) Çocuk Yapın: [Kart (Klip Bahçesi: Klip.Antialias, Çocuk: Sütun (Crossaxisalignment: Crossaxisalignment.Başla, Çocuklar: [Aspectratio (Aspectratio: 18.0/11.0, çocuk: resim.Varlık ('Varlıklar/Elmas.png '),), dolgu (dolgu: const edgeinsts.fromltrb (16.0, 12.0, 16.0, 8.0), Çocuk: Sütun (Crossaxisalignment: Crossaxisalign.Başlayın, Çocuklar: [Metin ('Başlık'), Const SimedBox (Yükseklik: 8.0), metin ('ikincil metin'),],),),],),)]]], 

Bu kod, çocukların widget’larına dikey olarak sahip olmanızı sağlayan bir sütun widget (sütun) ekler.

Crossaxisalignment Parametresi: Alan Crossaxisaligning değerini belirtir.Başlangıç, yani “metni” çizginin başlangıcı “” tarafına hizalayın “.

Widget Aspectratio Sağlanan görüntü türüne bakılmaksızın, görüntülenen görüntünün oranlarını tanımlar.

Eleman Dolgu malzemesi Metin için bir marj tanımlar.

İki widget Metin diğerinin üstünde, sekiz boş alan noktasıyla yerleştirilir ve ayrılır (Büyük kutu)). Başka bir unsur yaratıyoruz Kolon onlara iç kenar boşlukları vermek için.

Projeyi kaydedin.

Bu genel bakışta, tabakanın bir marjla konumlandırıldığını, köşeleri yuvarlak olduğunu ve bir gölge yansıtır (yüksekliğini temsil eden) görebilirsiniz. Tüm forma malzeme tasarım sisteminde “konteyner” olarak adlandırılır (konteyner adı verilen widget sınıfı ile karıştırılmamalıdır).

Konteyner dışında, tabakaların tüm unsurları malzeme olarak isteğe bağlıdır. Başlık metni, bir etiket veya avatar, bir altyazı metni, ayırıcılar ve hatta sivilceler ve simgeler ekleyebilirsiniz.

Sayfaların içeriği hakkında daha fazla bilgi edinmek için Malzeme Tasarım Talimatları’nda bu makaleye danışın.

Sayfalar genellikle diğer çarşaflarla bir koleksiyonda görüntülenir. Bunları bir ızgarada bir koleksiyon şeklinde düzenleyin.

6. Bir Dosya Koleksiyonu Oluşturun

Bir ekranda birkaç sayfa bulunduğunda, bir veya daha fazla koleksiyonda gruplandırılırlar. Bir koleksiyonun dosyaları Coplanar’dır: dinlenmede aynı yüksekliğe sahiptirler (yani seçilmedikleri veya taşınmadıklarında, burada yapmayacağımız).

Bir Dosya Koleksiyonu Oluşturun

Şimdilik sayfamız çocuk alanının içine konumlandırılmıştır: Gridview Grid. Bu, okunması zor olabilecek büyük miktarda iç içe kodlamaya yol açar. Kodun bu kısmını, gerektiği kadar çok boş çarşafın oluşturulmasına izin veren bir işlev haline getirelim ve bir dosya listesi döndürelim.

Build () işlevinin üstünde özel bir işlev oluşturun (bir alt çizgiyle başlayan işlevlerin özel API’ler olduğunu unutmayın):

// Todo: Bir Kart Koleksiyonu Yap (102) Liste _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'), ], ), ), ], ), ); >, ); İade kartları; > 

Gridview Widget’ın Children alanında oluşturulan dosyaları atayın. unutmayın Gridview widget’ında bulunan tüm öğeleri bu yeni kodla değiştirin ::

// Todo: Bir Izgara Görünümü Ekle (102) Vücut: Gridview.Sayım (Crossaxiscount: 2, dolgu: const edgeinsts.Hepsi (16.0), Childaspectratio: 8.0/9.0, Çocuklar: _Buildgridcards (10) // değiştir), 

Projeyi kaydedin.

Kartlar mevcut, ancak şu an hiçbir şey göstermiyorlar. Ürün verileri ekleme zamanı geldi.

Ürün Verileri Ekle

Uygulama, görüntüleri, isimleri ve fiyatları içeren bazı ürünler içerir. Bunu dosyada bulunan widget’lara ekleyin

O zaman evde.Dart, yeni bir paket ve bir veri modeli için sağlanan bazı dosyaları içe aktarın:

İthalat 'Paketi: Flutter/Malzeme.Dart oyunu '; İçe Aktar: INTL/INTL.Dart oyunu '; İçe Aktar 'Model/Ürün.Dart oyunu '; İçe Aktar "Model/Ürünler_repository.Dart oyunu '; 

Son olarak, ürün bilgilerini almak ve bu verileri dosyalarda kullanmak için _buildgridcards () değiştirin:

// Todo: Bir kart koleksiyonu yapın (102) // Bu yöntem listesinin tamamını değiştir _BuildGridcards (BuildContext Context) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Final themedata teması = tema.(bağlam); Final NumberFormat Formatter = NumberFormat.SimpleCurrent (Yerel: Tesisler.Localof (bağlam).toString ()); Dönüş Ürünleri.Harita ((ürün) < 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, ), ], ), ), ), ], ), ); >)).Listeye (); > 

ALGILANAN : Derlemeyi ve yürütmeyi başlatmadan önce bekleyin. Yapacak bir değişiklik var.

Metni biçimlendirmek için tema verilerini kullanıyoruz TEMEDATA değerinden BuildContext akım.

Metnin biçimlendirilmesi hakkında daha fazla bilgi edinmek için Malzeme Tasarım Talimatlarında Tipografi Makalesine bakın. Bir temadan biçimlendirme hakkında daha fazla bilgi edinmek için MDC-103 ile bu programlama atölyesinden sonra devam edin: Malzeme Tasarımı Temaları (Renk, şekil, yükseklik ve tip) kullanımı.

Ayrıca değeri iletmek için Build () işlevini değiştirin BuildContext Derlemeyi başlatmadan önce _buildgridcards () ‘da:

// Todo: Bir Izgara Görünümü Ekle (102) Vücut: Gridview.Sayım (Crossaxiscount: 2, dolgu: const edgeinsts.Hepsi (16.0), Childaspectratio: 8.0/9.0, Çocuklar: _BuildGridcards (Bağlam) // Kod değiştir), 

Sıcak uygulamayı yeniden başlatın.

Dosyalar arasında dikey boşluk eklemediğimizi fark edebilirsiniz. Çünkü üstte dört kenar boşluğu var.

Projeyi kaydedin.

Üretilen veriler görüntülenir, ancak görüntüler gereksiz bir alanla çevrilidir. Varsayılan olarak, görüntüler alanla çizilir Boxfit tanımlanmış .Scaledown (bu durumda). Bu değeri ile değiştirin .Fitwidth, gereksiz alanı yakınlaştırabilir ve kaldırabilir.

Bir Fit Alanı Ekle: BoxFit değerini beğenin.Fitwidth:

 // todo: Kutu boyutunu ayarlayın (102) Uyum: Boxfit.fitwidth, 

Ürünlerimiz artık uygulamada mükemmel bir şekilde görüntüleniyor.

7. Tebrikler !

Uygulamamız, kullanıcının bağlantı ekranından ürünlerin görüntülendiği bir ana ekrana gitmesine izin veren temel işlem sunuyor. Daha yüksek bir uygulama çubuğu (başlık ve üç düğme ile) ve dosyalar (uygulamamızın içeriğini sunmak için) eklemek için birkaç satır kod yeterliydi. Elde edilen ana ekran basit ve işlevseldir ve temel bir yapıya ve kullanılabilir içeriğe sahiptir.

MDC-102 uygulamasının tamamlanmış sürümü 103-starter_and_102-complete şubesinde mevcuttur .

Sayfadaki sürümünüzü bu şubenin uygulanmasıyla karşılaştırabilirsiniz.

Aşağıdaki adımlar

Uygulama çubuğu, sayfa, metin alanı ve sayfanın üstünde bulunan düğme ile şimdi malzeme flutter kütüphanesinin dört ana bileşenini kullandık. Daha fazla bilgi edinmek için malzeme bileşenlerinin kataloğuna bakın.

Uygulamamız mükemmel çalışsa bile, bir marka kimliğini veya belirli bir bakış açısını yansıtmaz. MDC-103 Çalıştayı: Malzeme Tasarımı Temalarının (Renk, Şekil, Yükseklik ve Tip) Kullanımı, Modern ve Dinamik Bir Marka Express için bu bileşenlerin stilini kişiselleştireceğiz.

Bu programlama atölyesinin gerçekleşmesi benden bir süre ve makul çabalar istedi

Tamamen katılıyorum

Ne katılıyorum ne de katılıyorum

Hiç katılıyorum

Malzeme bileşenlerini kullanmaya devam etmek istiyorum

Tamamen katılıyorum

Ne katılıyorum ne de katılıyorum

Hiç katılıyorum

Aksi belirtilmedikçe, bu sayfanın içeriği bir Creative Commons Atama 4 Lisansı tarafından yönetilir.0 ve kod örnekleri bir Apache 2 lisansı tarafından yönetilir.0. Daha fazla bilgi için Google Geliştiricileri Sitesinin Kurallarına bakın. Java, Oracle ve/veya bağlı şirketlerinin kayıtlı ticari markasıdır.