├── README.md └── youtube_test ├── .gitignore ├── .metadata ├── analysis_options.yaml ├── android ├── .gitignore ├── app │ ├── build.gradle │ └── src │ │ ├── debug │ │ └── AndroidManifest.xml │ │ ├── main │ │ ├── AndroidManifest.xml │ │ ├── kotlin │ │ │ └── com │ │ │ │ └── example │ │ │ │ └── youtube_test │ │ │ │ └── MainActivity.kt │ │ └── res │ │ │ ├── drawable-v21 │ │ │ └── launch_background.xml │ │ │ ├── drawable │ │ │ └── launch_background.xml │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── values-night │ │ │ └── styles.xml │ │ │ └── values │ │ │ └── styles.xml │ │ └── profile │ │ └── AndroidManifest.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ └── gradle-wrapper.properties └── settings.gradle ├── assets ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── lib ├── main.dart └── main_screen.dart ├── pubspec.lock └── pubspec.yaml /README.md: -------------------------------------------------------------------------------- 1 | # Shop app UI using Flutter 2 | ## Preview 3 | https://www.instagram.com/tv/CfwMBHYD-uw/?utm_source=ig_web_copy_link 4 | ## Links 5 | ### Support Me 6 | 7 | ### Socials 8 |

9 | 10 | 11 | 12 |

