Flutter是Google的UI框架，用于創(chuàng)建靈活、富有表現(xiàn)力的跨平臺(tái)移動(dòng)應(yīng)用程序。它是增長(zhǎng)最快的移動(dòng)應(yīng)用程序開發(fā)框架之一。另一方面，F(xiàn)auna是一個(gè)事務(wù)性的、對(duì)開發(fā)者友好的無服務(wù)器數(shù)據(jù)庫(kù)，支持原生GraphQL。Flutter Fauna是天作之合。如果您希望在創(chuàng)紀(jì)錄的時(shí)間內(nèi)構(gòu)建和發(fā)布功能豐富的全棧應(yīng)用程序，F(xiàn)lutter和Fauna是正確的工具。在本文中，我們將引導(dǎo)您使用Fauna和GraphQL后端構(gòu)建您的第一個(gè)Flutter應(yīng)用程序。

您可以在GitHub上找到本文的完整代碼。

學(xué)習(xí)目標(biāo)

在閱讀完本文后，您應(yīng)該知道如何：

1. 設(shè)置Fauna實(shí)例，
2. 為Fauna編寫GraphQL模式，
3. 在Flutter應(yīng)用程序中設(shè)置GraphQL客戶端，以及
4. 對(duì)Fauna GraphQL后端執(zhí)行查詢和變異。

Fauna與AWS Amplify與Firebase: Fauna解決了哪些問題？它與其他無服務(wù)器解決方案有何不同？如果您不熟悉Fauna，并且想了解更多關(guān)于Fauna與其他解決方案的比較信息，我建議您閱讀這篇文章。

我們正在構(gòu)建什么？

我們將構(gòu)建一個(gè)簡(jiǎn)單的移動(dòng)應(yīng)用程序，允許用戶添加、刪除和更新他們最喜歡的電影和電視劇角色。

設(shè)置Fauna

前往fauna.com并創(chuàng)建一個(gè)新帳戶。登錄后，您應(yīng)該能夠創(chuàng)建一個(gè)新的數(shù)據(jù)庫(kù)。

為您的數(shù)據(jù)庫(kù)命名。我將我的命名為flutter_demo。接下來，我們可以選擇一個(gè)區(qū)域組。對(duì)于此演示，我們將選擇classic。Fauna是一個(gè)全球分布式的無服務(wù)器數(shù)據(jù)庫(kù)。它是唯一一個(gè)支持從任何地方進(jìn)行低延遲讀寫訪問的數(shù)據(jù)庫(kù)?？梢园阉胂蟪蒀DN（內(nèi)容分發(fā)網(wǎng)絡(luò)），但它是針對(duì)您的數(shù)據(jù)庫(kù)的。要了解有關(guān)區(qū)域組的更多信息，請(qǐng)遵循本指南。

生成管理員密鑰

數(shù)據(jù)庫(kù)創(chuàng)建完成后，轉(zhuǎn)到“安全”選項(xiàng)卡。單擊“新建密鑰”按鈕并為您的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)新密鑰。請(qǐng)妥善保管此密鑰，因?yàn)槲覀冃枰鼇磉M(jìn)行GraphQL操作。

我們將為我們的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)管理員密鑰。具有管理員角色的密鑰用于管理其關(guān)聯(lián)的數(shù)據(jù)庫(kù)，包括數(shù)據(jù)庫(kù)訪問提供程序、子數(shù)據(jù)庫(kù)、文檔、函數(shù)、索引、密鑰、令牌和用戶定義的角色。您可以在以下鏈接中了解有關(guān)Fauna各種安全密鑰和訪問角色的更多信息。

編寫GraphQL模式

我們將構(gòu)建一個(gè)簡(jiǎn)單的應(yīng)用程序，允許用戶添加、更新和刪除他們最喜歡的電視角色。

創(chuàng)建一個(gè)新的Flutter項(xiàng)目

讓我們通過運(yùn)行以下命令創(chuàng)建一個(gè)新的Flutter項(xiàng)目。

<code>flutter create my_app</code>

在項(xiàng)目目錄中，我們將創(chuàng)建一個(gè)名為graphql/schema.graphql的新文件。

