“AskThrifty! Flutter UI Kit for Question and answer ” Documentation by “Thriftysoft” v1.1


“Flutter UI Kit for Question Answer Platform”

Created: 05/10/2020
Last Updated:05/10/2020
By: Thriftysoft
Email: admin@thriftysoft.tech

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Rate our item ⭐⭐⭐⭐⭐


Table of Contents

  1. Installation
  2. Getting Started
  3. How to use UI Kit
  4. Build & Install the App

A) Installation - top

It is a Flutter UI Kit for Question Answer mobile Application. Can be used for making Qoura clone, stackoverflow clone, interview questions application.It has more than 20 screens, widgets, empty states are given with different animations like Hero Animation, fade-in, pop-up, slide, etc. you can customize it as per your requirement. Since it is written in Flutter (Dart Language), so no need to write it separately for Android and IOS. The same code will be used for both platforms. The same code is used for iOS and Android.

Setting Flutter Environment

Follow base on the operating system on which you are installing Flutter:


B) Getting Started - top


C) How to use UI Kit - top

Read the details given below to know how you can reuse this UI kit in your own project. In the askthrifty-master directory you will find two subdirectories and a main.dart & model.dart file.


  1. Main File (main.dart)
  2. The main file should contains global configuration (Title / Themes / Font Family / Colors...) of the App and initiates the initial route of the app. As of now, we have called some provider in mail.dart file,to show the mock data in the application. you can remove that when working on your application



  3. Models (models)
  4. In this directory askthrifty-master/lib/models.dart you will find all models used in the App which you can link them with your backend (Firebase, PHP, JAVA, or other APIs).


    Questions Model

    This model has a sample class with variables to form a model for an questions. It is reusable and scalable.

    Example: //........ class Questions { String id; String category; String time; String content; int totalResponse; String validity; int color; Questions({ this.id, this.category, this.time, this.content, this.totalResponse, this.validity, this.color}); } .....//

  5. Provider (provider)
  6. This section holds provider code to fetch the data from the mock json files (askthrifty-master/assets/json), and show to the pages. you can Add API calls to integrate it with your backend

    //..... Future parseJsonAns() async { String jsonString = await _loadFromAsset("assets/json/answer.json"); var responseData = jsonDecode(jsonString); responseData.forEach((data){ Answer answermodel = Answer( id: data["id"], status: data["status"], time: data["time"], AnswerName: data["AnswerName"], content: data["content"], color: int.parse(data["color"]), ); answer.add(answermodel); }); answerList = AnswerList(answers: answer); } .......

  7. Screens (screens)
  8. These are the Screen available in askthrifty-master/lib/screens, ready to be used in your app. these includes login/signup, homepage, answers, bookmark, navigation drawer,profile, splash screen etc.

    HTML Structure

    homepage.dart

    This file provides a class which holds an impressive Homepage ui. That has two section Trending Questions & categorires.

    Example: //..... class ExploreCategoriesCards extends StatefulWidget { String title; Color color; Color imageColor; String image; ExploreCategoriesCards(this.title, this.color, this.imageColor, this.image); @override _ExploreCategoriesCardsState createState() => _ExploreCategoriesCardsState(image); } class _ExploreCategoriesCardsState extends State<ExploreCategoriesCards> { String image; _ExploreCategoriesCardsState(this.image); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.only(top: 10, right: 8, left: 8), child: Card( elevation: 10, shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( topRight: Radius.circular(30), bottomLeft: Radius.circular(30), topLeft: Radius.circular(5), bottomRight: Radius.circular(5), ), ), child: Container( height: 110, decoration: BoxDecoration( color: widget.color, borderRadius: BorderRadius.only( topRight: Radius.circular(30), bottomLeft: Radius.circular(30), topLeft: Radius.circular(5), bottomRight: Radius.circular(5))), child: Stack( children: <Widget>[ Padding( padding: const EdgeInsets.all(15.0), child: Align( alignment: Alignment(-0.7, 0.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( widget.title, style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white), ), ///

  9. Additional Components
  10. In the directory askthrifty-master/assets/ there are sample image files & mock json data that are used in this UI kit. These assets are only for demonstration purposes, Use your own assets in production.

    HTML Structure

D) Build & Install the App - top

  1. After you make all your changes and customizations save the project.
  2. Open Console, navigate to your project folder
  3. Run flutter pub get to install all dependencies
  4. Run flutter build apk --release you should get the apk file in the /output folder
  5. Run flutter install to install your application on your connected device

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Thriftysoft

Go To Table of Contents