Ultimate Flutter UI Kit

Documentation
Version: 1.0.0

by BisDig.com

Thank you for purchasing Ultimate Flutter UI Kit.

Introduction

The Ultimate Flutter UI Kit is an exceptional resource to kick-start your Flutter

project development. Our team has meticulously crafted this UI kit, complete with

comprehensive documentation and a user-friendly coding structure that's easy to

grasp. With this kit, you'll have access to a wide range of tools and features that will

enable you to create stunning user interfaces for your app. Whether you're an

experienced developer or just starting out, the Ultimate Flutter UI Kit is the perfect

solution for your needs. So why wait? Get started today and take your app

development game to the next level!

When you buy Ultimate Flutter UI Kit, you will get:

1. Source code in the flutter_ultimate_ui_kit folder

2. Documentation in the documentation folder.

3. A demo that can be accessed on the Playstore.

There are three components in the Ultimate Flutter UI Kit, namely:

1. Full Apps UI Kit, where you will receive a UI kit as a complete application. You

can extract this UI Kit and use it directly as a kick-starter for your project.

2. Custom Widgets, which are a collection of custom widgets, parts of an

application, such as headers, sliders, lists, and so on.

3. Screens, which are a collection of screens, for example, sign-in screen,

notification screen, profile screen, and so on.

How to Extract Flutter Code from the Ultimate Flutter UI Kit

The Ultimate Flutter UI Kit has dozens of full app templates, hundreds of screens,

and custom widgets ready for you to use in your Flutter project. To start using these

templates, screens, and widgets, you need to extract them first and then

incorporate them into your project.

First, you need to understand the folder structure we use in the Ultimate Flutter UI

Kit. There are three main folders inside the flutter_ultimate_ui_kit folder that you

need to pay attention to:

1. The /lib folder, where all Dart code is stored, and divided into three sub-folder:

a) The /fullapps sub-folder, which contains all the code for full app templates.

b) The /customwidgets sub-folder, which contains all the custom widgets that

you can use.

c) The /screens sub-folder, which contains all the code for screens.
2. The /assets folder, where all assets such as images, logos, vector files, and so

on, are kept.

3. The /fonts folder, where the fonts used in the UI Kit are stored.

Extracting Full App Template

There are dozens of full app templates that you can use as a kickstarter for your

Flutter project. Please choose a template that suits your project.

For instance, should you desire to utilize the Eccommerce App (Trendise) template

as a foundation for your forthcoming application. What you need to pay attention

to is the /lib/fullapps/trendise folder, the /assets/trendise folder, the /fonts folder, and

finally the pubspec.yaml file. Note that the name of the folder where the dart code

and assets are stored is the same as the name of the Full App UI Kit in question.
Here are the detailed steps, how to extract the full app template and use it in your

Flutter project, in this case I use Visual Code Studio as the editor, please adjust if

you use another editor.

1. Create a new Flutter project, by opening the Command Palette (Ctrl+Shift+P),

then selecting Flutter: New Project > Application

Select the Folder where your project will be created, then specify your Application

Name.

2. Wait until the project has been created, you will get a fresh new Flutter project.
3. Now go back to the flutter_ultimate_ui_kit folder. Locate the folder

/lib/fullapps/trendise, inside it, you can find:

a) The /data_models folder, where all model data for the Trendise application is

stored.

b) The /screens folder, where all the dart code for the screen is stored

c) The /widgets folder, where all the dart code for the widget is stored

d) The constant.dart file, contains constant settings, for example color and so

on.

e) The theme.dart file, contains theme settings for the application.

f) The main.txt file, this file will replace the main.dart file from your application.

Copy and paste all the folders and files above into your project's /lib folder.

Then open the main.txt file and copy and paste its contents into your project's

main.dart file, replacing the original content.

4. Create /assets folder in the root of your project, then copy the /assets/trendise

from /flutter_ultimate_ui_kit and paste under it, so that you get the asset folder

arrangement as below.

5. Copy /fonts folder with all of its content from flutter_ultimate_ui_kit into the root

of your new project.

6. Now it's time to add the assets and fonts paths to the pubspec.yaml file. Open

your project's pubspec.yaml file and add the path as shown below:

assets:
- assets/trendise/

Next, add the font path to pubspec.yaml, copy and paste the code below:

fonts:
- family: Poppins
fonts:
- asset: fonts/Poppins/Poppins-Regular.ttf
- asset: fonts/Poppins/Poppins-Medium.ttf
- asset: fonts/Poppins/Poppins-SemiBold.ttf
- asset: fonts/Poppins/Poppins-Bold.ttf
weight: 700
Pay attention to the indentation, as a writing reference, it's easier for you to

copy directly from the pubspec.yaml file of /flutter_ultimate_ui_kit.

7. Next, go back to your project's /lib folder. It’s possible that one or more dart files

have errors like the example below, this error is related to dependencies. To fix

this, open the files and easily solve it using Quick Fix.

In this case, there are erros in social_button.dart. Please open the file, then

access the Quick Fix prompt by placing the cursor on the part where the error
 occurs, then press (Ctr+ .) and select Add 'flutter_svg' to dependencies. Wait

until the process of adding dependencies is complete.

8. After all dependency errors are resolved, now is the time to debug your project

by pressing the F5 key. Next, you can start customizing the project you just

created.
For your reference, here are the location of the dart files and assets folder:

1. News App (AAN News) can be found at lib/fullapps/aannews folder, and

assets/aannews folder.

2. Car Rental App (Carent) can be found at lib/fullapps/carent folder, and

assets/carent folder.

3. Messaging App (ChatApp) can be found at lib/fullapps/chatapp folder, and

assets/chatapp folder.

4. Movie Ticket Booking App (Cinemate) can be found at lib/fullapps/cinemate,

and folder assets/cinemate folder.

5. Video Conference App (Comu) can be found at lib/fullapps/comu folder, and

assets/comu folder.

6. Freelancer Marketplace App (Frilan) can be found at lib/fullapps/frilan folder,

and assets/frilan folder.

7. On-demand Home Service App (Huma) can be found at lib/fullapps/huma

folder, and assets/huma folder.

8. eLearning App (iLearn) can be found at lib/fullapps/ilearn folder, and

assets/ilearn folder.

9. Social Media App (Instago) can be found at lib/fullapps/instago folder, and

assets/instago folder.

10. Job Finding App (JobScout) can be found at lib/fullapps/jobscout folder, and

assets/jobscout folder.

11. Music Podcast App (Nada) can be found at lib/fullapps/nada folder, and

assets/nada folder.

12. NFT Marketplace App (NFTSea) can be found at lib/fullapps/nftsea, and folder

assets/nftsea folder.

13. Recipe and Meal Planner App (Recipemate) can be found at

lib/fullapps/recipemate folder, and assets/recipemate folder.

14. Food Delivery App (Sedop) can be found at lib/fullapps/sedop folder, and

assets/sedop folder.

15. Ride Hailing App (Taxy) can be found at lib/fullapps/taxy folder, and assets/taxy

folder.
16. Travel App (Travel) can be found at lib/fullapps/travel folder, and assets/travel

folder.

17. Ecommerce App (Trendise) can be found at lib/fullapps/trendise folder, and

assets/trendise folder.

18. Streaming Platform App (VideoFlix) can be found at lib/fullapps/videoflix folder,

and assets/videoflix folder.

19. E-Book / Novel App (Wonderead) can be found at lib/fullapps/wonderead folder,

and assets/wonderead folder.

20. Mail Client App (Zmail) can be found at lib/fullapps/zmail folder, and

assets/zmail folder.
Customizing Your App

The Ultimate Flutter UI Kit is a remarkable tool that allows developers to create

highly customizable apps with unique identities. With its user-friendly design, the

Ultimate Flutter UI Kit makes it effortless for developers to personalize their apps

and give them a distinctive touch. The kit's versatility and flexibility enable

developers to tailor their apps according to their specific requirements, making it

an ideal choice for various types of projects. Whether you're building an e-

commerce app or a social media platform, the Ultimate Flutter UI Kit has got you

covered. Overall, the Ultimate Flutter UI Kit is an excellent choice for anyone looking

to build custom apps quickly and effortlessly while maintaining a high level of

quality and professionalism.

Customizing the Color Scheme

If you're looking to switch up the color scheme of your app, there's an easy way to

do it. Simply navigate to the /lib/constants.dart file and adjust the constant value

associated with the desired color. This will allow you to modify all elements in your

app that utilize that particular color, making for a quick and seamless transition.

Whether you're aiming for a bold new look or simply want to freshen things up, this

method provides a simple solution for updating your app's aesthetic.

Customizing the Theme

If you want to switch up the look and feel of your application, one way to do so is by