在模式文件中，我們將定義集合的結(jié)構(gòu)。Fauna中的集合類似于SQL中的表。我們現(xiàn)在只需要一個(gè)集合。我們將它命名為Character。

<code>### schema.graphql
type Character {
    name: String!
    description: String!
    picture: String
}
type Query {
    listAllCharacters: [Character]
}</code>

如上所示，我們定義了一個(gè)名為Character的類型，它具有多個(gè)屬性（即名稱、描述、圖片等）。可以將屬性視為SQL數(shù)據(jù)庫(kù)的列或NoSQL數(shù)據(jù)庫(kù)的鍵值對(duì)。我們還定義了一個(gè)Query。此查詢將返回角色列表。

現(xiàn)在讓我們回到Fauna儀表板。單擊GraphQL，然后單擊導(dǎo)入模式以將我們的模式上傳到Fauna。

導(dǎo)入完成后，我們將看到Fauna生成了GraphQL查詢和變異。

不喜歡自動(dòng)生成的GraphQL？想要更好地控制您的業(yè)務(wù)邏輯？在這種情況下，F(xiàn)auna允許您定義自定義GraphQL解析器。要了解更多信息，請(qǐng)點(diǎn)擊此鏈接。

在Flutter應(yīng)用程序中設(shè)置GraphQL客戶端

讓我們打開pubspec.yaml文件并添加所需的依賴項(xiàng)。

<code>...
dependencies:
  graphql_flutter: ^4.0.0-beta
  hive: ^1.3.0
  flutter:
    sdk: flutter
...</code>

我們?cè)谶@里添加了兩個(gè)依賴項(xiàng)。graphql_flutter是Flutter的GraphQL客戶端庫(kù)。它將GraphQL客戶端的所有現(xiàn)代功能集成到一個(gè)易于使用的包中。我們還添加了hive包作為我們的依賴項(xiàng)。Hive是用純Dart編寫的輕量級(jí)鍵值數(shù)據(jù)庫(kù)，用于本地存儲(chǔ)。我們使用hive來緩存我們的GraphQL查詢。

接下來，我們將創(chuàng)建一個(gè)新的文件lib/client_provider.dart。我們將在該文件中創(chuàng)建一個(gè)提供程序類，其中將包含我們的Fauna配置。

要連接到Fauna的GraphQL API，我們首先需要?jiǎng)?chuàng)建一個(gè)GraphQLClient。GraphQLClient需要一個(gè)緩存和一個(gè)鏈接才能初始化。讓我們看一下下面的代碼。

<code>// lib/client_provider.dart
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:flutter/material.dart';

ValueNotifier<graphqlclient> clientFor({
  @required String uri,
  String subscriptionUri,
}) {

  final HttpLink httpLink = HttpLink(
    uri,
  );
  final AuthLink authLink = AuthLink(
    getToken: () async => 'Bearer fnAEPAjy8QACRJssawcwuywad2DbB6ssrsgZ2-2',
  );
  Link link = authLink.concat(httpLink);
  return ValueNotifier<graphqlclient>(
    GraphQLClient(
      cache: GraphQLCache(store: HiveStore()),
      link: link,
    ),
  );
} 
</graphqlclient></graphqlclient></code>

在上面的代碼中，我們創(chuàng)建了一個(gè)ValueNotifier來包裝GraphQLClient。請(qǐng)注意，我們?cè)诘?3-15行（突出顯示）配置了AuthLink。在第14行，我們添加了來自Fauna的管理員密鑰作為令牌的一部分。在這里，我硬編碼了管理員密鑰。但是，在生產(chǎn)應(yīng)用程序中，我們必須避免硬編碼Fauna的任何安全密鑰。

有幾種方法可以在Flutter應(yīng)用程序中存儲(chǔ)密鑰。請(qǐng)查看此博文以供參考。

我們希望能夠從應(yīng)用程序的任何小部件調(diào)用Query和Mutation。為此，我們需要使用GraphQLProvider小部件包裝我們的Widget。

<code>// lib/client_provider.dart

....

