Flutter – Calling a Google Cloud Function

Most examples of calling a cloud function are using Firebase. With Firebase, it is easy to write and maintain your cloud functions. Especially if you are using other functionalities that Firebase offers. However, there is a limitation on the languages you can use to write your cloud functions. With Firebase, it is only possible to write your functions in Javascript or Typescript. Luckily it is not that hard to call the cloud functions directly.

Creating the Google Cloud Function

For this example, I will use a simple cloud function. This cloud function returns ‘Hello world!’. In the next blog post, I will go into more extensive use cases for cloud functions.

package com.example;

import com.google.cloud.functions.HttpFunction;
import com.google.cloud.functions.HttpRequest;
import com.google.cloud.functions.HttpResponse;
import java.io.BufferedWriter;

public class Example implements HttpFunction {
  @Override
  public void service(HttpRequest request, HttpResponse response) throws Exception {
    BufferedWriter writer = response.getWriter();
    writer.write("Hello world!");
  }
}

If you want a complete description of deploying this function on the Google Cloud Platform, you can follow the instructions here. There is also an option to guide you while on the console. That shows you the current progress in deploying the cloud function.

Creating the Flutter Application

Now that I have a cloud function, let’s call the function. Since the function can be accessed through an HTTP call, I must install the HTTP package.

flutter pub add http

Now that the HTTP package is installed, I can call the function by using the get method of the HTTP package.

import 'package:http/http.dart' as http;

Future<String> callCloudFunction() async {
  final response = await http
      .get(Uri.parse('insert-url-of-your-cloud-fuction'));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to execute function');
  }
}

That is all that is necessary. Now I can call this method in the initState of a Widget. This will then show the result of the cloud function in a Text Widget.

class BasicGoogleCloudFunctionExample extends StatefulWidget {
  const BasicGoogleCloudFunctionExample({Key? key}) : super(key: key);

  @override
  _BasicGoogleCloudFunctionExampleState createState() => _BasicGoogleCloudFunctionExampleState();
}

class _BasicGoogleCloudFunctionExampleState extends State<BasicGoogleCloudFunctionExample> {
  late Future<String> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = callCloudFunction();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Cloud Function - basic',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Google Cloud Function - basic'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data!);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

These steps are all that is necessary to call your cloud function! The code of this example is available here on Github. If you still have any questions, comments, suggestions, or remarks, please let me know!