accessing the /lib/theme.dart file. Once you're there, you'll be able to tweak a variety

of elements that make up your app's default theme. For instance, you can adjust

the background color of the Scaffold (the base layer for your app), change the font

size to better suit your preferences, or even modify the color and style of the

AppBar (the bar at the top of your screen). Other details that are fair game for

customization include icon size and color, among others. By taking advantage of

all these options, you can create a unique experience that truly reflects your vision

for your application.

Customizing the Font

The Ultimate Flutter UI Kit provides the option to use custom fonts into your Flutter-

project. Here are the detail steps:

1. Upload your custom font into the /fonts folder.

2. Define your new font in pubscpec.yaml.

3. Open the /lib/theme.dart file, then change fontFamily of ThemeData to “Muli”

Extracting Custom Widget

Ultimate Flutter UI Kit boasts an extensive collection of custom widgets that are

readily available for integration into your Flutter projects. You can extract the

custom widget in a fairly straight forward way, all you need do is select and copy

the desired code then paste it directly into your project's dart file.

All of the custom widgets included in the Ultimate Flutter UI Kit can be located

within /lib/customwidgets folder, and each widget will be in its own subfolder. For

example, the entire custom AppBar will be in the lib/customwidgets/appbar folder,

the Bottom Navigation Bar will be in the lib/customwidgets/buttomnavigationbar

folder, and so on. The complete custom widgets folder structure is as follows:
And each widget folder has lots of custom widgets that you can choose and use

according to your project. For example, the AppBar folder has more than 20

custom widgets.

The following are detailed steps for extracting custom widgets in the Ultimate

Flutter UI Kit:

1. As an example, if you want to use the App Bar 1 widget in your project, you can

find the Dart code for that widget in the file

lib/customwidgets/appbar/appbar_1.dart. Please open that file.

2. After opening the file, search for the app bar code. You will find that our code is

accompanied by extensive documentation in the form of comments. Once

you locate the intended code, please copy the entire code into your project.
3. For some widgets, you might encounter an error after integrating them into

your project, and there are two possible scenarios:

a) Asset path issues: If this happens, adjust the asset path. For instance, if the

custom widget uses an asset like "assets/instago/avatar_1.jpg", to resolve

the error, you need to match the asset path of your project.

b) Dependency issues: If this occurs, you can add the dependency to the

pubspec.yaml file. You can easily do this via Quick Fix.

Extracting Screen

The Ultimate Flutter UI Kit is a comprehensive collection of screens that are readily

available for integration into your project. With this kit, you'll have access to a

variety of screens such as chat screen, notification screen, sign-in screen, and

many more. The list below provides the names of each screen and their

corresponding folder locations, simplifying the process of using them in your

project. Whether you're a beginner or an experienced developer, this versatile UI kit

is designed to cater to your needs and help you create stunning user interfaces

effortlessly.

1. Chat screen can be found at lib/screens/chat

2. Membership screen can be found at lib/screens/membership

3. Notification screen can be font at lib/screens/notifications

4. Onboarding screen can be font at lib/screens/onboarding

5. Password recovery screen can be font at lib/screens/password_recovery

6. Payment screen can be font at lib/screens/payment

7. Preference screen can be font at lib/screens/preference

8. Profile screen can be font at lib/screens/profile

9. Review screen can be font at lib/screens/review

10. Search screen can be font at lib/screens/search

11. Setting screen can be font at lib/screens/setting

12. Sign in screen can be font at lib/screens/signin

13. Sign up screen can be font at lib/screens/signup

14. Splash screen can be font at lib/screens/splash

15. Success screen can be font at lib/screens/success

16. Verification screen can be font at lib/screens/verification

Here are the steps to extract screens from the Ultimate Flutter UI Kit:

1. For example, if you wish to use chat list screen 1 in your project.

2. You can find the code for chat list screen 1 in

lib/screens/chat/chat_list_screen_1.dart.

3. Copy chat_list_screen_1.dart, then paste it into the /lib folder of your project.

4. For some screens, you might encounter an error after integrating them into

your project, and there are two possible scenarios:

c) Asset path issues: If this happens, adjust the asset path. For instance, if the

screen uses an asset like "assets/instago/avatar_1.jpg", to resolve the error,

you need to match the asset path of your project.

d) Dependency issues: If this occurs, you can add the dependency to the

pubspec.yaml file. You can easily do this via Quick Fix.