Genral Information

Flutter app is a fully customizable and responsive Mobile design and Managing routes navigation, designed and routes to provide an exceptional user experience. We also offer pre-built pages for registration, verification, error, success, listings, profiles and booking history, ensuring your utmost satisfaction in choosing us. It includes all aspects that will attract new customers, providing ease of use.

White MakeUp also provides the following mentioned features :

  • MVC (Model - View - Controller)
  • State Management (Provider)
  • Shared Preferences (Local Storage)
  • Modern UI
  • Tested on IOS and Android Platforms

Folder Structure

📁 lib
    │───📁 bindings
    │   │──  🌐inital_bindings.dart                              
    │───📁 controller
    │   │──  🌐 Drawer_Controller.dart
    │   │──  🌐 Populer_Controller.dart
    │   │──  🌐 Favorite_Controller.dart
    │   │──  🌐 Details_Controller.dart
    │   │──  🌐 CategoriesFilter_Controller.dart
    │   │──  🌐 Categories_Controller.dart   
    │   │──  🌐 Cart_provider.dart   
    │   │──  🌐 Carousel_Controller.dart   
    │───📁 helper
    │   │── 🌐 Db_helper.dart
    │───📁 model
    │   │── 🌐 Draw_Model.dart
    │   │── 🌐 Filter_model.dart 
    │   │── 🌐 Favorite_Model.dart
    │   │── 🌐 Details_Model.dart
    │   │── 🌐 Categories_Model.dart
    │   │── 🌐 Carousel_Model.dart
    │   │── 🌐 Card_Model.dart
    │───📁 routes
    │   │──🌐 route.dart
    │───📁 services
    │   │── 🌐 Drawer_Services.dart
    │   │── 🌐 Details_Services.dart
    │   │── 🌐 CategoriesFilter_Services.dart
    │   │── 🌐 Categories_Services.dart
    │   │── 🌐 Carousel_Services.dart
    │───📁 utils
    │   │── 🌐 color_utils.dart        
    │───📁 views
    │   │───🌐 ProfileScreen.dart
    │   │───🌐 HomeScreen.dart
    │   │───🌐 Signin_Screen.dart
    │   │───🌐 SearchScreen.dart
    │   │───🌐 FavoritesScreen.dart
    │   │───🌐 CategoriesFilterScreen.dart
    │   │───🌐 DetailsScreen.dart
    │   │───🌐 CategoriesScreen.dart
    │   │───🌐 SplashScreen.dart
    │   │───🌐 CartScreen.dart
    │───📁 widget
    │   │───🌐 colorTheme_widget.dart
    │   │───🌐 carousel_widget.dart
    │   │───🌐 drawer_widget.dart
    │   │───🌐 FavoriteContext_widget.dart
    │   │───🌐 favoriler_widget.dart
    │   │───🌐 text_widget.dart
    │   │───🌐 signintextfield_widget.dart
    │   │───🌐 populer_widget.dart
    │   │───🌐 categories_widget.dart
    │   │───🌐 bottomlist_widget.dart
    │   │───🌐 loading_widget.dart
    │   │───🌐 rating_widget.dart
    │   │───🌐 logo_widget.dart
    │───✨ pubspec.yaml     
    🌐 main.dart
    ...other folder
Setup necessary software

  • Flutter & Dart SDK (We have used Flutter version 2.10)

  • Anyone IDE Android Studio (Recommended) Or  Visual Studio Code

  • To edit this project you must have Flutter and Dart installed and configured successfully on your computer.

  • Set up your editor -- Install the Flutter and Dart plugins.

  • If you have got Android SDK installed and configured, to install Flutter you only need to:

    • Download Flutter SDK from official website and extract it.
    • Add path to previously extracted SDK to your PATH variable
    • Run flutter doctor tool to check if everything is configured correctly.
    • All above steps are mentioned here: https://flutter.dev/docs/get-started/install/

Setup in different Systems

Windows
macOS
Linux

SDK Version

If you White Makeup App your project then you need to change following changes.

Flutter (v2.10 or higher)
  • You need Flutter v2.10 or higher (Stable Channel). For this run following commands.
  • flutter channel master to switch master branch for flutter SDK.
  • flutter upgrade to upgrade flutter to latest stable release.
Android (SDK 20 or Higher)
  • You need Android API 20 or higher. For this follow some steps.
  • Open /android/app/build.gradle
defaultConfig {
    applicationId "YOUR_APPLICATION_ID"
    minSdkVersion 21   // Change here - 20 or higher
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}
iOS (9.0 or Higher)
  • You need iOS Version 9.0 or higher. For this follow some steps and run these commands
  • Open /ios/Flutter/AppFrameworkInfo.plist
<dict>
  ...
  <key>MinimumOSVersion</key>
  <string>9.0</string>    // Change here - 9.0 or higher
</dict>
  • rm ios/Podfile to remove podfile.
  • flutter clean to clean old builds.
  • flutter run to run project again.
