# ⚡ Getting Started
Setting up flutter code
## Getting Started with FlutFast
Welcome to FlutFast! This guide will walk you through the steps to get started with using our repository.
### Table of Contents
* Introduction
* Installation
* Usage
### Introduction
FlutFast is a Flutter development companion that streamlines the development process and provides essential components and pages to kickstart your projects. This guide will help you set up the repository and start using FlutFast Premium effectively.
### Installation
To get started with FlutFast Premium, follow these steps:
1. Clone the repository to your local machine:
```bash
git clone https://github.com/bluzeey/flutfast-premium.git
```
2. Navigate to the cloned directory:
```bash
cd flutfast-premium
```
3. Install dependencies using `flutter pub get`:
```bash
flutter pub get
```
4. Open the project in your preferred Flutter IDE (e.g., Android Studio, VSCode).
# Flutter Basics (For Beginners)
For people starting with Flutter.
## Introduction to Flutter
Flutter is an open-source UI software development kit created by Google. It is used to develop applications for mobile, web, and desktop platforms from a single codebase. Flutter uses the Dart programming language and provides a rich set of pre-built widgets for building beautiful and highly performant user interfaces.
### Basics of Flutter
#### 1. MaterialApp Widget
The `MaterialApp` widget is the root of a Flutter application. It configures the top-level navigation and theme for the app.
**Code Snippet:**
```dart
dartCopy codeimport 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter App'),
),
body: Center(
child: Text('Hello, Flutter!'),
),
),
);
}
}
```
#### 2. Scaffold Widget
The `Scaffold` widget provides a framework for implementing basic material design layout structures. It includes components such as app bars, drawers, and floating action buttons.
**Code Snippet:**
```dart
dartCopy codeScaffold(
appBar: AppBar(
title: Text('Flutter App'),
),
body: Center(
child: Text('Hello, Flutter!'),
),
)
```
#### 3. AppBar Widget
The `AppBar` widget displays a toolbar at the top of the screen. It typically contains the app's title, leading and trailing actions, and optional navigation icons.
**Code Snippet:**
```dart
dartCopy codeAppBar(
title: Text('Flutter App'),
)
```
#### 4. Center Widget
The `Center` widget aligns its child widget in the center of its parent widget.
**Code Snippet:**
```dart
dartCopy codeCenter(
child: Text('Hello, Flutter!'),
)
```
#### 5. Text Widget
The `Text` widget displays a string of text on the screen.
**Code Snippet:**
```dart
dartCopy codeText('Hello, Flutter!')
```
### Conclusion
Flutter provides a powerful and intuitive framework for building cross-platform applications. By leveraging its rich set of widgets and tools, developers can create stunning and performant user interfaces with ease. Whether you're a beginner or an experienced developer, Flutter offers a seamless development experience and enables you to bring your ideas to life across multiple platforms.
# Components
The current page is all about AppBars.
*
# Appbars
# Buttons
Images for how the buttons look like. (Inspired from Flowbite)
### Outline Buttons
### Gradient Duotone Buttons
### Social Buttons
### Regular Buttons
# Page
# Inputs
The input components with the repository.
## Icon Inputs
## Input field with label
# Typography
The typography folder contains different text styles. Here's a preview:
# Navbars
# Dividers
# End Drawers
There are 3 end drawer components variations available in the repository.
# Firebase
How to start with Firebase ?
## Initializing Firebase in Flutter Application
### Step 1: Install Node Modules Firebase Tools
Before initializing Firebase in your Flutter application, make sure you have Node.js and npm (Node Package Manager) installed on your machine. If not, you can download and install them from [Node.js official website](https://nodejs.org/).
Once Node.js and npm are installed, open your terminal and run the following command to install Firebase tools globally:
```bash
npm install -g firebase-tools
```
### Step 2: Refresh the Window
After installing Firebase tools, it's a good practice to refresh your terminal or restart it to ensure the changes take effect.
### Step 3: Log In to Firebase
To interact with Firebase services, you need to log in using the Firebase CLI. Run the following command and follow the prompts to log in:
```bash
firebase login
```
### Step 4: Configure Firebase in Flutter Application
Now, navigate to your Flutter application directory in the terminal. Run the following command to configure Firebase for your Flutter project:
```bash
dart pub global run flutterfire_cli:flutterfire configure
```
This command will guide you through the configuration process, prompting you to select the Firebase services you want to use (such as Firestore, Authentication, etc.) and collect necessary information like Firebase project ID, API key, etc.
Follow the prompts, and the FlutterFire CLI will automatically set up the required dependencies and configurations in your Flutter project.
### Step 5: Verify Configuration
After completing the configuration, it's recommended to verify that Firebase has been properly initialized in your Flutter project. You can do this by checking the relevant configuration files and ensuring the necessary dependencies have been added to your `pubspec.yaml` file.
# Models
The models which has been provided with the templates.
## User Model
The `UserModel` represents the data structure for user information in the application.
### Properties
* **username** (String): The username of the user.
* **email** (String): The email address of the user.
* **password** (String): The hashed password of the user.
* **authToken** (String): The authentication token associated with the user.
### Methods
#### `fromJson(Map json) -> UserModel`
Creates a `UserModel` instance from a JSON map.
#### `toJson() -> Map`
Converts the `UserModel` instance to a JSON map.
#### `copyWith({String? username, String? email, String? password, String? authToken}) -> UserModel`
Creates a copy of the `UserModel` with optional modified properties.
# Services
## User Service
The `UserService` class provides methods for user authentication and handling user data.
### Methods
#### `authenticateUser({required String username, required String password}) -> Future`
Authenticates a user based on the provided username and password.
#### `isAuthenticated() -> bool`
Checks if a user is currently authenticated.
#### `getCurrentUser() -> UserModel?`
Retrieves the current authenticated user.
#### `logout() -> void`
Logs out the current user.
#### `updateUserProfile(UserModel newUser) -> void`
Updates the user profile with the provided `UserModel` instance.
# Shared Preferences
How to use it ?
## Using Shared Preferences in Flutter
### What is Shared Preferences?
Shared Preferences is a simple key-value pair storage system in Flutter that allows you to persistently store small amounts of data locally on a device. It serves as a basic form of local storage, retaining data even when the application is terminated.
### Basic Definition
In Flutter, Shared Preferences is commonly used for storing simple pieces of information, such as user preferences, authentication tokens, or any other data that needs to be maintained between app sessions.
### Use Cases
#### 1. User Preferences
Store and retrieve user-specific preferences, such as theme settings, language preferences, or notification settings.
#### 2. Authentication
Persist authentication tokens locally to keep users logged in across app launches.
#### 3. App Settings
Save and load application settings, allowing users to customize their app experience.
#### 4. Quick Data Storage
For small, non-sensitive data that needs to be retained locally, like high scores, user progress, etc.
### Caution: Use Cases and Limitations
While Shared Preferences is convenient for storing small amounts of data, it's important to note that it may not be the best choice for all scenarios. Avoid using Shared Preferences for sensitive data or large amounts of data, as it is not secure and may impact app performance.
Here's a sample code for you:
```
class _MyHomePageState extends State {
final String key = 'counter';
int _counter = 0;
@override
void initState() {
super.initState();
_loadCounter();
}
_loadCounter() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
setState(() {
_counter = prefs.getInt(key) ?? 0;
});
}
_incrementCounter() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
setState(() {
_counter = (prefs.getInt(key) ?? 0) + 1;
prefs.setInt(key, _counter);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shared Preferences Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Counter Value:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
```
### Code Sample
To use Shared Preferences in a Flutter application, add the following dependency to your `pubspec.yaml` file:
```yaml
dependencies:
shared_preferences: ^2.0.9
```
# Flutter Bloc State Management
## Introduction to Flutter Bloc
Flutter Bloc is a state management library for Flutter that helps developers manage the state of their application in a predictable and efficient way. Bloc stands for Business Logic Component, and it follows the principles of reactive programming to handle state changes.
### Basics of Flutter Bloc
#### 1. BlocProvider Widget
The `BlocProvider` widget is used to provide a bloc instance to its descendants. It allows widgets to access the bloc and rebuild when the bloc's state changes.
**Code Snippet:**
```dart
dartCopy codeBlocProvider(
create: (context) => CounterBloc(),
child: CounterPage(),
)
```
#### 2. BlocBuilder Widget
The `BlocBuilder` widget listens to the state changes emitted by a bloc and rebuilds its child widget in response to those changes.
**Code Snippet:**
```dart
dartCopy codeBlocBuilder(
builder: (context, state) {
return Text(
'Counter Value: ${state.counter}',
style: TextStyle(fontSize: 20),
);
},
)
```
#### 3. BlocListener Widget
The `BlocListener` widget listens to the state changes emitted by a bloc but does not rebuild its child widget. It is useful for performing side-effects in response to state changes.
**Code Snippet:**
```dart
dartCopy codeBlocListener(
listener: (context, state) {
if (state is AuthenticationSuccess) {
Navigator.of(context).pushReplacementNamed('/home');
} else if (state is AuthenticationFailure) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Error'),
content: Text('Authentication failed!'),
actions: [
FlatButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('OK'),
),
],
),
);
}
},
)
```
#### 4. Bloc Events and States
Bloc events are dispatched to trigger state changes in the bloc. Bloc states represent the different states of the application based on the events processed by the bloc.
**Code Snippet:**
```dart
dartCopy codeclass CounterEvent {}
class IncrementEvent extends CounterEvent {}
class DecrementEvent extends CounterEvent {}
abstract class CounterState {}
class CounterInitial extends CounterState {
final int counter;
CounterInitial(this.counter);
}
class CounterBloc extends Bloc {
CounterBloc() : super(CounterInitial(0));
@override
Stream mapEventToState(CounterEvent event) async* {
if (event is IncrementEvent) {
yield CounterInitial(state.counter + 1);
} else if (event is DecrementEvent) {
yield CounterInitial(state.counter - 1);
}
}
}
```
### Conclusion
Flutter Bloc simplifies state management in Flutter applications by providing a clear and structured way to manage application state. By leveraging the Bloc pattern, developers can create scalable and maintainable applications with ease. Whether you're building a simple counter app or a complex enterprise-level application, Flutter Bloc offers a powerful solution for managing state and keeping your codebase organized.
# In App Purchases
# Flutter Native Splash
Creating your custom native splash screen
The pubspec yaml already would contain all the configuration which you need. Just change the image by updating the image you want in your native screen. Also you can change the color of the screen
\
\
After adding your image to `pubspec.yaml`, run the following command in the terminal:
```
dart run flutter_native_splash:create
```
# Backend
# Getting Started
Setting up the backend.¯
## Introduction
This page just runs you through the documentation for the server side code. It is nodejs typescript server.
#### Setting Up the Environment
To get started with Express.js and OpenAI, you'll need to set up your development environment. Make sure you have Node.js installed on your system, and then install the necessary dependencies by running:
```bash
npm install express openai dotenv
```
#### Using Express.js
Express.js follows the middleware pattern, which allows you to chain together functions to handle incoming HTTP requests. Here's a brief overview of how Express.js works:
1. **Middleware**: Express.js uses middleware functions to process incoming requests before they reach your route handlers. Middleware functions can perform tasks such as logging, authentication, data parsing, and error handling.
2. **Routing**: Express.js provides a simple and flexible routing mechanism to define routes for different HTTP methods and URL paths. You can define route handlers to process incoming requests and send back appropriate responses.
3. **Error Handling**: Express.js allows you to define error-handling middleware to catch and handle errors that occur during request processing. This helps ensure that your application remains robust and stable.
#### Using OpenAI API
Once you have set up Express.js, you can integrate the OpenAI API into your application to leverage its powerful natural language processing capabilities. Here's a basic example of how to use the OpenAI API:
1. **Initialize OpenAI Client**: Create an instance of the OpenAI client and provide your API key obtained from the OpenAI website.
2. **Invoke API Methods**: You can use various methods provided by the OpenAI client to interact with the API. For example, you can use the `completion` method to generate text based on a prompt.
#### Example Application
The provided code sets up an Express.js server with a simple route that returns "Hello World!" when accessed. It also demonstrates how to handle errors using middleware. Additionally, it initializes the OpenAI client using the API key stored in the environment variables.
#### Conclusion
With the combination of Express.js and OpenAI, you can build powerful web applications and APIs that leverage advanced natural language processing capabilities. This documentation provides a starting point for integrating these technologies into your projects. Happy coding!
# Working with Open AI
Open Ai methods in the backend.
## OpenAI Methods Documentation
This file contains various functions utilizing the OpenAI API for different purposes.
### Initialization
Before using any OpenAI functions, ensure that you have initialized the API client with your API key.
### Functions
#### chatCompletion()
This function allows interactive chat with an AI model. It sends a series of messages between the user and the assistant, generating responses from the AI model based on the conversation.
#### generateImage()
This function generates an image based on a given prompt. It utilizes the DALL-E model to create an image that corresponds to the provided description.
#### readingImage()
This function describes the content of an image. It takes an image URL as input and uses the GPT-4 Vision Preview model to generate a textual description of the image.
#### moderateInput()
This function moderates input text for inappropriate content. It sends a text input to the moderation API, which analyzes the text and returns a moderation decision.
### Usage
These functions can be imported into your application and called as needed to leverage the capabilities of the OpenAI API for various tasks.
# Supabase Connection (in works)
# Analytics (Mixpanel)
Using Mixpanel Flutter for capturing events that matter.
## Mixpanel Event Tracking Documentation
This file contains functions to track various events using Mixpanel.
### Initialization
Mixpanel must be initialized with your project token before using the tracking functions.
### Functions
#### `trackEvent(eventName: string, userId: string, properties?: Record): void`
This function tracks a custom event with Mixpanel. It requires the event name, user ID, and optionally additional properties.
#### `trackSignedUp(userId: string, signupType: string, plan: string): void`
Tracks the event when a user signs up for the application. Requires the user ID, signup type, and plan chosen by the user.
#### `trackLoggedIn(userId: string, loginMethod: string): void`
Tracks the event when a user logs in to the application. Requires the user ID and the method used for login.
#### `trackProductViewed(userId: string, productId: string, category: string): void`
Tracks the event when a user views a product. Requires the user ID, product ID, and category of the product.
#### `trackItemAddedToCart(userId: string, productId: string, quantity: number): void`
Tracks the event when a user adds an item to their shopping cart. Requires the user ID, product ID, and quantity added.
#### `trackOrderCompleted(userId: string, orderId: string, totalAmount: number, paymentMethod: string): void`
Tracks the event when a user completes an order. Requires the user ID, order ID, total amount of the order, and payment method.
#### `trackPageViewed(userId: string, pageUrl: string, pageTitle: string): void`
Tracks the event when a user views a specific page. Requires the user ID, URL, and title of the page.
These functions can be used to track user interactions and behaviors within your application using Mixpanel.
# Github CI/CD
# SendGrid
Using Sendgrid for sending Transactional Emails
Sign up for SendGrid
1. **Account Creation**: Sign up for a free SendGrid account to send up to 100 emails daily.
2. **Enable Two-Factor Authentication (2FA)**: Secure your account with 2FA via SMS or Authy app.
3. **Create API Key**: Generate a SendGrid API key for limited actions.
* Use "Restricted Access" with "Mail Send" permissions set to "Full Access".
* Store the API key securely in an environment variable (e.g., `SENDGRID_API_KEY`).
4. #### Verify Your Sender Identity
Ensure legitimate sending behavior:\
Links for reference.\
\
5. Here's a sample code block for creating( sending ) a message:
\
`const sgMail = require('@sendgrid/mail');`
`sgMail.setApiKey(process.env.SENDGRID_API_KEY);`
`const msg = { to: 'test@example.com', // Change to your recipient from: 'test@example.com', // Change to your verified sender subject: 'Sending with SendGrid is Fun', text: 'and easy to do anywhere, even with Node.js', html: '`**`and easy to do anywhere, even with Node.js`**`', };`
`sgMail .send(msg) .then((response) => { console.log(response[0].statusCode); console.log(response[0].headers); }) .catch((error) => { console.error(error); });`
Run the `index.js` file with Node.js. If you see a 202 status code printed, the message was sent successfully. Check the recipient's inbox for the demo message. If not received, check the spam folder.
For troubleshooting, refer to the API response message documentation. Responses are in JSON format, specified by the Content-Type header. The Web API v3 provides response codes, content-type headers, and pagination options for interpreting API responses.
**Here are some Email Formats**
**Welcoming to our app**
`{ "to": "recipient@example.com", "from": "sender@example.com", "subject": "Welcome to Our App!", "text": "Hello there! Welcome to our mobile app. We're excited to have you on board.", "html": "Hello there!Welcome to our mobile app. We're excited to have you on board." }`
**Important Announcement**
```
{ "to": "user123@example.com",
"from": "noreply@example.com",
"subject": "Important Announcement",
"text": "Dear User, we wanted to inform you about some important updates to our app.
Please log in to your account for more details.",
"html": "Dear User,We wanted to inform you about some important updates to our app.
Please log in to your account for more details." }
```
### Informing about Recent Purchase
`{ "to": "customer@example.com", "from": "support@example.com", "subject": "Your Recent Purchase", "text": "Hi there! We wanted to confirm that your recent purchase has been successfully processed. Thank you for choosing our service.", "html": "Hi there!We wanted to confirm that your recent purchase has been successfully processed. Thank you for choosing our service." }`
// Password Reset Request { "to": "", "from": "", "subject": "Password Reset Request", "text": "Dear User, we received a request to reset your password. If you did not initiate this request, please ignore this email. To reset your password, click on the following link: \[Password Reset Link]", "html": "
Dear User,
We received a request to reset your password. If you did not initiate this request, please ignore this email.
To reset your password, click on the following link: \Reset Password
" }
# RevenueCat Integration
Setting up Revenue Cat for In-App Purchases
