屌炸天！国外同行这样用Chat GPT提高Flutter开发的效率！-六虎

本文正在参加「金石方案」

原文链接：medium.com/flutter-com…，翻译时根据需求做了删减。

前语

作为一个Flutter的开发者，咱们肯定期望能够寻求手段来改进开发功率，让开发工作更顺利。现在，Chat GPT能够帮咱们达到这个意图了。本篇，咱们将向你展示怎么运用Chat GPT前进Flutter开发者的功率。

Chat GPT能够在哪些方面协助Flutter开发者？

这是咱们整理的Chat GPT最适合协助Flutter 开发者的7个点：

生成代码

能够运用Chat GPT自动生成你需求的代码来前进功率。Chat GPT能够根据你已有的代码库进行训练来生成特定的代码片段。例如，假如你需求创立一个新的widget，你能够给Chat GPT供给对应的要求，然后它会帮你生成需求的代码。这能够帮你节约许多完结不同原型的时刻。

测验和调试

Chat GPT能够测验和调试你的代码。能够在Chat GPT中输入特定的测验用例，然后它会生成对应的输出结果。这能够让你快速定位和修正代码的bug。此外，Chat GPT还能够生成一些你想不到的鸿沟测验用例，使得你的代码愈加强健牢靠。

给代码加注释

Chat GPT能够给Flutter代码增加注释，使得开发者能够更简略了解和解说杂乱的代码结构和概念。

解说代码

Chat GPT能够为Flutter或其他程序代码生成解说说明。经过给Chat GPT供给一些描绘代码的自然语义语料，模型能够给非技术人员生成可了解的代码说明。当然，作用的前提取决于供给的语料和提示语，以及代码自身的杂乱程度。

生成文档

文档关于软件开发来说十分重要，可是编写文档十分耗时。经过Chat GPT，能够为你的代码库生成文档。例如，你能够给Chat GPT供给一个特定的函数或类，然后它会给出这个函数的用处说明以及怎么运用这个函数，这将节约你的时刻而且让你的代码库有比较好的文档说明。

给界面开发者供给示例文本

作为Flutter开发者，你常常需求给App创立UI界面。经过Chat GPT，能够给UI界面生成所需求的示例文本。这能够节约你的时刻而且协助你快速完结UI界面。例如，你规划一个即时谈天App，就能够用Chat GPT生成示例的谈天对话信息。

创立谈天机器人

你或许需求给你的运用增加一个谈天机器人，有了Chat GPT，你就能够训练他像人那样呼运用户的输入，这能够前进用户体会和自动完结一些客服工作。

Chat GPT是代码生成的最佳工具吗

需求说明的是，Chat GPT是根据很多自然语言文本进行训练的，首要是应对自然语言的输入。尽管它能够产生Flutter或其他程序的代码及解说，可是它并不是专门规划做代码生成任务的。专门用于代码生成的工具有GPT-Code，Codex以及Open AI的DALL-E。因而，咱们需求了解，Chat GPT生成的代码无法保证高质量，也不会考虑功用优化。此外，对AI模型生成的代码进行完备的测验和检查十分重要，这样才能够保证满足需求和没有安全隐患。

运用实例

现在咱们来让Chat GPT帮咱们干点Flutter的活，咱们将经过6个场景来看看Chat GPT有多“能干”。

编写一个简略的数学函数

Flutter 开发者：你能运用Dart写一个函数吗？这个函数接纳一个整数参数，然后回来一个介于0和这个整数之间的随机整数。

Chat GPT：没问题！我能够运用dart:math库编写一个函数来产生一个0到给定整数的随机整数。下面是示例，这个函数接纳一个称号为n的整数参数，然后回来一个0到n-1的随机整数。

import 'dart:math';
int generateRandomNumber(int n) {
	Random random = Random();
	return random.nextInt(n);
}

Chat GPT：下面是这个函数的运用示例：

