Flask backend for a Flutter app in 3 steps

How to use a Flask backend in a Flutter app

Last updated on May 15, 2023 3 min read Python, Flask, Flutter, Mobile
Table of Contents

This is a draft for a Tutorial on how to use Flask as a backend in a Flutter app.

Step 1: Set up your Flutter project

  1. Create a new Flutter project using the Flutter CLI or your preferred IDE.
  2. Open the project in your chosen IDE.

Step 2: Create the Flask backend

  1. Install Flask by running the following command in your terminal:
    pip install flask
  2. Create a new Python file, e.g., app.py, and open it in a text editor or your preferred IDE.
  3. Import the Flask module and create a Flask app instance:
    from flask import Flask

app = Flask(__name__)
  4. Define routes and their corresponding functions. These functions will handle the requests made by your Flutter app. For example:
    @app.route('/api/data', methods=['GET'])
def get_data():
    # Code to fetch data from a database or any other data source
    data = {'message': 'Hello from Flask!'}
    return data
    You can define more routes and functions as per your application’s needs.
  5. Start the Flask development server by adding the following lines at the end of your app.py file:
    if __name__ == '__main__':
    app.run()
    This will start the Flask server on http://localhost:5000.

Step 3: Connect the Flutter app to the Flask backend

  1. In your Flutter project, open the pubspec.yaml file and add the http package to your dependencies:
    dependencies:
  http: ^0.13.4
    Save the file, and run flutter pub get in your terminal to download the package.
  2. Create a new Dart file, e.g., api_service.dart, to handle HTTP requests to the Flask backend.
  3. Import the necessary packages:
    import 'package:http/http.dart' as http;
import 'dart:convert';
  4. Create a class to handle API requests:
    class ApiService {
  static const String baseUrl = 'http://localhost:5000';

  Future<dynamic> getData() async {
    final response = await http.get(Uri.parse('$baseUrl/api/data'));

    if (response.statusCode == 200) {
      return jsonDecode(response.body);
    } else {
      throw Exception('Failed to fetch data from the backend.');
    }
  }
}
    Adjust the baseUrl to match the URL where your Flask server is running.
  5. In your Flutter app code, import the api_service.dart file and call the API to retrieve data:
    void fetchData() {
  ApiService().getData().then((data) {
    // Process the retrieved data
    print(data);
  }).catchError((error) {
    // Handle error
    print(error);
  });
}
    Make sure to replace fetchData() with an appropriate method in your Flutter app code.
  6. Run your Flutter app and make the API call. You should see the data printed in the console.

That’s it! You have now set up Flask as the backend for your Flutter app and established communication between the two. I’m gonna expand upon this tutorial to add more routes, handle different types of requests, and incorporate additional functionality in a follow-up post.

Python Flask Flutter Mobile

Related