How to setup code?

Before you proceed with Flutter installation, you need to prepare. It is recommended to follow steps, listed below:

  • Install Plugin is necessary as Flutter uses the Dart programming language.
  • Following steps you install the plugin.
    • Go to "File" > "Settings" on Windows/Linux or "Android Studio" > "Preferences" on macOS.
    • In the left-hand menu, navigate to "Plugins".
    • Click on "Marketplace" at the top of the window.
    • Search for "Flutter" and “Dart” in the marketplace search bar.
    • Install the official "Flutter" and “Dart” plugin provided by the Flutter team.
    • Restart your IDE or editor.
  • Open the Tattoobit project in the IDE or editor at your downloaded drive location.

Building and running Android phone

  1. Setup Android Studio (Optional) : Connect your Android phone to your computer using a USB cable. Make sure that you've enabled Developer Mode on your phone and allowed USB Debugging.
  2. Run the following command to check if your device is properly connected and recognized: flutter devices
  3. In the terminal, navigate to your Flutter project's root directory using the cd command.
  4. Run Your App using flutter run command.

Building and running iOS phone

  1. Set Up Xcode: Xcode is the development environment for iOS app development. If you're planning to develop and run Flutter apps on iOS, you'll need to have Xcode installed on a macOS machine. You can download Xcode from the Mac App Store.
  2. Connect your iOS device (iPhone or iPad) to your Mac using a USB cable. Make sure that you've unlocked your device and allowed access from your Mac.
  3. Run the following command to check if your device is properly connected and recognized: flutter devices
  4. In the terminal, navigate to your Flutter project's root directory using the cd command.
    • Exp.. [root/flutter-app/]
  5. Then navigate to the iOS folder using cd ios command.
    • Exp.. [root/flutter-app/ios/]
  6. Run pod install install command.
    • Now you can write a command cd .. for go to project’s root directory the execute flutter run command.
    • Exp.. [root/flutter-app/]
  7. Run Your App using flutter run command.

Before you proceed with Flutter installation, you need to prepare. It is recommended to follow steps, listed below:

  • Install Plugin is necessary as Flutter uses the Dart programming language.
  • Following steps you install the plugin.
    • In the left-hand menu, navigate to "Extensions".
    • Search for "Flutter" and “Dart” in the marketplace search bar.
    • Install the official "Flutter" and “Dart” plugin provided by the Flutter team.
    • Restart your IDE or editor.
  • Open the Tattoobit project in the IDE or editor at your downloaded drive location.

Building and running Android phone

  1. Setup Visual Studio (Optional) : Connect your Android phone to your computer using a USB cable. Make sure that you've enabled Developer Mode on your phone and allowed USB Debugging.
  2. Run the following command to check if your device is properly connected and recognized: flutter devices
  3. In the terminal, navigate to your Flutter project's root directory using the cd command.
  4. Run Your App using flutter run command.

Building and running iOS phone

  1. Set Up Xcode: Xcode is the development environment for iOS app development. If you're planning to develop and run Flutter apps on iOS, you'll need to have Xcode installed on a macOS machine. You can download Xcode from the Mac App Store.
  2. Connect your iOS device (iPhone or iPad) to your Mac using a USB cable. Make sure that you've unlocked your device and allowed access from your Mac.
  3. Run the following command to check if your device is properly connected and recognized: flutter devices
  4. In the terminal, navigate to your Flutter project's root directory using the cd command.
    • Exp.. [root/flutter-app/]
  5. Then navigate to the iOS folder using cd ios command.
    • Exp.. [root/flutter-app/ios/]
  6. Run pod install install command.
    • Now you can write a command cd .. for go to project’s root directory the execute flutter run command.
    • Exp.. [root/flutter-app/]
  7. Run Your App using flutter run command.
Configuration

Android Configuration

Change Application Name

  1. You must want to change your application name. This is how you can do. Follow the below step.
  2. Open /android/app/src/main/AndroidManifest.xml and specify your application name.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example">

    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="YOUR_APPLICATION_NAME"      // Change here
        android:icon="@mipmap/ic_launcher">
        <activity...

Change Application ID

  1. Follow the below steps to change you Application ID.
  2. Open /android/app/build.gradle
    defaultConfig {
        applicationId "YOUR_APPLICATION_ID"      // Change here - com.company_name.product_name (Like com.example.makeup)
        minSdkVersion 19
        targetSdkVersion 33
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

Change Application Icon

  • /mipmap-hdpi    in /android/app/src/main/res/ folder
  • /mipmap-mdpi    in /android/app/src/main/res/ folder
  • /mipmap-xhdpi   in /android/app/src/main/res/ folder
  • /mipmap-xxhdpi  in /android/app/src/main/res/ folder
  • /mipmap-xxxhdpi in /android/app/src/main/res/ folder

Important:

If you don't know how to change logo from Android Manifest (/android/app/src/main/AndroidManifest.xml), Then icon name must be logo.png.