Redditech: use the Reddit API in order to build a mobile app

Related tags

Templates redditech
Overview

Redditech

Introduction

Redditech is an IT project in which we had to use the Reddit API (https://www.reddit.com/dev/api/) in order to build a mobile app.

 

For this reason we used some tools and language:

- Dart SDK version : 2.13.1 (https://dart.dev/)

- Flutter version : 2.2.1 (https://github.com/flutter/flutter.git)

- HTML (HyperText Markup Langage)

- Swift

- Android Studio version : 2020.3.1 Patch 2 (https://developer.android.com/)

 


Table of contents

User Documentation


This part of the documentation is intended for users and will explain how to install the application and how to use it.


How to install


1. Click on the application.

2. Click on the button "Login with Reddit"

3. Put your Reddit ID (Name and Password)

4. Scroll down and accept the terms

 

You are now on the application, I invite you to look at the different features of our application in the section Features to understand the uses of the application

 


Features


 

- Profile -

You will find different information there such as a description indicating the number of subscribers and a preference section which will allow you to know the multiple configurations that you have made on your Reddit account.

 

- New -

In the New's part you will find the new posts according to your preferences.

 

- Popular -

In the ** Popular ** section you will find the most popular posts from Reddit.

 

- All -

In the All section you will find other contents.

 

- Comment and Vote up -

You can also see below each post an up arrow (Vote top) and a chat bubble (Commentraire). It indicated the number of comments and Votes top that there were per post.

 

Developer Documentation


This part of the documentation is for developers and will walk you through the most important parts of the code.

Installation / Configuration


To test our application on an emulator you will need to install Flutter and Android Studio. If you haven't already done so, I invite you to go to Introduction and install the applications with the links.


 

Back-End


 

Get Some Data From API

getme() async {
    final response = await Dio().get(
      "https://oauth.reddit.com/api/v1/me",
      options: Options(headers: <String, dynamic>{
        'Authorization': 'Bearer $accessToken',
        'content-Type': 'application/x-www-form-urlencoded',
      }),
    );

    Map<dynamic, dynamic> result = response.data;
    Map<String, dynamic> data = Map<String, dynamic>();
    for (dynamic type in result.keys)
      data[type.toString()] = result[type];
}

 

WebView

Widget build(BuildContext context) {
    return Container(
    child: 
       WebView(
        initialUrl: 'https://www.reddit.com/api/v1/authorize.compact?client_id=$client_id&response_type=code&state=test&redirect_uri=$redirect_url&duration=permanent&scope=identity,edit,flair,history,modconfig,modflair,modlog,modposts,modwiki,mysubreddits,privatemessages,read,report,save,submit,subscribe,vote,wikiedit,wikiread',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) {
          controller = controller;
        },
        navigationDelegate: (NavigationRequest request) {
          if (request.url.startsWith("http://localhost")) {
            var pos = request.url.lastIndexOf('=');
            var code = (pos != -1)
                ? request.url.substring(pos + 1, request.url.length - 2)
                : request.url;
            postCode(code);
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      )
    );
  }

 


 

Front-end


 

Bottom Navigation Bar

BottomNavigationBar(
        backgroundColor: Colors.red[900],
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.list_alt),
            label: 'New',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            label: 'Popular',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.all_out),
            label: 'All',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.portrait),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.grey[500],
        onTap: _onItemTapped,
      ),

Display Information

Example :

static ProfileViewPicture(src) { ## Example : Function to display the user's picture
    return Container(
      child: ClipOval(
        child: Image.network(
            src,
            fit: BoxFit.fill,
            width: 256,
            height: 256,
        ),
      )
    );
  }
  static ProfileViewRender(name, subscriber, src, hidedowns, over_18, lang, videoAutoplay, hideAds, enableFollowers) { ## Main function to display in window
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          children: [
            SizedBox(height: 70.0),
            ProfileViewPicture(src), ## Call the function
            ## Call other functions
          ],
        )
      )
    );
  }

 


You might also like...

A flutter list view which can drag & move item to change order.

A flutter list view which can drag & move item to change order.

draggable_flutter_list A flutter list view which can drag & move item to change order. some codes come from flutter_list_drag_and_drop fix flutter_lis

Sep 22, 2022

Csv to list for web - Convert a CSV into a list in order to populate a firebase database

Csv to list for web - Convert a CSV into a list in order to populate a firebase database

My goal is to convert a CSV into a list in order to populate a firebase database

Jan 26, 2022

My flutter (android, ios) UI design examples 🎈 - user profile UIs, food order ui, splashscreen, mask widget usage, settings page ui