void main() {
  print(generateRandomNumber(10)); // Example output: 6
  print(generateRandomNumber(100)); // Example output: 56
  print(generateRandomNumber(5)); // Example output: 2
}

Chat GPT: 注意Random.nextInt() 办法回来的值是从0（含0）到给定的值（不包含），因而咱们不需求像Python那样把n-1。

编写一个从firestrore读取数据的函数

Flutter 开发者：你能编写一个从firestore中读取document中国家字段为“UK”的一切销量数据的Flutter函数吗。在每个document记载中有一个字段叫做“amountSold”，请核算一切国家字段为“UK”的总的“amountSold”，然后回来这个核算结果。

Chat GPT：好的。我能够完结这个函数的编写。下面是运用cloud_firestore插件完结与FireStore交互的示例函数：

import 'package:cloud_firestore/cloud_firestore.dart';
Future<double> calculateTotalSalesInUK() async {
  double totalSalesInUK = 0;
  QuerySnapshot querySnapshot = await FirebaseFirestore.instance
      .collection('sales')
      .where('country', isEqualTo: 'UK')
      .get();
  querySnapshot.docs.forEach((document) {
    totalSalesInUK += document.data()['amountSold'];
  });
  return totalSalesInUK;
}

Chat GPT: 下面是在Flutter App里运用这个办法的示例:

double ukSales = await calculateTotalSalesInUK();
print('Total sales in UK: $ukSales');

Chat GPT: 注意这是个异步办法，因而在取得总的销售数量前需求等候。此外，querySnapshot.docs特点是一切满足查询条件的文档列表，这儿运用了forEach办法对每个文档进行迭代来核算总的销量数值。最终，咱们将销量作为double类型回来。

编写一个firebase云原生函数

Flutter开发者: 早上好！请编写一个称号为“userRegisration”的firebase云原生函数。这个函数在firestore中的“customers”调集新增一条文档时触发。每个文档都有一个对运用户电子邮箱的“email”字段，以及一个“name”字段和一个“phone”字段。一旦这个文档创立的时候，这个函数就会运用用户的电子邮箱在“firebase auth”里注册一个账户。请设置一个随机的暗码。然后，这个函数必须仿制firestore的这个文档作为用户调集中的新文档。请将这个文档的称号命名为firebase的用户id（uid）。最终，请运用原文档的信息来填充刚刚创立的用户的特点。例如设置授权的“displayName”作为用户的“name”字段值，以及设置用户的电话作为字段“phone”的值。

Chat GPT: 没问题，下面是你需求的云原生函数:

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const firestore = admin.firestore();
const auth = admin.auth();
exports.userRegistration = functions.firestore
    .document('customers/{customerId}')
    .onCreate(async (snap, context) => {
        const data = snap.data();
        const email = data.email;
        const name = data.name;
        const phone = data.phone;
        // Create a random password for the new user
        const password = Math.random().toString(36).slice(-8);
        // Create a new Firebase Auth user with the provided email and password
        const user = await auth.createUser({
            email: email,
            password: password
        });
        // Set the Firebase Auth display name to the name field in the document
        await auth.updateUser(user.uid, {
            displayName: name
        });
        // Create a new document in the users collection with the same data as the original document
        await firestore.collection('users').doc(user.uid).set({
            name: name,
            phone: phone
        });
        console.log(`New user with email ${email} and UID ${user.uid} has been created.`);
        return null;
    });

Chat GPT：这个函数监听Firestore中客户调集的创立行为。一旦一个新的客户文档创立了，它会从文档中获取电子邮箱、姓名和电话等数据。然后，它为新的用户生成了一个随机暗码，并运用电子邮箱和暗码创立了一个新的Firebase Auth用户。接下来，它将Firebase Auth的“displayName”设置为用户的“name”字段的值，之后运用了原文档相同的姓名和电话字段在用户调集中创立了一个新的文档。最终，它在控制点打印了一条新用户被创立的音讯，并回来null表示函数已经结束。

