Name: 使用 Flutter 構建電子商務應用程序 - 閃屏頁面 (Build Ecommerce App With Flutter - Splash Page)
Uploaded: 2024-07-30T18:51:57.000Z
Duration: 9 min 13 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。學這些英文用法：頁面,類別,用戶,訂單,性別,實施,完整,功能,產品,過濾,密碼,驗證,訂購,選擇,通知,搜索,身份,報告,允許,查看,程序,手機,看到,設計,應用,展示,使用

基礎被動語態

 first of all let me show you design of the application that we are going to implement together we will have splash sign in and sign up pages we also have forgot password feature and at the end user can select her or his gender okay as you can see we will have complete authentication on the home page we will have categories which user can select categories and then see products of that categories and also we are going to display some products we will have bottom navigation bar and search field and the cart page okay here we have a notification page that we are going to use firebase for this phone and we also have orders page and as you can see this is a complete ordering system and we have some reports for our orders we are going to implement search page and we also have filter feature that user can filter by gender price or sort by news highest price or lowest price okay we have product page actually detail of product that user can select color or size of product and register order we also have cart page checkout and finally order placed page and finally we will have settings page that user can set address or information of payment card and also see favorite items so as you can see this is large and complete project with this project i guarantee you that you will level up so we have a lot of work grab your favorite drink hit that like button and let's get coding first of all do me a favor watch this course then come here because in this course you will see how this structure of my project is how do i use the clean architecture what are my folders and so on so please watch this course then come here thank you and finally please join the flutter guys server on discord this will help you answer questions and believe me this will make your journey easy i also put the link of source code in the description of video please follow me on the github i will update project every day and please call on the project and follow me step by step in order not to waste our time i created project and also i set up project i'm using flutter last version i also added fonts images vectors and i also added in pubspec file as you know in this project we are going to use clean architecture so i created data domain representation layers and also common and core folders in core folders we have app colors class and also i created app theme i'm sure that you know this and there is no need for me to explain because these are the basics and you can even check the source code okay let's back to the project and start coding in the first step we are going to implement splash page this is very simple and we can do it easily inside presentation folder let's create a new folder called splash inside this again let's create a new folder called pages and inside pages let's create a new file called splash here let's create a new stateless class called splash page let's import material and here instead of returning container we have to return scaffold now in the scaffold we have to set color of body or background color to our primary color we can access the primary color by calling app colors dot primary color you let's set splash page in home property of material app let's add const great let's go ahead and display logo in the center of page to display logo we can use flutter svg library because format of file is svg i added library to project before so now i can use it like this you here we have to set path of the logo in the project we are going to put our svg files in vectors folder in the assets in order to be able to manage our assets in easy way i'm going to create a new folder in this i'm going to create a new file called app vectors now here i'm going to create a new class called app vectors now here first of all let's create a new static const called base path you value of this should be base path of our assets which should be okay now in the next step i'm going to define a new static const called app logo now here the value of this should be equal to name of the file i want to create another static const variable called the format and the value of this should be equal to svg because if in future we want to change a format of our vectors we don't have to change in all of the project files so we just change in app vectors okay and now i'm going to add to the end of logo so and we also have to add base path to the beginning of our vectors so great now let's back to the splash and use app vectors class great as you can see we display logo in the center of page and we don't have any problem here in the next step we are going to implement sign in and sign up pages and also we are going to set up firebase using firebase cli and with help of block we are going to check if user is logged in or not if user is logged in we will redirect user to the home page and otherwise we will redirect user to the sign-in page

首先，請允許我向您展示我們將共同實施的應用程序的設計，我們將有飛濺登錄和註冊頁面，我們還將有忘記密碼功能，最後用戶可以選擇她或他的性別，正如您所看到的，我們將在主頁上有完整的身份驗證，我們將有類別，用戶可以選擇類別，然後查看該類別的產品，我們還將顯示一些產品，我們將有底部導航欄和搜索欄以及購物車頁面，好了，在這裡我們有一個通知頁面，我們將在此手機上使用 Firebase，我們還將有訂單頁面，正如您所看到的，這是一個完整的訂購系統，我們有一些訂單報告，我們將實施搜索頁面，我們還將有過濾功能，用戶可以按性別過