My flutter (android, ios) UI design examples  🎈 - user profile UIs,  food order ui, splashscreen, mask widget usage, settings page ui

Flutter UI Design Examples 🎈 This repository contains the flutter ui designs I designed while learning. Doctor Appointment App UI Packages in use: fl

Nov 14, 2022

Movie API Use Rest And Restful API

Movie API Use Rest And Restful API

movie_api use rest and restful api The home screen fetches data from the Episodate API and shows a list of popular shows. The details screen and the s

Dec 5, 2022

Bhagavad Gita app using flutter & Bhagavad-Gita-API is A lightweight Node.js based Bhagavad Gita API [An open source rest api on indian Vedic Scripture Shrimad Bhagavad Gita].

Bhagavad Gita app using flutter & Bhagavad-Gita-API is A lightweight Node.js based Bhagavad Gita API [An open source rest api on indian Vedic Scripture Shrimad Bhagavad Gita].

Gita Bhagavad Gita flutter app. Download App - Playstore Web Application About Bhagavad Gita app using flutter & Bhagavad-Gita-API is A lightweight No

Apr 5, 2022

Beautiful Weather App using API with support for dark mode. Created by Jakub Sobański ( API ) and Martin Gogołowicz (UI, API help)

Beautiful Weather App using API with support for dark mode. Created by Jakub Sobański ( API ) and Martin Gogołowicz (UI, API help)

Flutter Weather App using API with darkmode support Flutter 2.8.1 Null Safety Beautiful Weather App using https://github.com/MonsieurZbanowanYY/Weathe

Nov 29, 2022

Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui.

Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui.

tenon_mortise Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui. Getting Started Usage To use this plugin

Dec 15, 2022

Api-Call - A basic mobile application for Networking in Flutter(API)

Api-Call - A basic mobile application for Networking in Flutter(API)

Github Api Call 📞 📲 📌 Introduction This project is an basic mobile applicatio

Nov 11, 2022
Owner
KylianGERMAIN
KylianGERMAIN
Stroke order animations and quizzes for Chinese characters for use in Flutter apps

Stroke order animator This package implements stroke order animations and quizzes of Chinese characters based on the Make me a Hanzi data. That data i

Felipe Peter 54 Dec 27, 2022
Face Mask Detection mobile application built with Flutter and TensorFlow lite in order to detect face masks using images and live camera.

Face Mask Detector App Face Mask Detection mobile application built with Flutter and TensorFlow lite in order to detect face masks using images and li

Yousef Shaban 3 Aug 15, 2022
Flutter app to browse Reddit with swiping gestures

Diaporama (for Reddit) A pretty simple Flutter app to browse Reddit with swiping gestures You select your content source (list of subreddits) and you

Simon 22 Nov 23, 2021
This is a simple client of Reddit built with MVVM and Provider powered by a custom OAuth2.0 login

?? ?? ?? Flutter Starter Architecture (MVVM + Hive) My custom starter project for Flutter apps. I was looking for a simple way to build Flutter app in

Junior Medehou 13 Oct 26, 2022
Reddit Flutter Client made for an Epitech Project

Get the essential from your Reddit browsing Flapp is a mobile app which lets you access your favorite subreddits and enjoy their contents while having

Bluub 3 Nov 4, 2022
A reddit client built with Flutter

Fritter for Reddit is a Reddit Client built with Flutter How to build Go to reddit prefs and create a new application here https://www.reddit.com/pref

Tushar Paliwal 77 Nov 14, 2022
Glance - A client for Reddit written in Flutter

Glance About the app Glance is an unofficial client for Reddit. However, it allows you to only browse through media posts such as photos and videos. I

Albert Wolszon 105 Nov 25, 2022
This is a simple client of Reddit built with MVVM and Provider powered by a custom OAuth2.0 login

?? ?? ?? Flutter Starter Architecture (MVVM + Hive) My custom starter project for Flutter apps. I was looking for a simple way to build Flutter app in

Junior Medehou 13 Oct 26, 2022
Reddit like flutter toast

asset_toast A new flutter plugin project. Getting Started | usage AssetToast.show("hello there", context, asset: "assets/im

Griffins Gichure 5 Oct 22, 2021
Responsive Full Stack Reddit Clone - Works on Android, iOS & Web! built with Flutter 🚀💙

?? ??️ ?? ??️ ?? ??️ ?? ??️ UNDER CONSTRUCTION ?? ??️ ?? ??️ ?? ??️ ?? ??️ Reddit Clone ?? ?? Responsive Full Stack Reddit Clone - Works on Android, i

SOLOMON ABUH 3 Dec 15, 2022