Listar Flux

Mobile directory listing app template for Flutter

Welcome To Listar Flux - Mobile directory listing app template documentation.

Firstly, a huge thanks for purchasing this template, your support is truly appreciated!

This document covers the installation and use of this template and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties.

If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support section.

Screens

Features

Application Demo

Available download on App Store & Google Play

Go ahead to know more.

Getting Start

1. System Requirements

Base on Flutter requirement. Please select the operating system on which you are installing Flutter:

2. Installation

After unzip the download package, you'll found a source folder with all the files. The main source code is here. Please see image below.

How to run Listar Flux with Android ?

- First, Please using your Android Studio (3.5.3 or last version)
- Android SKD: Please check your Android Studio has installed last SDK. This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android
- Make sure you aldready Set up the Android emulator (https://flutter.dev/docs/get-started/install/macos#set-up-the-android-emulator)

Open Android Studio > Open an existing Android Studio project > Select folder ./source

How to run Listar Flux with Ios?

Before you run Listar Flux project, please make sure you have followed the guideline for Ios https://flutter.dev/docs/get-started/install/macos

Access to the folder ./source (main source code) and run the command 

					open -a Simulator
					flutter run

After run these command above successful, the result will be like image below

Source Structure

Config Files

File locate: ./lib/configs/..

Widget

File locate: ./lib/widgets/..

Contains all UI widget of application like: Button, Loading, Star Rating, Item, Card, Message ...

Blocs

Contains all Blocs pattern of the application

Screens

File locate: ./lib/screens/..

Contains all screens of the application

All template design of the app are locate in here (./lib/screens/..). You could change or re-structure by matching with your own project structure design.

Assets

File locate: ./assets/..

You can store images, fonts or other file resource in this folder

Models

File locate: ./lib/models/..

We defined data model for each screen, all data will be load through data model class

Utils

File locate: ./lib/utils/..

Contains all utils function like validate form, logger, switch mode theme, color ... It looks like helper functions

Theming

First, please refer more how to use themes to share colors and font styles from Flutter official docs

Font Family

The default font family name "Raleway" are being used for this template. If you need change or a custom font to be the prettiest? You'll need the .ttf files for all supported styles (thin, ultraLight, light, regular, medium, semibold, bold, heavy, black ...). Here are the few steps you need to add it.

Add more font family in folder ./assets/fonts/..

Example: Download and add more font Roboto [download here]



Open file ./lib/configs/theme.dart 

				static String currentFont = "Raleway";

Color

General

The template are using color palette following format by image below



You can change the theme prop dynamically and all the components will automatically update to reflect the new theme. Open file ./lib/configs/theme.dart 

				///Default Theme
				static ThemeModel currentTheme = ThemeModel.fromJson({
					"name": "Default",
					"color": Color(0xffe5634d),
					"light": "primaryLight",
					"dart": "primaryDart",
				});

If you want change or modify color. Open file ./lib/configs/theme_collection.dart

If you want to customize colors or for matching with your business colors. Just refer more with websites below for pickup right color palettes

Multiple Color

The template application support multiple color. User enable to change other pattern color.

First check define list color patterns are anable to selected. Open file ./lib/configs/theme.dart 

				///List Theme Support in Application
				static List themeSupport = [
					{
					"name": "default",
					"color": Color(0xffe5634d),
					"light": "primaryLight",
					"dark": "primaryDark",
					},
					{
					"name": "brown",
					"color": Color(0xffa0877e),
					"light": "brownLight",
					"dark": "brownDark",
					},
					{
					"name": "pink",
					"color": Color(0xffe0a6c1),
					"light": "pinkLight",
					"dark": "pinkDark",
					},
					{
					"name": "orange",
					"color": Color(0xfff6bb41),`
					"light": "pastelOrangeLight",
					"dark": "pastelOrangeDark",
					},
					{
					"name": "green",
					"color": Color(0xff93b7b0),
					"light": "greenLight",
					"dark": "greenDark",
					},
				].map((item) => ThemeModel.fromJson(item)).toList();

Then define more theme collection. Open file ./lib/configs/theme_collection.dark

Language

First, please check file ./lib/configs/language.dark and define your list language support 

				import 'package:flutter/material.dart';
					class AppLanguage {
					///Default Language
					static Locale defaultLanguage = Locale("en");

					///List Language support in Application
					static List supportLanguage = [
						Locale("en"),
						Locale("vi"),
						Locale("ar"),
						Locale("zh"),
						Locale("ko"),
						Locale("ja")
					];

					///Singleton factory
					static final AppLanguage _instance = AppLanguage._internal();

					factory AppLanguage() {
						return _instance;
					}

					AppLanguage._internal();
					}

Then define your json lanuage in folder following your list language ./assets/locale/..

App Name & Icon

This project also allow change application name & icon

Change the app name

IOS
Open file ./ios/Runner/Info.plist and replace the Listar Flux with your app branch name. 

				CFBundleName
				Listar Flux

Android
Open file ./android/app/src/main/res/values/AndroidManifest.xml and replace Listar Flux with your app branch name
Change the app Bundle ID

IOS
Using Xcode and open ios project then modify it

Android
Searching "com.huynh.listar_flutter" in folder ./android/... then modify it

Change the app Icon

IOS

Android

Change GoogleMap Key

First please check how to register GoogleMap key from https://developers.google.com/maps/documentation/embed/get-api-key
Search in project exist GoogleMap key AIzaSyBRB5_8rkANX4dYFkqQ8hIDE60ELN4TCt8
File locate
- Ios: ./source/ios/Runner/AppDelegate.swift
- Android: ./source/android/app/src/main/AndroidManifest.xml

Android

IOS

Faq

Dose it connect any API ?

No, It dose not. It just included template only. We do not connect any API. You have to develop by yourself for matching with your biz.

Dose it collection user information ?

No, It dose not. The mobile template application just simple application with UX/UX.

Can I release the app to both iOS and Android?

Yes, this app is made by Flutter framework which support to release for both iOS and Android, please discover more the framework from 

Will I get the free upgrade on next coming version ?

Yes, you will get the free upgrade with more awesome features coming. You will get the notify email for new version update on stores.

Troubleshooting

Support Issue Channel on Github
github.com/passionui/support/issues

Sources and Credits

We based on Flutter Framework for develop template app.

We have used the following plugins, fonts & images. All fonts, images, icons used in this template are free for commercial use.

Resources



Once again, thank you so much for purchasing this theme.

As I said at the beginning, We'd be glad to help you if you have any questions relating to this theme.

I'll do our best to assist.

Rate for us

Don't forget rate for us via https://codecanyon.net/downloads

Thanks