Flutter 开发者: 能够增加捕获反常以及在控制台打印反常的代码吗？

Chat GPT: 没问题! 下面是增加了反常处理后的代码：

exports.userRegistration = functions.firestore
  .document("auth_users/{customerId}")
  .onCreate(async (snap, context) =>{
      const data = snap.data();
      const email = data.email;
      const name = data.name;
      const surname = data.surname;
      const displayName = name + ' ' + surname;
      const phone = data.phone;
      const address = data.address;
      try {
          // Create a random password for the new user
          const password = Math.random().toString(36).slice(-8);
          // Create a new Firebase Auth user with the provided email and password
          const user = await auth.createUser({
              email: email,
              password: password,
            });
          // Set the Firebase Auth display name to the name field in the document
          await auth.updateUser(user.uid, {
              displayName: name,
              phone: phone,
            });
          // Create a new document in the users collection with the same data as the original document
          await firestore.collection("users").doc(user.uid).set({
              email: email,
              name: name,
              surname: surname,
              displayName: displayName,
              phone: phone,
              address: address,
            });
          console.log(`New user with email ${email} and UID ${user.uid} has been created.`);
        } catch (error) {
          console.error(`Error creating user with email ${email}:`, error);
        }
      return null;
    });

Chat GPT: 咱们给创立新的Firebase Auth用户和创立新的用户调集文档这部分代码增加了try-catch块。假如这个进程中呈现了过错，将会捕获这个过错而且在控制台打印出来包含用户电子邮箱的过错信息。这会协助你承认和处理用户注册进程中或许产生的问题。

解说代码

Flutter 开发者: 你能帮我解说一下这个代码吗：github.com/appstree-io…

Chat GPT: 这是一个运用Firebase作为后端的简略的谈天运用示例GitHub库房代码。其间 firebase_service.dart 文件负责处理Flutter App与Firebase后端的通讯。下面是这个代码的扼要说明： FirebaseService类：这是firebase_service.dart文件的主类。它包含了与Firebase交互的办法，例如创立新用户，获取一个用户的一切谈天会话，发送音讯等等。 FirebaseFirestore类：这是Firebase SDK为Flutter供给的类，供给了一个与Firestore数据库交互的接口。FirebaseService类运用这个类与数据库进行交互。 UserModel类：这是代表谈天运用用户的一个简略的类，包含了用户ID、姓名、电子邮箱和头像等信息。 ChatModel类：这是代表谈天运用谈天会话的一个简略的类，包含了参加谈天的用户ID，最终发送的音讯以及发送音讯的时刻戳。 MessageModel类：这是代表谈天运用音讯的一个简略的类，包含了发送音讯的用户ID，音讯文本和音讯的时刻戳。 createUser办法：这个办法用于在Firebase里创立一个新用户。它接纳UserModel目标作为输入，然后运用FirebaseFirestore类将用户增加到数据库。 getChats办法：这个办法获取用户的一切谈天会话。它运用用户ID作为输入，然后运用FirebaseFirestore类查询这个用户ID参加的一切谈天会话。 sendMessage办法：这个办法用于在谈天运用中发送音讯。它运用MessageModel目标作为输入，然后运用FirebaseFirestore类往数据库里增加一条音讯。总的来说，firebase_service.dart给Flutter App供给了一个与Firebase简略通讯的接口，并完结了一个简略的谈天功用。

Flutter 开发者：PlatformException 和 FirebaseAuthException 有什么区别？