13 | -------------------------------------------------------------------------------- /youtube_test/.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | migrate_working_dir/ 12 | 13 | # IntelliJ related 14 | *.iml 15 | *.ipr 16 | *.iws 17 | .idea/ 18 | 19 | # The .vscode folder contains launch configuration and tasks you configure in 20 | # VS Code which you may wish to be included in version control, so this line 21 | # is commented out by default. 22 | #.vscode/ 23 | 24 | # Flutter/Dart/Pub related 25 | **/doc/api/ 26 | **/ios/Flutter/.last_build_id 27 | .dart_tool/ 28 | .flutter-plugins 29 | .flutter-plugins-dependencies 30 | .packages 31 | .pub-cache/ 32 | .pub/ 33 | /build/ 34 | 35 | # Web related 36 | lib/generated_plugin_registrant.dart 37 | 38 | # Symbolication related 39 | app.*.symbols 40 | 41 | # Obfuscation related 42 | app.*.map.json 43 | 44 | # Android Studio will place build artifacts here 45 | /android/app/debug 46 | /android/app/profile 47 | /android/app/release 48 | -------------------------------------------------------------------------------- /youtube_test/.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled. 5 | 6 | version: 7 | revision: cd41fdd495f6944ecd3506c21e94c6567b073278 8 | channel: stable 9 | 10 | project_type: app 11 | 12 | # Tracks metadata for the flutter migrate command 13 | migration: 14 | platforms: 15 | - platform: root 16 | create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 17 | base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 18 | - platform: android 19 | create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 20 | base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 21 | - platform: ios 22 | create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 23 | base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 24 | - platform: linux 25 | create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 26 | base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 27 | - platform: macos 28 | create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 29 | base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 30 | - platform: web 31 | create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 32 | base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 33 | - platform: windows 34 | create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 35 | base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278 36 | 37 | # User provided section 38 | 39 | # List of Local paths (relative to this file) that should be 40 | # ignored by the migrate tool. 41 | # 42 | # Files that are not part of the templates will be ignored by default. 43 | unmanaged_files: 44 | - 'lib/main.dart' 45 | - 'ios/Runner.xcodeproj/project.pbxproj' 46 | -------------------------------------------------------------------------------- /youtube_test/analysis_options.yaml: -------------------------------------------------------------------------------- 1 | # This file configures the analyzer, which statically analyzes Dart code to 2 | # check for errors, warnings, and lints. 3 | # 4 | # The issues identified by the analyzer are surfaced in the UI of Dart-enabled 5 | # IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be 6 | # invoked from the command line by running `flutter analyze`. 7 | 8 | # The following line activates a set of recommended lints for Flutter apps, 9 | # packages, and plugins designed to encourage good coding practices. 10 | include: package:flutter_lints/flutter.yaml 11 | 12 | linter: 13 | # The lint rules applied to this project can be customized in the 14 | # section below to disable rules from the `package:flutter_lints/flutter.yaml` 15 | # included above or to enable additional rules. A list of all available lints 16 | # and their documentation is published at 17 | # https://dart-lang.github.io/linter/lints/index.html. 18 | # 19 | # Instead of disabling a lint rule for the entire project in the 20 | # section below, it can also be suppressed for a single line of code 21 | # or a specific dart file by using the `// ignore: name_of_lint` and 22 | # `// ignore_for_file: name_of_lint` syntax on the line or in the file 23 | # producing the lint. 24 | rules: 25 | # avoid_print: false # Uncomment to disable the `avoid_print` rule 26 | # prefer_single_quotes: true # Uncomment to enable the `prefer_single_quotes` rule 27 | 28 | # Additional information about this file can be found at 29 | # https://dart.dev/guides/language/analysis-options 30 | -------------------------------------------------------------------------------- /youtube_test/android/.gitignore: -------------------------------------------------------------------------------- 1 | gradle-wrapper.jar 2 | /.gradle 3 | /captures/ 4 | /gradlew 5 | /gradlew.bat 6 | /local.properties 7 | GeneratedPluginRegistrant.java 8 | 9 | # Remember to never publicly share your keystore. 10 | # See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app 11 | key.properties 12 | **/*.keystore 13 | **/*.jks 14 | -------------------------------------------------------------------------------- /youtube_test/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | def localProperties = new Properties() 2 | def localPropertiesFile = rootProject.file('local.properties') 3 | if (localPropertiesFile.exists()) { 4 | localPropertiesFile.withReader('UTF-8') { reader -> 5 | localProperties.load(reader) 6 | } 7 | } 8 | 9 | def flutterRoot = localProperties.getProperty('flutter.sdk') 10 | if (flutterRoot == null) { 11 | throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.") 12 | } 13 | 14 | def flutterVersionCode = localProperties.getProperty('flutter.versionCode') 15 | if (flutterVersionCode == null) { 16 | flutterVersionCode = '1' 17 | } 18 | 19 | def flutterVersionName = localProperties.getProperty('flutter.versionName') 20 | if (flutterVersionName == null) { 21 | flutterVersionName = '1.0' 22 | } 23 | 24 | apply plugin: 'com.android.application' 25 | apply plugin: 'kotlin-android' 26 | apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" 27 | 28 | android { 29 | compileSdkVersion flutter.compileSdkVersion 30 | ndkVersion flutter.ndkVersion 31 | 32 | compileOptions { 33 | sourceCompatibility JavaVersion.VERSION_1_8 34 | targetCompatibility JavaVersion.VERSION_1_8 35 | } 36 | 37 | kotlinOptions { 38 | jvmTarget = '1.8' 39 | } 40 | 41 | sourceSets { 42 | main.java.srcDirs += 'src/main/kotlin' 43 | } 44 | 45 | defaultConfig { 46 | // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). 47 | applicationId "com.example.youtube_test" 48 | // You can update the following values to match your application needs. 49 | // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration. 50 | minSdkVersion flutter.minSdkVersion 51 | targetSdkVersion flutter.targetSdkVersion 52 | versionCode flutterVersionCode.toInteger() 53 | versionName flutterVersionName 54 | } 55 | 56 | buildTypes { 57 | release { 58 | // TODO: Add your own signing config for the release build. 59 | // Signing with the debug keys for now, so `flutter run --release` works. 60 | signingConfig signingConfigs.debug 61 | } 62 | } 63 | } 64 | 65 | flutter { 66 | source '../..' 67 | } 68 | 69 | dependencies { 70 | implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" 71 | } 72 | -------------------------------------------------------------------------------- /youtube_test/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 7 | 15 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 30 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/kotlin/com/example/youtube_test/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.example.youtube_test 2 | 3 | import io.flutter.embedding.android.FlutterActivity 4 | 5 | class MainActivity: FlutterActivity() { 6 | } 7 | -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/res/drawable-v21/launch_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/res/drawable/launch_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/res/values-night/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /youtube_test/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /youtube_test/android/app/src/profile/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /youtube_test/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext.kotlin_version = '1.6.10' 3 | repositories { 4 | google() 5 | mavenCentral() 6 | } 7 | 8 | dependencies { 9 | classpath 'com.android.tools.build:gradle:7.1.2' 10 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 11 | } 12 | } 13 | 14 | allprojects { 15 | repositories { 16 | google() 17 | mavenCentral() 18 | } 19 | } 20 | 21 | rootProject.buildDir = '../build' 22 | subprojects { 23 | project.buildDir = "${rootProject.buildDir}/${project.name}" 24 | } 25 | subprojects { 26 | project.evaluationDependsOn(':app') 27 | } 28 | 29 | task clean(type: Delete) { 30 | delete rootProject.buildDir 31 | } 32 | -------------------------------------------------------------------------------- /youtube_test/android/gradle.properties: -------------------------------------------------------------------------------- 1 | org.gradle.jvmargs=-Xmx1536M 2 | android.useAndroidX=true 3 | android.enableJetifier=true 4 | -------------------------------------------------------------------------------- /youtube_test/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Fri Jun 23 08:50:38 CEST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-all.zip 7 | -------------------------------------------------------------------------------- /youtube_test/android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | 3 | def localPropertiesFile = new File(rootProject.projectDir, "local.properties") 4 | def properties = new Properties() 5 | 6 | assert localPropertiesFile.exists() 7 | localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) } 8 | 9 | def flutterSdkPath = properties.getProperty("flutter.sdk") 10 | assert flutterSdkPath != null, "flutter.sdk not set in local.properties" 11 | apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle" 12 | -------------------------------------------------------------------------------- /youtube_test/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/1.jpg -------------------------------------------------------------------------------- /youtube_test/assets/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/10.jpg -------------------------------------------------------------------------------- /youtube_test/assets/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/11.jpg -------------------------------------------------------------------------------- /youtube_test/assets/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/12.jpg -------------------------------------------------------------------------------- /youtube_test/assets/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/13.jpg -------------------------------------------------------------------------------- /youtube_test/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/2.jpg -------------------------------------------------------------------------------- /youtube_test/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/3.jpg -------------------------------------------------------------------------------- /youtube_test/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/4.jpg -------------------------------------------------------------------------------- /youtube_test/assets/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/5.jpg -------------------------------------------------------------------------------- /youtube_test/assets/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/6.jpg -------------------------------------------------------------------------------- /youtube_test/assets/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/7.jpg -------------------------------------------------------------------------------- /youtube_test/assets/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/8.jpg -------------------------------------------------------------------------------- /youtube_test/assets/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmirBayat0/Flutter-shop-app-UI/bdceb98707814a183a3736abd32f70cd62e140cd/youtube_test/assets/9.jpg -------------------------------------------------------------------------------- /youtube_test/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:youtube_test/main_screen.dart'; 3 | 4 | void main() { 5 | runApp(const MyApp()); 6 | } 7 | 8 | //@CodeWithFlexz on Instagram 9 | 10 | //AmirBayat0 on Github 11 | //Programming with Flexz on Youtube 12 | 13 | class MyApp extends StatelessWidget { 14 | const MyApp({Key? key}) : super(key: key); 15 | 16 | @override 17 | Widget build(BuildContext context) { 18 | return const MaterialApp( 19 | debugShowCheckedModeBanner: false, 20 | home: MainScreen(), 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /youtube_test/lib/main_screen.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | 3 | import 'package:flutter/material.dart'; 4 | import 'package:bottom_navy_bar/bottom_navy_bar.dart'; 5 | import 'package:smooth_page_indicator/smooth_page_indicator.dart'; 6 | 7 | class MainScreen extends StatefulWidget { 8 | const MainScreen({Key? key}) : super(key: key); 9 | 10 | @override 11 | State createState() => _MainScreenState(); 12 | } 13 | 14 | class _MainScreenState extends State { 15 | int indexOfBTB = 0; 16 | int indexOfPageview = 0; 17 | int indexOfCategories = 0; 18 | PageController pageController = PageController(initialPage: 0); 19 | 20 | @override 21 | void initState() { 22 | super.initState(); 23 | 24 | /// For Changing Index of Page View Automatically 25 | Timer.periodic(const Duration(seconds: 3), (Timer timer) { 26 | if (indexOfPageview < 12) { 27 | indexOfPageview++; 28 | pageController.animateToPage( 29 | indexOfPageview, 30 | duration: const Duration(milliseconds: 350), 31 | curve: Curves.ease, 32 | ); 33 | } else { 34 | indexOfPageview = -1; 35 | } 36 | }); 37 | } 38 | 39 | @override 40 | void dispose() { 41 | pageController.dispose(); 42 | super.dispose(); 43 | } 44 | 45 | /// List of Icons(for Categories) just for debuging 46 | List icons = [ 47 | Icons.safety_check, 48 | Icons.ac_unit, 49 | Icons.label, 50 | Icons.data_saver_on_outlined, 51 | Icons.umbrella_outlined, 52 | Icons.widgets, 53 | Icons.earbuds_battery, 54 | Icons.safety_check, 55 | Icons.wallet, 56 | Icons.gps_fixed, 57 | Icons.hourglass_full, 58 | Icons.spa_rounded 59 | ]; 60 | 61 | String showProductName(index) { 62 | switch (index) { 63 | case 0: 64 | return "Dresses"; 65 | case 1: 66 | return "Tops, Tees & Blouses"; 67 | case 2: 68 | return "Sweaters"; 69 | case 3: 70 | return "Jeans"; 71 | case 4: 72 | return "Leggings"; 73 | case 5: 74 | return "Active"; 75 | case 6: 76 | return "Skirts"; 77 | case 7: 78 | return "Socks & Hosiery"; 79 | case 8: 80 | return "Suiting & Blazers"; 81 | case 9: 82 | return "Bodysuits"; 83 | case 10: 84 | return "Shorts"; 85 | case 11: 86 | return "ُShoes"; 87 | case 12: 88 | return "Sweaters"; 89 | 90 | default: 91 | return ""; 92 | } 93 | } 94 | 95 | @override 96 | Widget build(BuildContext context) { 97 | return SafeArea( 98 | child: Scaffold( 99 | body: Padding( 100 | padding: const EdgeInsets.only(top: 8, left: 4, right: 4), 101 | child: Column( 102 | crossAxisAlignment: CrossAxisAlignment.start, 103 | children: [ 104 | /// AppBar 105 | Row( 106 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 107 | children: [ 108 | Container( 109 | margin: const EdgeInsets.all(5), 110 | width: 40, 111 | height: 40, 112 | decoration: BoxDecoration( 113 | color: Colors.grey.shade300, 114 | borderRadius: BorderRadius.circular(3)), 115 | child: Center( 116 | child: IconButton( 117 | onPressed: () {}, 118 | icon: const Icon( 119 | Icons.menu, 120 | color: Colors.black, 121 | )), 122 | ), 123 | ), 124 | Container( 125 | margin: const EdgeInsets.all(5), 126 | width: 40, 127 | height: 40, 128 | decoration: BoxDecoration( 129 | color: Colors.grey.shade300, 130 | borderRadius: BorderRadius.circular(10)), 131 | child: Center( 132 | child: IconButton( 133 | onPressed: () {}, 134 | icon: const Icon( 135 | Icons.search_sharp, 136 | color: Colors.black, 137 | )), 138 | ), 139 | ), 140 | ], 141 | ), 142 | 143 | /// Titles 144 | Padding( 145 | padding: const EdgeInsets.only(top: 12, left: 8), 146 | child: Column( 147 | crossAxisAlignment: CrossAxisAlignment.start, 148 | children: const [ 149 | Text( 150 | "Hello Amir 👋", 151 | style: TextStyle( 152 | color: Colors.black, 153 | fontWeight: FontWeight.bold, 154 | fontSize: 30), 155 | ), 156 | Text( 157 | "Lets get somthing?", 158 | style: TextStyle( 159 | color: Colors.grey, 160 | fontWeight: FontWeight.w300, 161 | fontSize: 15), 162 | ), 163 | ], 164 | ), 165 | ), 166 | 167 | /// Page View 168 | Padding( 169 | padding: const EdgeInsets.only(top: 20), 170 | child: SizedBox( 171 | width: double.infinity, 172 | height: 250, 173 | child: PageView.builder( 174 | controller: pageController, 175 | onPageChanged: (val) { 176 | setState(() { 177 | indexOfPageview = val; 178 | }); 179 | }, 180 | itemCount: 13, 181 | physics: const BouncingScrollPhysics(), 182 | itemBuilder: (ctx, index) { 183 | return Container( 184 | margin: const EdgeInsets.all(5), 185 | decoration: BoxDecoration( 186 | borderRadius: BorderRadius.circular(20), 187 | image: DecorationImage( 188 | image: AssetImage('assets/${index + 1}.jpg'), 189 | fit: BoxFit.cover), 190 | ), 191 | ); 192 | }), 193 | ), 194 | ), 195 | 196 | /// Page Indicator 197 | Padding( 198 | padding: const EdgeInsets.only(top: 10), 199 | child: 200 | Align(alignment: Alignment.center, child: pageindicator()), 201 | ), 202 | 203 | /// Top Categories Text 204 | Padding( 205 | padding: const EdgeInsets.only(top: 25, left: 10, right: 10), 206 | child: Row( 207 | crossAxisAlignment: CrossAxisAlignment.center, 208 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 209 | children: const [ 210 | Text( 211 | "Top Categories", 212 | style: TextStyle( 213 | fontWeight: FontWeight.bold, 214 | fontSize: 17, 215 | ), 216 | ), 217 | Text( 218 | "SEE ALL", 219 | style: TextStyle( 220 | color: Colors.deepOrange, 221 | fontWeight: FontWeight.bold, 222 | fontSize: 13, 223 | ), 224 | ), 225 | ], 226 | ), 227 | ), 228 | 229 | /// Categories List 230 | Padding( 231 | padding: const EdgeInsets.only(top: 10), 232 | child: SizedBox( 233 | width: double.infinity, 234 | height: 60, 235 | child: ListView.builder( 236 | physics: const BouncingScrollPhysics(), 237 | itemCount: icons.length, 238 | scrollDirection: Axis.horizontal, 239 | itemBuilder: (ctx, index) { 240 | return GestureDetector( 241 | onTap: () { 242 | setState(() { 243 | indexOfCategories = index; 244 | }); 245 | }, 246 | child: AnimatedContainer( 247 | duration: const Duration(milliseconds: 500), 248 | margin: const EdgeInsets.all(3), 249 | width: 55, 250 | decoration: BoxDecoration( 251 | color: indexOfCategories == index 252 | ? Colors.deepOrangeAccent 253 | : Colors.grey.shade300, 254 | borderRadius: BorderRadius.circular(15)), 255 | child: Center( 256 | child: Icon( 257 | icons[index], 258 | color: indexOfCategories == index 259 | ? Colors.white 260 | : Colors.grey, 261 | ), 262 | ), 263 | ), 264 | ); 265 | }), 266 | ), 267 | ), 268 | 269 | /// Product List 270 | SizedBox( 271 | width: double.infinity, 272 | height: 218, 273 | child: Column( 274 | mainAxisAlignment: MainAxisAlignment.center, 275 | children: [ 276 | Text( 277 | "A list of Products will be Shown here", 278 | style: TextStyle(color: Colors.grey.shade400), 279 | ), 280 | const SizedBox( 281 | height: 40, 282 | ), 283 | Text( 284 | showProductName(indexOfCategories), 285 | style: const TextStyle( 286 | fontSize: 20, 287 | fontWeight: FontWeight.bold, 288 | color: Colors.deepOrangeAccent), 289 | ), 290 | Icon( 291 | icons[indexOfCategories], 292 | size: 50, 293 | color: Colors.deepOrangeAccent, 294 | ) 295 | ], 296 | ), 297 | ) 298 | ], 299 | ), 300 | ), 301 | bottomNavigationBar: bottomNav(), 302 | ), 303 | ); 304 | } 305 | 306 | /// Bottom Navigation Bar 307 | BottomNavyBar bottomNav() { 308 | return BottomNavyBar( 309 | selectedIndex: indexOfBTB, 310 | iconSize: 25, 311 | curve: Curves.ease, 312 | showElevation: true, 313 | onItemSelected: (index) => setState(() { 314 | indexOfBTB = index; 315 | }), 316 | items: [ 317 | BottomNavyBarItem( 318 | icon: const Icon(Icons.home), 319 | title: const Text('Home'), 320 | activeColor: indexOfBTB == 0 ? Colors.deepOrange : Colors.grey, 321 | ), 322 | BottomNavyBarItem( 323 | icon: const Icon(Icons.favorite), 324 | title: const Text('Favorite'), 325 | activeColor: indexOfBTB == 1 ? Colors.deepOrange : Colors.grey), 326 | BottomNavyBarItem( 327 | icon: const Icon(Icons.shopping_cart), 328 | title: const Text('Carts'), 329 | activeColor: indexOfBTB == 2 ? Colors.deepOrange : Colors.grey), 330 | BottomNavyBarItem( 331 | icon: const Icon(Icons.person), 332 | title: const Text('Profile'), 333 | activeColor: indexOfBTB == 3 ? Colors.deepOrange : Colors.grey), 334 | ], 335 | ); 336 | } 337 | 338 | /// Smooth Page Indicator Widget 339 | SmoothPageIndicator pageindicator() { 340 | return SmoothPageIndicator( 341 | controller: pageController, 342 | count: 13, 343 | effect: WormEffect( 344 | spacing: 5.0, 345 | radius: 10.0, 346 | dotWidth: 12.0, 347 | dotHeight: 12.0, 348 | dotColor: Colors.grey.shade400, 349 | activeDotColor: Colors.deepOrange), 350 | onDotClicked: (newIndex) { 351 | setState(() { 352 | pageController.animateToPage(newIndex, 353 | duration: const Duration(milliseconds: 500), curve: Curves.ease); 354 | }); 355 | }, 356 | ); 357 | } 358 | } 359 | -------------------------------------------------------------------------------- /youtube_test/pubspec.lock: -------------------------------------------------------------------------------- 1 | # Generated by pub 2 | # See https://dart.dev/tools/pub/glossary#lockfile 3 | packages: 4 | async: 5 | dependency: transitive 6 | description: 7 | name: async 8 | url: "https://pub.dartlang.org" 9 | source: hosted 10 | version: "2.8.2" 11 | boolean_selector: 12 | dependency: transitive 13 | description: 14 | name: boolean_selector 15 | url: "https://pub.dartlang.org" 16 | source: hosted 17 | version: "2.1.0" 18 | bottom_navy_bar: 19 | dependency: "direct main" 20 | description: 21 | name: bottom_navy_bar 22 | url: "https://pub.dartlang.org" 23 | source: hosted 24 | version: "6.0.0" 25 | characters: 26 | dependency: transitive 27 | description: 28 | name: characters 29 | url: "https://pub.dartlang.org" 30 | source: hosted 31 | version: "1.2.0" 32 | charcode: 33 | dependency: transitive 34 | description: 35 | name: charcode 36 | url: "https://pub.dartlang.org" 37 | source: hosted 38 | version: "1.3.1" 39 | clock: 40 | dependency: transitive 41 | description: 42 | name: clock 43 | url: "https://pub.dartlang.org" 44 | source: hosted 45 | version: "1.1.0" 46 | collection: 47 | dependency: transitive 48 | description: 49 | name: collection 50 | url: "https://pub.dartlang.org" 51 | source: hosted 52 | version: "1.16.0" 53 | cupertino_icons: 54 | dependency: "direct main" 55 | description: 56 | name: cupertino_icons 57 | url: "https://pub.dartlang.org" 58 | source: hosted 59 | version: "1.0.5" 60 | fake_async: 61 | dependency: transitive 62 | description: 63 | name: fake_async 64 | url: "https://pub.dartlang.org" 65 | source: hosted 66 | version: "1.3.0" 67 | flutter: 68 | dependency: "direct main" 69 | description: flutter 70 | source: sdk 71 | version: "0.0.0" 72 | flutter_lints: 73 | dependency: "direct dev" 74 | description: 75 | name: flutter_lints 76 | url: "https://pub.dartlang.org" 77 | source: hosted 78 | version: "2.0.1" 79 | flutter_test: 80 | dependency: "direct dev" 81 | description: flutter 82 | source: sdk 83 | version: "0.0.0" 84 | lints: 85 | dependency: transitive 86 | description: 87 | name: lints 88 | url: "https://pub.dartlang.org" 89 | source: hosted 90 | version: "2.0.0" 91 | matcher: 92 | dependency: transitive 93 | description: 94 | name: matcher 95 | url: "https://pub.dartlang.org" 96 | source: hosted 97 | version: "0.12.11" 98 | material_color_utilities: 99 | dependency: transitive 100 | description: 101 | name: material_color_utilities 102 | url: "https://pub.dartlang.org" 103 | source: hosted 104 | version: "0.1.4" 105 | meta: 106 | dependency: transitive 107 | description: 108 | name: meta 109 | url: "https://pub.dartlang.org" 110 | source: hosted 111 | version: "1.7.0" 112 | path: 113 | dependency: transitive 114 | description: 115 | name: path 116 | url: "https://pub.dartlang.org" 117 | source: hosted 118 | version: "1.8.1" 119 | sky_engine: 120 | dependency: transitive 121 | description: flutter 122 | source: sdk 123 | version: "0.0.99" 124 | smooth_page_indicator: 125 | dependency: "direct main" 126 | description: 127 | name: smooth_page_indicator 128 | url: "https://pub.dartlang.org" 129 | source: hosted 130 | version: "1.0.0+2" 131 | source_span: 132 | dependency: transitive 133 | description: 134 | name: source_span 135 | url: "https://pub.dartlang.org" 136 | source: hosted 137 | version: "1.8.2" 138 | stack_trace: 139 | dependency: transitive 140 | description: 141 | name: stack_trace 142 | url: "https://pub.dartlang.org" 143 | source: hosted 144 | version: "1.10.0" 145 | stream_channel: 146 | dependency: transitive 147 | description: 148 | name: stream_channel 149 | url: "https://pub.dartlang.org" 150 | source: hosted 151 | version: "2.1.0" 152 | string_scanner: 153 | dependency: transitive 154 | description: 155 | name: string_scanner 156 | url: "https://pub.dartlang.org" 157 | source: hosted 158 | version: "1.1.0" 159 | term_glyph: 160 | dependency: transitive 161 | description: 162 | name: term_glyph 163 | url: "https://pub.dartlang.org" 164 | source: hosted 165 | version: "1.2.0" 166 | test_api: 167 | dependency: transitive 168 | description: 169 | name: test_api 170 | url: "https://pub.dartlang.org" 171 | source: hosted 172 | version: "0.4.9" 173 | vector_math: 174 | dependency: transitive 175 | description: 176 | name: vector_math 177 | url: "https://pub.dartlang.org" 178 | source: hosted 179 | version: "2.1.2" 180 | sdks: 181 | dart: ">=2.17.3 <3.0.0" 182 | -------------------------------------------------------------------------------- /youtube_test/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: youtube_test 2 | description: A new Flutter project. 3 | 4 | # The following line prevents the package from being accidentally published to 5 | # pub.dev using `flutter pub publish`. This is preferred for private packages. 6 | publish_to: 'none' # Remove this line if you wish to publish to pub.dev 7 | 8 | # The following defines the version and build number for your application. 9 | # A version number is three numbers separated by dots, like 1.2.43 10 | # followed by an optional build number separated by a +. 11 | # Both the version and the builder number may be overridden in flutter 12 | # build by specifying --build-name and --build-number, respectively. 13 | # In Android, build-name is used as versionName while build-number used as versionCode. 14 | # Read more about Android versioning at https://developer.android.com/studio/publish/versioning 15 | # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion. 16 | # Read more about iOS versioning at 17 | # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html 18 | version: 1.0.0+1 19 | 20 | environment: 21 | sdk: ">=2.17.3 <3.0.0" 22 | 23 | # Dependencies specify other packages that your package needs in order to work. 24 | # To automatically upgrade your package dependencies to the latest versions 25 | # consider running `flutter pub upgrade --major-versions`. Alternatively, 26 | # dependencies can be manually updated by changing the version numbers below to 27 | # the latest version available on pub.dev. To see which dependencies have newer 28 | # versions available, run `flutter pub outdated`. 29 | dependencies: 30 | flutter: 31 | sdk: flutter 32 | 33 | 34 | # The following adds the Cupertino Icons font to your application. 35 | # Use with the CupertinoIcons class for iOS style icons. 36 | cupertino_icons: ^1.0.2 37 | bottom_navy_bar: ^6.0.0 38 | smooth_page_indicator: ^1.0.0+2 39 | 40 | dev_dependencies: 41 | flutter_test: 42 | sdk: flutter 43 | 44 | # The "flutter_lints" package below contains a set of recommended lints to 45 | # encourage good coding practices. The lint set provided by the package is 46 | # activated in the `analysis_options.yaml` file located at the root of your 47 | # package. See that file for information about deactivating specific lint 48 | # rules and activating additional ones. 49 | flutter_lints: ^2.0.0 50 | 51 | # For information on the generic Dart part of this file, see the 52 | # following page: https://dart.dev/tools/pub/pubspec 53 | 54 | # The following section is specific to Flutter packages. 55 | flutter: 56 | 57 | # The following line ensures that the Material Icons font is 58 | # included with your application, so that you can use the icons in 59 | # the material Icons class. 60 | uses-material-design: true 61 | 62 | # To add assets to your application, add an assets section, like this: 63 | assets: 64 | - assets/ 65 | 66 | 67 | # An image asset can refer to one or more resolution-specific "variants", see 68 | # https://flutter.dev/assets-and-images/#resolution-aware 69 | 70 | # For details regarding adding assets from package dependencies, see 71 | # https://flutter.dev/assets-and-images/#from-packages 72 | 73 | # To add custom fonts to your application, add a fonts section here, 74 | # in this "flutter" section. Each entry in this list should have a 75 | # "family" key with the font family name, and a "fonts" key with a 76 | # list giving the asset and other descriptors for the font. For 77 | # example: 78 | # fonts: 79 | # - family: Schyler 80 | # fonts: 81 | # - asset: fonts/Schyler-Regular.ttf 82 | # - asset: fonts/Schyler-Italic.ttf 83 | # style: italic 84 | # - family: Trajan Pro 85 | # fonts: 86 | # - asset: fonts/TrajanPro.ttf 87 | # - asset: fonts/TrajanPro_Bold.ttf 88 | # weight: 700 89 | # 90 | # For details regarding fonts from package dependencies, 91 | # see https://flutter.dev/custom-fonts/#from-packages 92 | --------------------------------------------------------------------------------