Flutter桌面端调用Firebase云函数插件firebase_functions_desktop的使用

Flutter桌面端调用Firebase云函数插件firebase_functions_desktop的使用

在Flutter桌面应用中调用Firebase云函数可以通过firebase_functions_desktop插件来实现。以下是一个完整的示例，展示了如何配置和使用该插件。

步骤1：添加依赖

首先，在你的pubspec.yaml文件中添加firebase_functions_desktop依赖：

dependencies:
  flutter:
    sdk: flutter
  cloud_functions: ^4.0.0
  firebase_core: ^2.0.0

确保你的项目已经集成了Firebase。如果没有，请先配置Firebase并获取相应的配置信息。

步骤2：初始化Firebase

在main.dart文件中初始化Firebase，并配置云函数的使用环境（例如本地开发环境）。

import 'dart:core';

import 'package:cloud_functions/cloud_functions.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

// 定义Firebase配置选项
FirebaseOptions get firebaseOptions => const FirebaseOptions(
      apiKey: 'AIzaSyAgUhHU8wSJgO5MVNy95tMT07NEjzMOfz0',
      authDomain: 'react-native-firebase-testing.firebaseapp.com',
      databaseURL: 'https://react-native-firebase-testing.firebaseio.com',
      projectId: 'react-native-firebase-testing',
      storageBucket: 'react-native-firebase-testing.appspot.com',
      messagingSenderId: '448618578101',
      appId: '1:448618578101:web:0b650370bb29e29cac3efc',
      measurementId: 'G-F79DJ0VFGS',
    );

// 初始化Firebase云函数
late FirebaseFunctions functions;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: firebaseOptions);
  
  // 使用本地开发环境
  functions = FirebaseFunctions.instance
    ..useFunctionsEmulator('localhost', 5001);

  runApp(MyApp());
}

步骤3：创建UI组件

接下来，在UI中添加一个按钮，点击该按钮时调用Firebase云函数。

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

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<String> fruit = [];

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Firebase Functions Example'),
        ),
        body: Center(
          child: ListView.builder(
            itemCount: fruit.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${fruit[index]}'),
              );
            },
          ),
        ),
        floatingActionButton: Builder(
          builder: (context) => FloatingActionButton.extended(
            onPressed: () async {
              try {
                // 调用云函数
                final callable = functions.httpsCallable('listFruit', 
                    options: HttpsCallableOptions(timeout: const Duration(seconds: 5)));
                
                final result = await callable();

                setState(() {
                  fruit.clear();
                  result.data.forEach((f) {
                    fruit.add(f);
                  });
                });
              } catch (e) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('ERROR: $e')),
                );
              }
            },
            label: const Text('Call Function'),
            icon: const Icon(Icons.cloud),
            backgroundColor: Colors.deepOrange,
          ),
        ),
      ),
    );
  }
}

更多关于Flutter桌面端调用Firebase云函数插件firebase_functions_desktop的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter桌面端调用Firebase云函数插件firebase_functions_desktop的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter桌面端调用Firebase云函数，你可以使用 firebase_functions_desktop 插件。这个插件是为Flutter桌面应用程序（Windows、macOS、Linux）设计的，允许你调用Firebase Cloud Functions。

以下是如何在Flutter桌面应用程序中使用 firebase_functions_desktop 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 firebase_functions_desktop 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.0.0
  firebase_functions_desktop: ^0.0.1+1

然后，运行 flutter pub get 来获取依赖。

2. 初始化 Firebase

在你的应用程序的 main.dart 文件中，初始化 Firebase：

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: FirebaseOptions(
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID",
    ),
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Functions',
      home: MyHomePage(),
    );
  }
}

3. 调用 Firebase 云函数

现在你可以在你的应用程序中调用 Firebase 云函数。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:firebase_functions_desktop/firebase_functions_desktop.dart';

class MyHomePage extends StatelessWidget {
  Future<void> callCloudFunction() async {
    try {
      final functions = FirebaseFunctions.instance;
      final result = await functions.httpsCallable('yourFunctionName').call({
        'param1': 'value1',
        'param2': 'value2',
      });
      print('Result: ${result.data}');
    } catch (e) {
      print('Error calling function: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Firebase Functions'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: callCloudFunction,
          child: Text('Call Cloud Function'),
        ),
      ),
    );
  }
}
回到顶部