Chat GPT：PlatformException 和 FirebaseAuthException 都代表了Flutter结构中运用Firebase授权认证的产生的过错. 二者首要的差别在于规划他们的意图和他们代表的过错类型： PlatformException: 这个反常是一个通用型的反常，用来表示产生了在Firebase中没有界说的过错。它是Flutter结构的一部分，典型的情况便是一个渠道过错产生时抛出。例如，与设备的衔接或存储的衔接产生的过错 PlatformException 能够被任何与渠道功用交互的插件或pacakge抛出。 FirebaseAuthException: 这是一个在于Firebase授权认证交互式产生的特定过错。当Firebase的授权认证服务呈现过错时就会抛出FirebaseAuthException 过错，例如无效凭证、用户不存在或用户账户被禁用。 FirebaseAuthException 是 firebase_auth的一部分，在 Firebase 授权认证模块界说。总的来说，PlatformException是一个产生任何渠道类型的过错时抛出，而FirebaseAuthException则是Firebase 授权认证的一个详细的过错。假如是经过Firebase来做授权认证，那么应该运用FirebaseAuthException。关于渠道类型的过错，应该运用PlatformException。

修正过错

Flutter 开发者: 我有如下的Widget:

GestureDetector(
  onTap: () async {
   myLocalNotifications.cancelNotification(context, reminder.id).then((value) {
    print('ddd');
    printNotification();
  });
  },

Flutter Developer: 我在其他类中也有这样的一个办法：

Future<void> cancelNotification(context, int notificationId) async {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return CustomAlertYesOrNo(
          alertTitle: 'Confirmation',
          alertText: 'Do you want to delete this reminder?',
          onConfirmed: () async {
            await flutterLocalNotificationsPlugin?.cancel(notificationId).then((value) {
              print('xxx');
              Navigator.pop(context);
            });
          }
      );
    },
  );
}

Flutter Developer: 点击后，这个函数履行正常，我也看到打印了“xxx”。然后，“ddd”并没有打印，为什么？我怎么样才能让这个代码能够履行？

Chat GPT: 为什么“ddd”没有打印的原因是认为它在cancelNotification()办法的.then()回调里面。很或许是由于某些原因导致这个then()回调没有履行。为了调试这个问题，你能够尝试在cancelNotification()函数增加一个过错补偿的代码，看看是不是有过错抛出，例如像下面这样。假如没有抛出过错，你能够在CustomAlertYesOrNo组件里加一下打印句子，看看是否正常显现以及封闭。

await flutterLocalNotificationsPlugin?.cancel(notificationId)
  .then((value) {
    print('xxx');
    Navigator.pop(context);
  })
  .catchError((error) {
    print('Error cancelling notification: $error');
  });

Chat GPT: 别的，你也能够把then()回调从cancelNotification()移除，然后运用await的办法等候在打印“ddd”之前的撤销操作完结，然后调用printNotification函数。经过这种办法，你能够承认撤销操作在打印“ddd”和调用printNotification函数之前就已经完结，代码如下：

GestureDetector(
  onTap: () async {
    await myLocalNotifications.cancelNotification(context, reminder.id);
    print('ddd');
    printNotification();
  },
),

Flutter 开发者: 我移除了then回调，而且运用了await的办法等候撤销操作完结。结果是先打印了“ddd”，然后才打印“xxx”。 Chat GPT: 假如在“xxx”之前先打印了“ddd”，意味着在cancelNotification函数中的撤销操作耗时比在函数外的print句子要长。这或许是showDialog或其他比较杂乱的操作导致UI线程呈现了推迟。处理的办法是，你能够将print('ddd') 和 printNotification()移到CustomAlertYesOrNo的回调办法onConfirmed内。这样的话，他们只能在用户承认撤销操作完结后才履行。例如：

Future<void> cancelNotification(context, int notificationId) async {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return CustomAlertYesOrNo(
        alertTitle: 'Confirmation',
        alertText: 'Do you want to delete this reminder?',
        onConfirmed: () async {
          await flutterLocalNotificationsPlugin?.cancel(notificationId);
          print('xxx');
          Navigator.pop(context);
          print('ddd');
          printNotification();
        }
      );
    },
  );
}

Chat GPT: 这样的话，print('ddd') 和 printNotification() 句子只会在用户承认撤销操作完结后才会履行。 Flutter 开发者：我不能在onConfirmed里调用printNotification()。有其他处理办法吗？ Chat GPT：假如你不能在onConfirmed里调用printNotification()，你能够经过一个回调办法告诉父组件撤销操作已经完结了，然后将notificationId作为一个参数传递曩昔。例如，你能够修正cancelNotification()函数，接纳一个Function(int)参数。这个函数会在撤销操作完结后调用，然后触发printNotification()函数或在撤销操作完结后的需求履行的其他代码。

Future<void> cancelNotification(context, int notificationId, Function(int) onCancelCompleted) async {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return CustomAlertYesOrNo(
        alertTitle: 'Confirmation',
        alertText: 'Do you want to delete this reminder?',
        onConfirmed: () async {
          await flutterLocalNotificationsPlugin?.cancel(notificationId);
          print('xxx');
          Navigator.pop(context);
          onCancelCompleted(notificationId);
        }
      );
    },
  );
}

Chat GPT:之后，你能够修正GestureDetector的onTap 回调办法，将需求履行的回调函数传递给cancelNotification函数:

GestureDetector(
  onTap: () async {
    await myLocalNotifications.cancelNotification(context, reminder.id, (notificationId) {
      print('ddd');
      printNotification();
    });
  },
),

Chat GPT: 这样的话，就能够保证print('ddd') 和 printNotification() 只会在onCancelCompleted回调被调用，也便是撤销操作承认完结后才履行。

编写文档

这儿，运用了一个从GitHub随意找到一个Flutter App项目，然后要求Chat GPT来写一些文档。

Flutter 开发者: 你能给这个App写一份用户文档告诉用户怎么运用这个App吗？App链接： github.com/sarvesh4396… Chat GPT: 好的,很高兴能为你编写 Notepad Flutter App的用户文档。下面是运用这个App的散布辅导：

怎么运用Notepad App Notepad App是一个协助你创立、修改和删去笔记的十分简洁的App，下面是运用指南：

在你的手机上翻开App 在主界面上，你会看到你的一切笔记的列表（假如你有创立过的话）。要增加一个新的笔记，点击屏幕右下角的绿色的加号按钮，然后你就能够进入到增加笔记的界面。你能够输入笔记的标题和内容，完结之后，点击“保存”按钮保存笔记。要修改已有的笔记，在主界面上点击这条修改，然后就能够进入到修改界面，你能够在修改界面修正笔记的标题和内容。完结后点击“修改”按钮能够坚持修改后的内容。要删去笔记，在主界面上的一条笔记上向左滑动，这时候会呈现一个“删去”按钮，点击这个按钮即可删去这条笔记。就这样！Notepad App经过简略、直接的办法办理你的笔记。不管你是用于记载工作、学习仍是个人其他用处，都能够让你一站式办理你的笔记。

给Dart文件增加注释

这个事例看看ChatGPT能不能协助咱们编写更易读的代码。我从GitHub上随意下载了一个Dart文件，然后让Chat GPT增加注释来重写代码。下面是原文件：

import 'dart:convert';
import 'package:chat_gpt_clone/models/api_model.dart';
import 'package:http/http.dart' as http;
class ApiService {
  Future<Map<String, dynamic>> getDataFromOpenAI(String query) async {
    final response = await http.post(
      Uri.parse(
        'https://api.openai.com/v1/engines/text-davinci-003/completions'),
      headers: {
        'Content-Type': contentType,
        'Authorization': 'Bearer $apiKey',
      },
      body: jsonEncode({
        'prompt': query,
        'max_tokens': 300,
        'temperature': 0,
      }),
    );
    if (response.statusCode == 200) {
      return jsonDecode(response.body);
    } else {
      throw Exception('Failed to get data from OpenAI API');
    }
  }
}

