Name: FlutterでEコマースアプリを作る - Splash Page (Build Ecommerce App With Flutter - Splash Page)
Uploaded: 2024-07-30T18:51:57.000Z
Duration: 9 min 13 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：プロジェクト,注文,サイン,ページ,ステップ,スプラッシュ,アップ,アプリケーション,クリーン,レポート,分かり,更新,無駄,完成,デザイン,システム,毎日,レベル,関する,完全,一緒,思い,最初,時間

程度の副詞

 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

まず最初に、私たちが一緒に実装しようとしているアプリケーションのデザインをお見せしましょう。スプラッシュサインインとサインアップページがあります。また、注文ページがあり、これは完全な注文システムであることがお分かりいただけると思いますが、注文に関するレポートもあります。このプロジェクトで完成したプロジェクトは、あなたがレベルアップすることを保証します。毎日プロジェクトを更新します。時間を無駄にしないために、プロジェクトに呼びかけ、ステップバイステップで私についてきてください。このプロジェクトではクリーン・