/// 使用`graphql_flutter`客戶端包裝根應(yīng)用程序。
/// 我們使用緩存進(jìn)行所有狀態(tài)管理。
class ClientProvider extends StatelessWidget {
  ClientProvider({
    @required this.child,
    @required String uri,
  }) : client = clientFor(
          uri: uri,
        );
  final Widget child;
  final ValueNotifier<graphqlclient> client;
  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: child,
    );
  }
}
</graphqlclient></code>

接下來，我們轉(zhuǎn)到main.dart文件，并使用ClientProvider小部件包裝我們的主小部件。讓我們看一下下面的代碼。

<code>// lib/main.dart
...

void main() async {
  await initHiveForFlutter();
  runApp(MyApp());
}
final graphqlEndpoint = 'https://graphql.fauna.com/graphql';
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ClientProvider(
      uri: graphqlEndpoint,
      child: MaterialApp(
        title: 'My Character App',
        debugShowCheckedModeBanner: false,
        initialRoute: '/',
        routes: {
          '/': (_) => AllCharacters(),
          '/new': (_) => NewCharacter(),
        }
      ),
    );
  }
}</code>

此時(shí)，我們所有的下游小部件都將能夠運(yùn)行Queries和Mutations函數(shù)，并可以與GraphQL API交互。

應(yīng)用程序頁(yè)面

演示應(yīng)用程序應(yīng)該簡(jiǎn)單易懂。讓我們繼續(xù)創(chuàng)建一個(gè)簡(jiǎn)單的列表小部件，它將顯示所有角色的列表。讓我們創(chuàng)建一個(gè)新的文件lib/screens/character-list.dart。在這個(gè)文件中，我們將編寫一個(gè)名為AllCharacters的新小部件。

<code>// lib/screens/character-list.dart.dart

class AllCharacters extends StatelessWidget {
  const AllCharacters({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            snap: false,
            floating: true,
            expandedHeight: 160.0,
            title: Text(
              'Characters',
              style: TextStyle(
                fontWeight: FontWeight.w400, 
                fontSize: 36,
              ),
            ),
            actions: <widget>[
              IconButton(
                padding: EdgeInsets.all(5),
                icon: const Icon(Icons.add_circle),
                tooltip: 'Add new entry',
                onPressed: () { 
                  Navigator.pushNamed(context, '/new');
                },
              ),
            ],
          ),
          SliverList(
            delegate: SliverChildListDelegate([
                Column(
                  children: [
                    for (var i = 0; i  _CharacterTileeState();
}
class _CharacterTileState extends State<charactertile> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Text("Character Tile"),
    );
  }
}
</charactertile></widget></code>

如上面的代碼所示，[第37行]我們有一個(gè)for循環(huán)，用一些假數(shù)據(jù)填充列表。最終，我們將對(duì)Fauna后端進(jìn)行GraphQL查詢，并從數(shù)據(jù)庫(kù)中獲取所有角色。在我們這樣做之前，讓我們嘗試運(yùn)行我們的應(yīng)用程序。我們可以使用以下命令運(yùn)行我們的應(yīng)用程序

<code>flutter run</code>

此時(shí)，我們應(yīng)該能夠看到以下屏幕。

執(zhí)行查詢和變異

現(xiàn)在我們有一些基本的小部件，我們可以繼續(xù)連接GraphQL查詢。我們希望從數(shù)據(jù)庫(kù)獲取所有角色，而不是硬編碼字符串，并在AllCharacters小部件中查看它們。

讓我們回到Fauna的GraphQL playground。請(qǐng)注意，我們可以運(yùn)行以下查詢來列出所有角色。

<code>query ListAllCharacters {
  listAllCharacters(_size: 100) {
    data {
      _id
      name
      description
      picture
    }
    after
  }
}</code>

要從我們的Widget執(zhí)行此查詢，我們需要對(duì)其進(jìn)行一些更改。

<code>import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:todo_app/screens/Character-tile.dart';

String readCharacters = ";";";
query ListAllCharacters {
  listAllCharacters(_size: 100) {
    data {
      _id
      name
      description
      picture
    }
    after
  }
}
";";";;

class AllCharacters extends StatelessWidget {
  const AllCharacters({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            snap: false,
            floating: true,
            expandedHeight: 160.0,
            title: Text(
              'Characters',
              style: TextStyle(
                fontWeight: FontWeight.w400, 
                fontSize: 36,
              ),
            ),
            actions: <widget>[
              IconButton(
                padding: EdgeInsets.all(5),
                icon: const Icon(Icons.add_circle),
                tooltip: 'Add new entry',
                onPressed: () { 
                  Navigator.pushNamed(context, '/new');
                },
              ),
            ],
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              Query(options: QueryOptions(
                document: gql(readCharacters), // 我們要執(zhí)行的graphql查詢
                pollInterval: Duration(seconds: 120), // 重新獲取間隔
              ), 
              builder: (QueryResult result, { VoidCallback refetch, FetchMore fetchMore }) {
                if (result.isLoading) {
                  return Text('Loading');
                }
                return Column(
                  children: [
                    for (var item in result.data\['listAllCharacters'\]['data'])
                      CharacterTile(Character: item, refetch: refetch),
                  ],
                );
              })
            ])
          )
        ],
      ),
    );
  }
} 
</widget></code>