Flutter 开发者: 你能给下面的代码增加注释吗: github.com/Siddharth-c… 。此外，我期望代码能够愈加易读易懂。 Chat GPT: 没问题, 下面是增加注释后的更易读易懂的代码:

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:chat_gpt_clone/models/message.dart';
class ApiService {
  // Base URL for the API
  final String baseUrl = "https://api.openai.com/v1/";
  // API endpoint for generating a message
  final String endpoint = "engines/davinci-codex/completions";
  // API key for accessing the OpenAI API
  final String apiKey;
  ApiService({required this.apiKey});
  Future<Message> generateMessage({required String prompt}) async {
    // Define the headers for the API request
    final headers = {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer $apiKey',
    };
    // Define the request body for the API request
    final body = {
      'prompt': prompt,
      'max_tokens': 60,
      'temperature': 0.9,
    };
    // Make the API request and handle the response
    final response = await http.post(Uri.parse(baseUrl + endpoint),
                                     headers: headers, body: json.encode(body));
    if (response.statusCode == 200) {
      // If the response is successful, parse the JSON data and return a Message object
      final jsonBody = json.decode(response.body);
      return Message.fromJson(jsonBody['choices'][0]['text']);
    } else {
      // If the response is not successful, throw an error with the status code and message
      throw Exception(
        'Failed to generate message. Status code: ${response.statusCode}. Error message: ${response.body}');
    }
  }
}

编写一个简易的ToDo App

这是终极测验 —— 完结一个完好的Flutter ToDo App，下面是与Chat GPT的对话进程。

Flutter 开发者: 你好，能否帮我写一个根据Flutter的简略的待办事项提示App。这个App需求列出一切的待办事项，然后有一个悬浮的按钮来增加新的待办事项。每个待办事项有一个标题、描绘和到期日期。

Chat GPT: 没问题, 这是一个根底的待办事项提示App，它列出了一切的待办事项，允许你经过一个悬浮按钮增加新的待办事项。待办事项的字段包含了标题、描绘和到期时刻。

首先，创立一个新的Flutter工程，然后翻开main.dart，替换为下面的代码:

import 'package:flutter/material.dart';
void main() => runApp(ReminderApp());
class ReminderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reminder App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ReminderList(),
    );
  }
}
class ReminderList extends StatefulWidget {
  @override
  _ReminderListState createState() => _ReminderListState();
}
class _ReminderListState extends State<ReminderList> {
  List<Reminder> reminders = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reminders'),
      ),
      body: ListView.builder(
        itemCount: reminders.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(reminders[index].title),
            subtitle: Text(reminders[index].description),
            trailing: Text(reminders[index].dueDate.toString()),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _addReminder(context),
        tooltip: 'Add Reminder',
        child: Icon(Icons.add),
      ),
    );
  }
  void _addReminder(BuildContext context) {
    TextEditingController titleController = TextEditingController();
    TextEditingController descriptionController = TextEditingController();
    DateTime dueDate;
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Add Reminder'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                controller: titleController,
                decoration: InputDecoration(
                  labelText: 'Title',
                ),
              ),
              TextField(
                controller: descriptionController,
                decoration: InputDecoration(
                  labelText: 'Description',
                ),
              ),
              ListTile(
                title: Text('Due Date'),
                subtitle: dueDate == null
                ? null
                : Text(dueDate.toString()),
                trailing: Icon(Icons.keyboard_arrow_down),
                onTap: () async {
                  DateTime picked = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(),
                    firstDate: DateTime.now(),
                    lastDate: DateTime(2100),
                  );
                  if (picked != null) {
                    setState(() {
                      dueDate = picked;
                    });
                  }
                },
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text('Cancel'),
            ),
            ElevatedButton(
              onPressed: () {
                Reminder reminder = Reminder(
                  title: titleController.text,
                  description: descriptionController.text,
                  dueDate: dueDate,
                );
                setState(() {
                  reminders.add(reminder);
                });
                Navigator.pop(context);
              },
              child: Text('Save'),
            ),
          ],
        );
      },
    );
  }
}
class Reminder {
  String title;
  String description;
  DateTime dueDate;
  Reminder({
    required this.title,
    required this.description,
    required this.dueDate,
  });
}

