Learn To Design Apple Product Customization Page

Опубликовано: 28 Июль 2021
на канале: FlutterShipp

216

Source Code: https://github.com/irajeshh/FlutterShip

Music Credits: • Video
Design Credits: https://www.apple.com/in/shop/buy-mac...

What Is Flutter?
Flutter is an open-source UI software development kit created by Google. It is used to develop cross-platform apps for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.

In this flutter tutorial, I'm going to teach on how to design an
E-commerce app page for beginners. This flutter tutorial is based on the web design of the apple website viewed on a Vivo phone.

For your Flutter-based Shopping app development, this design tutorial video about customizing a product will be very much helpful.

This flutter app UI design is inspired by the official Apple shopping website's product details page.

Before you are purchasing an apple mac, mac mini m1, or any other product, you are allowed to customize the product's features by an extend.

For this beginner's tutorial on flutter, I used windows OS and vs code, yes you can develop flutter apps on android studio too. Before start programming kindly learn how to install flutter in windows. I prefer to use Firebase as a backend for most of the flutter apps I build.

The flutter widgets I used for this video are Column, ListView, Container, ExpansionTile, and ListTile.

Got an idea to recreate a similar functionality of the apple products customization page on a flutter application.
In case you are doing shopping-related projects, this customization might be useful for you.

The page is a column with a fixed list tile and a listview.

buyTile:
The stationary buyTile simply holds the total price of the product in the title. And the EMI cost in the subtitle.
The trailing is the buyButton, which shows a confirmation dialogue for the product.

ListView:
As we have this listView inside a column, we've set the shrinkwrap value to false.
In case you use listView instead of a column, you need to shrinkwrap value to true.

The moving listview contains three sections.
1) ProductImg widget
2) ProductTile widget
3) And fianlly a listview widget full of Expansion tiles.

ProductImg widget is a container in the ratio of 16:9.
The decoration has a decorationImage, and I gave NetworkImage as its child. But in practice I'll always use my
custom widget called Img();
I'll release a separate video about that in the upcoming days.

The ProductTile widget contains the product title and a dynamically changing description.
The description strings are changing concerning the customization you are performing.

The listview widget is a listview builder for the options we have given in our model class called ProductOption.

The ProductOption class has a title, description, and a list of options.

Let us come to the Options model. which has three objects.
Title, price, and the optionType. To compare the two options easily, I
extended the Option class with an equatable class.

optionType helps us to differentiate the product features. Let say memory, storage, ethernet ...Etc.
Yes, you can create a separate class like MemoryOption, StorageOption, And EtherNet Option. But here I'm just showing you an alternate method, It's completely, your wish to change it.

Let us jump into the expansion tile,
the children are rendered based on the list of options we have given.

Each option is a ListTile with the title and price of the option.

We are using the OptionType Enum value to compare with the selected Option type to cross-check if this option is selected
or not.
We are defining the option as the default option by identifying the index value of the options list.

Once you completed the customization, you are ready to buy the new mac mini.

A small alert dialogue will be shown to confirm the process.

I hope you understand the basics, now you can start watching the video in fast forward.
By the way when you have free time please give your feedbacks via comments. Have a great day.

Softwares:
ScreenCopy: https://github.com/Genymobile/scrcpy
DeskPin: https://efotinis.neocities.org/deskpi...
PauseMe: https://github.com/peterbitfly/pause....
Browser: https://brave.com/download/
VsCode: https://code.visualstudio.com/
Video Editor: https://filmora.wondershare.com/

Websites:
Material Icons: https://fonts.google.com/icons
Pixabay: http://pixabay.com/
Unsplash: https://unsplash.com/

Devices:
Laptop: https://amzn.to/3dCBz8q
RAM: https://amzn.to/3yiZGkp
SSD: https://amzn.to/3hcmooE
Monitor: https://amzn.to/3yhdDiS
Mobile: https://amzn.to/2SJhfLo
Mobile 2: Vivo y11
Microphone: https://amzn.to/3x7bYLD
USB Mic Adaptor: https://amzn.to/3iPjnKO

Hashtags: #flutter #flutterShip #android #ios