Code Monkey home page Code Monkey logo

mysql_flask_flutter's Introduction

Flutter-Flask-Login

Flutter app integrated with Flask server with login and registration functionalities

DEMO

video_compressed_no_sound.mp4

image Dashboard Screenshot

Resources used to build this projects and I found usefull:

Flutter Project Have:

  • Register and Login logic
  • Https calls
  • Bloc for design pattern and state managment
  • Build runner for generating JSON classes
  • Service Locator

Libraries used for Flutter:

  • shared_preferences
  • http
  • get_it
  • flutter_bloc
  • dio
  • build_runner
  • json_serializable

How to setup

Clone the repo

Flask Part

  • Python version used is 3.8.5
  • Go to flask_app directory
  • Install the required packages by running pip3 install -r requirements.txt
  • Open the terminal and type python3 run.py .The server will start and the database will be created
  • The server will run on http://0.0.0.0:5000/
  • To access admin panel go to http://0.0.0.0:5000/admin/

Flutter Part

  • Open the flutter_app with android studio
  • Run the project, it will take some time to install the dependencies
  • When the app is ready make sure the phone and the laptop are in the same network
  • Check the IP of the laptop by using ipconfig for windows and ifconfig for Linux
  • When you get the IP go to the settings in the app and change the URL as shown in the GIF above

That's all, the app now should work as in the GIF

Note: if it didn't work, check your firewall and make sure the port is allowed to respond for external requests, to check if the connection is established, open the browser in the phone and go to http://YOU_IP:5000/ , if it shows Hello World text, then the firewall is setup and the server is working in the network

For Linux the code to allow the port is sudo iptables -A INPUT -p tcp --dport 5000 -j ACCEPT , where 5000 is the port number

mysql_flask_flutter's People

Contributors

cjh8817676 avatar

Stargazers

Matthew lei avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.