这个代码界说了一个新的ReminderApp组件来设置App的标题和主题，然后将主页设置为了ReminderList组件。

ReminderList组件是一个有状况组件，保护了待办事项列表。列表经过 ListView.builder显现。每条待办事项运用了 ListTile 来显现标题、描绘和到期日期。 ReminderList还包含了一个悬浮按钮，点击这个按钮会调研_addReminder 办法。点击按钮会显现了一个对话框，允许用户输入新的待办事项的标题、描绘和到期日期。当用户保存新的待办事项时，这条待办事项会增加到待办事项列表，然后组件会重建来更新待办事项列表。最终，经过一个Reminder类来界说待办事项的特点，包含标题、描绘和到期日期。就这些了。经过这个根底的待办事项提示App能够让你有个好的开始，而且能够扩展更多的特性。

看起来不错，可是运转后却报错了，所以我把过错仿制给了Chat GPT。

Flutter 开发者: 谢谢，可是我得到了一个过错: Non-nullable variable ‘dueDate’ must be assigned before it can be used.

Chat CPT:很抱歉产生了这个过错！这是由于 dueDate 声明为一个非空的变量，可是没有给初始化的值。.下面是更新后的_addReminder办法，这儿把 dueDate 初始化为 DateTime.now():

void _addReminder(BuildContext context) {
  TextEditingController titleController = TextEditingController();
  TextEditingController descriptionController = TextEditingController();
  DateTime dueDate = DateTime.now();
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Add Reminder'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              controller: titleController,
              decoration: InputDecoration(
                labelText: 'Title',
              ),
            ),
            TextField(
              controller: descriptionController,
              decoration: InputDecoration(
                labelText: 'Description',
              ),
            ),
            ListTile(
              title: Text('Due Date'),
              subtitle: dueDate == null
                  ? null
                  : Text(dueDate.toString()),
              trailing: Icon(Icons.keyboard_arrow_down),
              onTap: () async {
                DateTime picked = await showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime.now(),
                  lastDate: DateTime(2100),
                );
                if (picked != null) {
                  setState(() {
                    dueDate = picked;
                  });
                }
              },
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Cancel'),
          ),
          ElevatedButton(
            onPressed: () {
              Reminder reminder = Reminder(
                title: titleController.text,
                description: descriptionController.text,
                dueDate: dueDate,
              );
              setState(() {
                reminders.add(reminder);
              });
              Navigator.pop(context);
            },
            child: Text('Save'),
          ),
        ],
      );
    },
  );
}

风趣！Chat GPT懂得分析过错，而且解说了原因和修正了代码过错。再次运转代码，却报了其他的过错，所以继续问 Chat GPT.

Flutter 开发者: 过错: A value of type ‘DateTime?’ can’t be assigned to a variable of type ‘DateTime’ because ‘DateTime?’ is nullable and ‘DateTime’ isn’t.

Chat GPT: 抱歉产生了过错。认为 dueDate声明为一个非空目标, 它不能赋予空值。可是，假如用户不挑选日期，那从showDatePicker 会回来空值。要修正这个问题，需求给dueDate一个默认值（） (如 DateTime.now()), 然后再从头赋值的时候检查是否为空，下面是更新后的代码。