首先，我們定義了從數(shù)據(jù)庫(kù)獲取所有角色的查詢字符串[第5到17行]。我們使用flutter_graphql中的Query小部件包裝了列表小部件。

隨意查看flutter_graphql庫(kù)的官方文檔。

在query options參數(shù)中，我們提供了GraphQL查詢字符串本身。我們可以為pollInterval參數(shù)傳遞任何浮點(diǎn)數(shù)。Poll Interval定義了我們希望多長(zhǎng)時(shí)間從后端重新獲取一次數(shù)據(jù)。該小部件還有一個(gè)標(biāo)準(zhǔn)的builder函數(shù)。我們可以使用builder函數(shù)將查詢結(jié)果、重新獲取回調(diào)函數(shù)和獲取更多回調(diào)函數(shù)傳遞到Widget樹中。

接下來，我將更新CharacterTile小部件以在屏幕上顯示角色數(shù)據(jù)。

<code>// lib/screens/character-tile.dart
...
class CharacterTile extends StatelessWidget {
  final Character;
  final VoidCallback refetch;
  final VoidCallback updateParent;
  const CharacterTile({
    Key key, 
    @required this.Character, 
    @required this.refetch,
    this.updateParent,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
      },
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: Row(
          children: [
            Container(
              height: 90,
              width: 90,
              decoration: BoxDecoration(
                color: Colors.amber,
                borderRadius: BorderRadius.circular(15),
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(Character['picture'])
                )
              ),
            ),
            SizedBox(width: 10),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    Character['name'],
                    style: TextStyle(
                      color: Colors.black87,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 5),
                  Text(
                    Character['description'],
                    style: TextStyle(
                      color: Colors.black87,
                    ),
                    maxLines: 2,
                  ),
                ],
              )
            )
          ],
        ),
      ),
    );
  }
}</code>

添加新數(shù)據(jù)

我們可以通過運(yùn)行以下變異來向我們的數(shù)據(jù)庫(kù)添加新角色。

<code>mutation CreateNewCharacter($data: CharacterInput!) {
    createCharacter(data: $data) {
      _id
      name
      description
      picture
    }
}</code>

要從我們的Widget運(yùn)行此變異，我們需要使用flutter_graphql庫(kù)中的Mutation小部件。讓我們創(chuàng)建一個(gè)帶有簡(jiǎn)單表單的新小部件，供用戶交互和輸入數(shù)據(jù)。提交表單后，將調(diào)用createCharacter變異。

<code>// lib/screens/new.dart
...
String addCharacter = ";";";
  mutation CreateNewCharacter(\$data: CharacterInput!) {
    createCharacter(data: \$data) {
      _id
      name
      description
      picture
    }
  }
