Skip to content

mah-shamim/tattle-chat-flutter-ui-kit

Repository files navigation

Screens

  • Login
  • Dashboard
  • Call (Audio/Video)
  • People
  • User Profile
  • people Profile
  • Chat
  • Story

Features

  • Call
  • Chat
  • Active contacts/In-active contacts
  • Dashboard
  • Search
  • Login
  • Profile
  • Story
  • Settings
  • Conversations

Flutter Installation Guide

Follow the steps below to install Flutter on your system:

System Requirements

  • Operating System:

    • Windows: Windows 7 or later (64-bit)
    • macOS: macOS 10.14 (Mojave) or later
    • Linux: Any recent 64-bit distribution
  • Disk Space:

    • At least 1.64 GB of free disk space (excluding IDE/tools).
  • Tools:

    • Git (to clone the Flutter repository).
    • For Windows: PowerShell 5.0 or newer, Git for Windows.

Step 1: Download Flutter SDK

  1. Visit the official Flutter SDK download page and download the appropriate SDK for your operating system:

  2. Extract the downloaded .zip file to a suitable location, for example:

    • Windows: C:\src\flutter
    • macOS/Linux: $HOME/flutter

Step 2: Set Up Environment Variables

Windows

  1. Open System Properties > Advanced > Environment Variables.

  2. Under User variables, select the Path variable and click Edit.

  3. Add the bin folder path inside the Flutter directory:

    C:\src\flutter\bin
    
    

macOS/Linux

  • Open your terminal and edit the bash_profile or zshrc file

    
      nano ~/.bash_profile   # or ~/.zshrc
    
    
  • Add the following line at the end of the file:

       export PATH="$PATH:`pwd`/flutter/bin"
    
    
  • Save and close the file, then run

      source ~/.bash_profile   # or source ~/.zshrc
    
    

Step 3: Verify Installation

  • Open your terminal or command prompt.

  • Run the following command to check if Flutter is correctly installed

Step 4: Install Android Studio (Optional)

For Android development, you’ll need to install Android Studio.

  1. Download and install Android Studio.
  2. During installation, select the option to install:
    • Android SDK
    • Android SDK Platform-Tools
    • Android SDK Build-Tools
  3. Open Android Studio, go to Settings > Plugins, and install the Flutter and Dart plugins.
  4. Ensure that the Android SDK path is correctly set:
    • Go to File > Project Structure > SDK Location and set the Android SDK location.

Step 5: Install Xcode (macOS only)

For iOS development, you’ll need to install Xcode.

  1. Download and install Xcode from the Mac App Store.

  2. Open Xcode and agree to the terms of the license agreement.

  3. Install the necessary development tools by running the following command:

    sudo xcode-select --install
    
  4. Ensure Xcode command-line tools are correctly installed

    sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    
    

Step 6: Install Visual Studio Code (Optional)

If you prefer VS Code as your code editor:

  1. Download and install Visual Studio Code.
  2. Open VS Code and go to the Extensions panel (View > Extensions).
  3. Install the Flutter and Dart extensions.

Step 7: Create a New Flutter Project

Now that everything is set up, you can create a new Flutter project.

  1. Open the terminal or command prompt.

  2. Run the following command to create a new project:

    flutter create my_app
    
  3. Navigate to your project directory

    cd my_app
    
    
  4. Run the project on an emulator or connected device

    flutter run
    
    

References

Project setup

Step 1: Create Icons using Icon Kitchen

1. Go to icon.kitchen: Visit - icon.kitchen

2. Upload the base image

  • Upload a high-quality image (preferably 1024x1024 pixels) for your app icon.

3. Customize icons

  • You can configure the icon appearance, padding, and background color as needed. Choose between "iOS", "Android", or both, depending on the platforms you want to target.

4. Download the assets

  • Once the customization is done, click on the download button to get the icon files in a .zip format. The file will contain the icons for both iOS and Android in the correct sizes.

Step 2: Replace Android Icons

1. Unzip the icon files: Extract the downloaded files

2. Locate the Android icons

3. In your Flutter project directory, navigate to the Android app icons path

  • android/app/src/main/res/

3. Replace icon files

1. In the extracted folder, you will see various - subfolders like

  • mipmap-hdpi
  • mipmap-mdpi
  • mipmap-xhdpi
  • mipmap-xxhdpi
  • mipmap-xxxhdpi

2. Copy the icon files from these folders and replace the corresponding ones in your Flutter project’s

  • res/ directory.

4. Update AndroidManifest.xml (if necessary)

Ensure that the correct launcher icon is referenced in your AndroidManifest.xml. This is usually located in

  • android/app/src/main/AndroidManifest.xml Check for the following line:

    <application
    android:icon="@mipmap/ic_launcher" />

If you used a different name for the icon, update the android:icon attribute accordingly

Step 3: Replace iOS Icons

1. Locate the iOS icons

In your Flutter project, navigate to the iOS icons path

  • ios/Runner/Assets.xcassets/AppIcon.appiconset/

2. Replace icon files

  • In the extracted folder from icon.kitchen, you will find an AppIcon.appiconset folder for iOS.
  • Copy all files from this folder into your Flutter project’s ios/Runner/Assets.xcassets/AppIcon.appiconset/ directory, replacing any existing files.

3. Update -Info.plist (if necessary)

Ensure your Info.plist (found at ios/Runner/Info.plist) correctly points to your new icon set:

  • <key>CFBundleIconName</key>
  • <string>AppIcon</string>

Step 4: Clean and Rebuild the Project

1. Clean the project

  • Run the following command to clean the project: flutter clean

2. Rebuild the project

  • flutter build apk

For iOS: flutter build ios

3. Run the project

flutter run

Splash Screen setup

To add or change a splash screen in a Flutter app, follow these steps for both Android and iOS platforms.


Step 1: Install flutter_native_splash package

The easiest way to create a splash screen in Flutter is by using the flutter_native_splash package.

  1. Add the flutter_native_splash package to your pubspec.yaml file:

    dev_dependencies:
      flutter_native_splash: ^2.2.18
  2. Run the following command to install the package:

    flutter pub get

Step 2: Configure Splash Screen

Configure the splash screen by adding settings to your pubspec.yaml file under the flutter_native_splash section:

flutter_native_splash: color: "#ffffff" # Background color of the splash screen image: assets/splash.png # Path to your splash screen image android: true # Enable splash screen for Android ios: true # Enable splash screen for iOS web: false # Disable for web (optional)

Step 3: Add Splash Screen Image

  • Add your splash screen image to the assets folder of your project. If the folder doesn't exist, create it.
  1. Place your image inside the assets/ folder: assets/logo.png

  2. Declare the asset in your pubspec.yaml file:

        flutter:
        assets:
            - assets/logo.png
    
    

Step 4: Generate Splash Screen

Run the following command to generate the splash screen configuration for Android and iOS:

  • flutter pub run flutter_native_splash:create

To remove any change :

  • flutter pub run flutter_native_splash:remove

Step 5: Testing the Splash Screen

Clean the project to ensure there’s no cache interference: flutter clean && flutter run

References for splash screen

Reformat Size , Padding , Radius

  1. To change any kind of dimension or padding or radius you can use the following code snippet:
  • core/shared/dimension.dart

Theme Change

1.To change theme colors you can use the following code snippet:

  • core/shared/theme/scheme.dart

2.To toggle theme mode you can use the following code snippet:

  • core/shared/theme/theme_bloc.dart

  • change theme type in theme_state.dart

  • change enum named as ThemeType{light,dark}

About

Tattle Chat is a Flutter-based chat application designed for seamless and efficient communication.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages