Flutter Firebase数据连接插件firebase_data_connect的使用

Flutter Firebase数据连接插件firebase_data_connect的使用

1. 简介

firebase_data_connect 是一个Flutter插件，用于与Firebase Data Connect API进行交互。通过这个插件，开发者可以在Flutter应用中轻松地与Firebase Data Connect进行数据操作，如查询、插入和更新数据。

请注意，Firebase Data Connect目前处于公共预览阶段，这意味着它不受任何服务级别协议（SLA）或弃用政策的约束，并且可能会以不兼容的方式更改。

2. 开始使用

要开始使用firebase_data_connect插件，请按照以下步骤进行：

1. 添加依赖：在pubspec.yaml文件中添加firebase_data_connect依赖。

   dependencies:
     flutter:
       sdk: flutter
     firebase_core: latest_version
     firebase_data_connect: latest_version
   

2. 初始化Firebase：在应用的入口文件（如main.dart）中初始化Firebase。

   import 'package:firebase_core/firebase_core.dart';
   import 'package:firebase_data_connect/firebase_data_connect.dart';
   import 'package:flutter/material.dart';
   
   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter DataConnect Demo',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
           useMaterial3: true,
         ),
         home: MyHomePage(title: 'Flutter DataConnect Demo'),
       );
     }
   }
   

3. 配置Emulator（可选）：如果你希望在开发过程中使用Firebase Emulator，可以在初始化Firebase后配置Emulator。

   if (configureEmulator) {
     MoviesConnector.instance.dataConnect.useDataConnectEmulator('127.0.0.1', 9399);
     FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
   }
   

3. 使用示例

下面是一个完整的示例代码，展示了如何使用firebase_data_connect插件来创建、查询和显示电影数据。

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

import 'firebase_options.dart';
import 'generated/movies.dart';

const appCheckEnabled = false;
const configureEmulator = true;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  if (appCheckEnabled) {
    await FirebaseAppCheck.instance.activate(
      webProvider: ReCaptchaV3Provider('your-site-key'),
      androidProvider: AndroidProvider.debug,
      appleProvider: AppleProvider.appAttest,
    );
  }

  if (configureEmulator) {
    MoviesConnector.instance.dataConnect.useDataConnectEmulator('127.0.0.1', 9399);
    FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
  }

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter DataConnect Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: MyHomePage(title: 'Flutter DataConnect Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _genreController = TextEditingController();
  final TextEditingController _titleController = TextEditingController();
  DateTime _releaseYearDate = DateTime(1920);
  List<ListMoviesMovies> _movies = [];
  double _rating = 0;

  Future<void> triggerReload() async {
    QueryRef ref = MoviesConnector.instance.listMovies().ref();
    ref.execute();
  }

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

    // 订阅电影列表查询
    QueryRef<ListMoviesData, void> ref = MoviesConnector.instance.listMovies().ref();
    ref.subscribe().listen((event) {
      setState(() {
        _movies = event.data.movies;
      });
    }).onError((e) {
      _showError("Got an error: $e");
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Column(
          children: [
            TextFormField(
              decoration: const InputDecoration(
                border: UnderlineInputBorder(),
                labelText: 'Name',
              ),
              controller: _titleController,
            ),
            TextFormField(
              decoration: const InputDecoration(
                border: UnderlineInputBorder(),
                labelText: 'Genre',
              ),
              controller: _genreController,
            ),
            RatingBar.builder(
              initialRating: 3,
              minRating: 1,
              direction: Axis.horizontal,
              allowHalfRating: true,
              itemCount: 5,
              itemPadding: const EdgeInsets.symmetric(horizontal: 4.0),
              itemBuilder: (context, _) => const Icon(
                Icons.star,
                color: Colors.amber,
              ),
              onRatingUpdate: (rating) {
                _rating = rating;
              },
            ),
            YearPicker(
              firstDate: DateTime(1990),
              lastDate: DateTime.now(),
              selectedDate: _releaseYearDate,
              onChanged: (value) {
                setState(() {
                  _releaseYearDate = value;
                });
              },
            ),
            TextButton(
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
              ),
              onPressed: () async {
                String title = _titleController.text;
                String genre = _genreController.text;
                if (title == '' || genre == '') {
                  return;
                }

                // 创建新电影
                MutationRef ref = MoviesConnector.instance
                    .createMovie(
                      title: title,
                      releaseYear: _releaseYearDate.year,
                      genre: genre,
                    )
                    .rating(_rating)
                    .ref();
                try {
                  await ref.execute();
                  triggerReload();
                } catch (e) {
                  _showError("unable to create a movie: $e");
                }
              },
              child: const Text('Add Movie'),
            ),
            const Center(
              child: Text(
                "Movies",
                style: TextStyle(fontSize: 35.0),
              ),
            ),
            Expanded(
              child: RefreshIndicator(
                onRefresh: () => triggerReload(),
                child: ListView(
                  scrollDirection: Axis.vertical,
                  children: _movies
                      .map((movie) => Card(
                          child: Padding(
                            padding: const EdgeInsets.all(10),
                            child: Center(
                              child: Text(
                                movie.title,
                                style: const TextStyle(
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ),
                          )))
                      .toList(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _showError(String message) {
    showDialog<void>(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('Something went wrong'),
          content: SingleChildScrollView(
            child: SelectableText(message),
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('OK'),
            ),
          ],
        );
      },
    );
  }
}