";";";;
class NewCharacter extends StatelessWidget {
  const NewCharacter({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Add New Character'),
      ),
      body: AddCharacterForm()
    );
  }
}
class AddCharacterForm extends StatefulWidget {
  AddCharacterForm({Key key}) : super(key: key);
  @override
  _AddCharacterFormState createState() => _AddCharacterFormState();
}
class _AddCharacterFormState extends State<addcharacterform> {
  String name;
  String description;
  String imgUrl;
  @override
  Widget build(BuildContext context) {
    return Form(
      child: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                icon: Icon(Icons.person),
                labelText: 'Name *',
              ),
              onChanged: (text) {
                name = text;
              },
            ),
            TextField(
              decoration: const InputDecoration(
                icon: Icon(Icons.post_add),
                labelText: 'Description',
              ),
              minLines: 4,
              maxLines: 4,
              onChanged: (text) {
                description = text;
              },
            ),
            TextField(
              decoration: const InputDecoration(
                icon: Icon(Icons.image),
                labelText: 'Image Url',
              ),
              onChanged: (text) {
                imgUrl = text;
              },
            ),
            SizedBox(height: 20),
            Mutation(
              options: MutationOptions(
                document: gql(addCharacter),
                onCompleted: (dynamic resultData) {
                  print(resultData);
                  name = '';
                  description = '';
                  imgUrl = '';
                  Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => AllCharacters())
                  );
                },
              ), 
              builder: (
                RunMutation runMutation,
                QueryResult result,
              ) {
                return Center(
                  child: ElevatedButton(
                    child: const Text('Submit'),
                    onPressed: () {
                      runMutation({
                        'data': {
                          ";picture";: imgUrl,
                          ";name";: name,
                          ";description";: description,
                        }
                      });
                    },
                  ),
                );
              }
            )
          ],
        ),
      ),
    );
  }
}
</addcharacterform></code>

從上面的代碼可以看出，Mutation小部件的工作方式與Query小部件非常相似。此外，Mutation小部件為我們提供了一個(gè)onComplete函數(shù)。此函數(shù)在變異完成后返回?cái)?shù)據(jù)庫(kù)中的更新結(jié)果。

刪除數(shù)據(jù)

我們可以通過運(yùn)行deleteCharacter變異來從數(shù)據(jù)庫(kù)中刪除角色。我們可以將此變異函數(shù)添加到我們的CharacterTile中，并在按下按鈕時(shí)觸發(fā)它。

<code>// lib/screens/character-tile.dart
...

String deleteCharacter = ";";";
  mutation DeleteCharacter(\$id: ID!) {
    deleteCharacter(id: \$id) {
      _id
      name
    }
  }
";";";;

class CharacterTile extends StatelessWidget {
  final Character;
  final VoidCallback refetch;
  final VoidCallback updateParent;
  const CharacterTile({
    Key key, 
    @required this.Character, 
    @required this.refetch,
    this.updateParent,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        showModalBottomSheet(
          context: context,
          builder: (BuildContext context) {
            print(Character['picture']);
            return Mutation(
              options: MutationOptions(
                document: gql(deleteCharacter),
                onCompleted: (dynamic resultData) {
                  print(resultData);
                  this.refetch();
                },
              ), 
              builder: (
                RunMutation runMutation,
                QueryResult result,
              ) {
                return Container(
                  height: 400,
                  padding: EdgeInsets.all(30),
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: <widget>[
                        Text(Character['description']),
                        ElevatedButton(
                          child: Text('Delete Character'),
                          onPressed: () {
                            runMutation({
                              'id': Character['_id'],
                            });
                            Navigator.pop(context);
                          },
                        ),
                      ],
                    ),
                  ),
                ); 
              }
            );
          }
        );
      },
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: Row(
          children: [
            Container(
              height: 90,
              width: 90,
              decoration: BoxDecoration(
                color: Colors.amber,
                borderRadius: BorderRadius.circular(15),
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(Character['picture'])
                )
              ),
            ),
            SizedBox(width: 10),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    Character['name'],
                    style: TextStyle(
                      color: Colors.black87,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 5),
                  Text(
                    Character['description'],
                    style: TextStyle(
                      color: Colors.black87,
                    ),
                    maxLines: 2,
                  ),
                ],
              )
            )
          ],
        ),
      ),
    );
  }
}
</widget></code>

編輯數(shù)據(jù)