void _addReminder(BuildContext context) {
  TextEditingController titleController = TextEditingController();
  TextEditingController descriptionController = TextEditingController();
  DateTime dueDate = DateTime.now();
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Add Reminder'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              controller: titleController,
              decoration: InputDecoration(
                labelText: 'Title',
              ),
            ),
            TextField(
              controller: descriptionController,
              decoration: InputDecoration(
                labelText: 'Description',
              ),
            ),
            ListTile(
              title: Text('Due Date'),
              subtitle: dueDate == null
                  ? null
                  : Text(dueDate.toString()),
              trailing: Icon(Icons.keyboard_arrow_down),
              onTap: () async {
                DateTime? picked = await showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime.now(),
                  lastDate: DateTime(2100),
                );
                if (picked != null) {
                  setState(() {
                    dueDate = picked;
                  });
                }
              },
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Cancel'),
          ),
          ElevatedButton(
            onPressed: () {
              Reminder reminder = Reminder(
                title: titleController.text,
                description: descriptionController.text,
                dueDate: dueDate,
              );
              setState(() {
                reminders.add(reminder);
              });
              Navigator.pop(context);
            },
            child: Text('Save'),
          ),
        ],
      );
    },
  );
}

Flutter developer: 很棒，谢谢！你能在主页按卡片的方式显现待办事项吗，而且根据是否过期为每个待办事项增加一个不同的图标。一起，请格局化数据以只显现日期而不显现详细的时刻。

Chat GPT: 好的, 这是更新后按卡片显现待办事项的代码，曩昔和未来到期的待办事项会有不同的图标，而且到期日期也格局化为只保留了日期部分:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Reminders'),
    ),
    body: ListView.builder(
      itemCount: reminders.length,
      itemBuilder: (BuildContext context, int index) {
        Reminder reminder = reminders[index];
        IconData iconData =
            reminder.dueDate.isAfter(DateTime.now()) ? Icons.access_time : Icons.watch_later;
        return Card(
          child: ListTile(
            leading: Icon(iconData),
            title: Text(reminder.title),
            subtitle: Text(
              DateFormat('yyyy-MM-dd').format(reminder.dueDate),
            ),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  reminders.removeAt(index);
                });
              },
            ),
          ),
        );
      },
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => _addReminder(context),
      tooltip: 'Add Reminder',
      child: Icon(Icons.add),
    ),
  );
}

Chat GPT: 在这个版本中，ListView.builder 组件用来显现待办事项，关于每一个待办事项都运用Card组件来显现他们的标题、描绘和到期日期。运用了一个 icon 来指示这个待办事项是否是曩昔的仍是未来的。运用了 DateFormat 类将到期日期格局化为 yyyy-MM-dd, 这样只会显现日期，而不会显现详细的时刻。

Chat GPT: 记住 DateFormat 类是 intl package中的，因而在运用之前需求引入这个package ，因而需求在你的Dart文件顶部增加下面导入的代码：

import 'package:intl/intl.dart';

结果是我在几分钟内写了一个完好功用的ToDo清单App，尽管是个十分根底的App，可是运转正常，下面是App的界面截图，看起来仍是适当不错的。

总结

能够看到，Chat GPT是一个能够大幅提高Flutter 开发者生产力的伟大工具。在本文的事例中，Chat CPT成功搞定了咱们的需求。

在某些事例下，咱们需求运用2到3个问题才能得到需求的答案，也便是咱们需求花点时刻思考怎么向Chat GPT发问，即便一开始你的问题不那么清晰，可是能够在后面追加问题来得的准确的答案。

我是岛上码农，微信公众号同名。如有问题能够加自己微信沟通，微信号：island-coder。

：觉得有收获请点个赞鼓励一下！

：收藏文章，方便回看哦！

：评论沟通，相互前进！

本文正在参加「金石方案」

屌炸天！国外同行这样用Chat GPT提高Flutter开发的效率！

前语

Chat GPT能够在哪些方面协助Flutter开发者？

Chat GPT是代码生成的最佳工具吗

运用实例

总结

相关文章

使用GPT-3.5和Next.js构建聊天机器人：详细指南

Xcode工程管理

OSG之状态继承

取代 Docker Desktop？Podman Desktop 发布 GA 版本 1.0

作者信息