編輯數(shù)據(jù)與添加和刪除相同。它只是GraphQL API中的另一個(gè)變異。我們可以創(chuàng)建一個(gè)類似于新角色表單小部件的編輯角色表單小部件。唯一的區(qū)別是編輯表單將運(yùn)行updateCharacter變異。為了編輯，我創(chuàng)建了一個(gè)新的Widget lib/screens/edit.dart。以下是此Widget的代碼。

<code>// lib/screens/edit.dart

String editCharacter = """
mutation EditCharacter(\$name: String!, \$id: ID!, \$description: String!, \$picture: String!) {
  updateCharacter(data: 
  { 
    name: \$name 
    description: \$description
    picture: \$picture
  }, id: \$id) {
    _id
    name
    description
    picture
  }
}
""";
class EditCharacter extends StatelessWidget {
  final Character;
  const EditCharacter({Key key, this.Character}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Edit Character'),
      ),
      body: EditFormBody(Character: this.Character),
    );
  }
}
class EditFormBody extends StatefulWidget {
  final Character;
  EditFormBody({Key key, this.Character}) : super(key: key);
  @override
  _EditFormBodyState createState() => _EditFormBodyState();
}
class _EditFormBodyState extends State<editformbody> {
  String name;
  String description;
  String picture;
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
            TextFormField(
               initialValue: widget.Character['name'],
                decoration: const InputDecoration(
                  icon: Icon(Icons.person),
                  labelText: 'Name *',
                ),
                onChanged: (text) {
                  name = text;
                }
            ),
            TextFormField(
              initialValue: widget.Character['description'],
              decoration: const InputDecoration(
                icon: Icon(Icons.person),
                labelText: 'Description',
              ),
              minLines: 4,
              maxLines: 4,
              onChanged: (text) {
                description = text;
              }
            ),
            TextFormField(
              initialValue: widget.Character['picture'],
              decoration: const InputDecoration(
                icon: Icon(Icons.image),
                labelText: 'Image Url',
              ),
              onChanged: (text) {
                picture = text;
              },
            ),
            SizedBox(height: 20),
            Mutation(
              options: MutationOptions(
                document: gql(editCharacter),
                onCompleted: (dynamic resultData) {
                  print(resultData);
                  Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => AllCharacters())
                  );
                },
              ),
              builder: (
                RunMutation runMutation,
                QueryResult result,
              ) {
                print(result);
                return Center(
                  child: ElevatedButton(
                    child: const Text('Submit'),
                    onPressed: () {

                      runMutation({
                        'id': widget.Character['_id'],
                        'name': name != null ? name : widget.Character['name'],
                        'description': description != null ? description : widget.Character['description'],
                        'picture': picture != null ? picture : widget.Character['picture'],
                      });
                    },
                  ),
                );
              }
            ),
           ]
         )
       ),
    );
  }
}
</editformbody></code>

您可以查看本文的完整代碼如下。

對(duì)Fauna或Flutter有疑問？您可以在Twitter @HaqueShadid上聯(lián)系我

GitHub ### 后續(xù)步驟

本文的主要目的是讓您開始使用Flutter和Fauna。我們?cè)谶@里只觸及了表面。Fauna生態(tài)系統(tǒng)為您的移動(dòng)應(yīng)用程序提供了一個(gè)完整的、自動(dòng)縮放的、對(duì)開發(fā)者友好的后端即服務(wù)。如果您的目標(biāo)是在創(chuàng)紀(jì)錄的時(shí)間內(nèi)發(fā)布一個(gè)可用于生產(chǎn)的跨平臺(tái)移動(dòng)應(yīng)用程序，請(qǐng)嘗試使用Fauna和Flutter。

我強(qiáng)烈建議您查看Fauna的官方文檔網(wǎng)站。如果您有興趣了解更多關(guān)于Dart/Flutter的GraphQL客戶端的信息，請(qǐng)查看graphql_flutter的官方GitHub存儲(chǔ)庫(kù)。

祝您編程愉快，下次再見。

以上是如何使用Flutter，F(xiàn)auna和GraphQL構(gòu)建全堆棧移動(dòng)應(yīng)用程序的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！