太强了！！！ChatGPT一口气写了三个版本代码TODO应用（Get、Provider、Riverpod）

10XAI
334 阅读3分钟

问题：使用Flutter 和 Getx 编写一个TODO应用

以下是ChatGPT 的回答

  1. 创建一个新的Flutter项目

  2. 安装Getx库：在pubspec.yaml文件中添加getx依赖：

dependencies:
  get: ^3.0.0
  1. 创建一个Todo类，用于存储Todo项的信息：
class Todo {
  final String title;
  final String description;
  final bool isDone;

  Todo({this.title, this.description, this.isDone = false});
}
  1. 创建一个TodoController类，用于管理Todo项：
import 'package:get/get.dart';

class TodoController extends GetxController {
  final todos = List<Todo>().obs;

  void addTodo(Todo todo) {
    todos.add(todo);
  }

  void deleteTodo(Todo todo) {
    todos.remove(todo);
  }

  void toggleTodo(Todo todo) {
    todo.isDone = !todo.isDone;
  }
}
  1. 创建一个TodoListWidget，用于显示Todo项列表：
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:todo_app/todo.dart';
import 'package:todo_app/todo_controller.dart';

class TodoListWidget extends StatelessWidget {
  final TodoController controller = Get.find();

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: controller.todos.length,
      itemBuilder: (context, index) {
        final todo = controller.todos[index];
        return ListTile(
          title: Text(todo.title),
          trailing: Checkbox(
            value: todo.isDone,
            onChanged: (value) {
              controller.toggleTodo(todo);
            },
          ),
        );
      },
    );
  }
}
  1. 创建一个TodoFormWidget，用于添加新的Todo项：
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:todo_app/todo.dart';
import 'package:todo_app/todo_controller.dart';

class TodoFormWidget extends StatefulWidget {
  @override
  _TodoFormWidgetState createState() => _TodoFormWidgetState();
}

class _TodoFormWidgetState extends State<TodoFormWidget> {
  final _formKey = GlobalKey<FormState>();
  final _titleController = TextEditingController();
  final _descriptionController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            controller: _titleController,
            decoration: InputDecoration(labelText: 'Title'),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter a title';
              }
              return null;
            },
          ),
          TextFormField(
            controller: _descriptionController,
            decoration: InputDecoration(labelText: 'Description'),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter a description';
              }
              return null;
            },
          ),
          RaisedButton(
            onPressed: () {
              if (_formKey.currentState.validate()) {
                final todo = Todo(
                  title: _titleController.text,
                  description: _descriptionController.text,
                );
                Get.find<TodoController>().addTodo(todo);
                _titleController.clear();
                _descriptionController.clear();
              }
            },
            child: Text('Add Todo'),
          ),
        ],
      ),
    );
  }
}
  1. 在应用的主页面中添加TodoListWidget和TodoFormWidget：
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:todo_app/todo_controller.dart';
import 'package:todo_app/todo_form_widget.dart';
import 'package:todo_app/todo_list_widget.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Todo App',
      home: GetX<TodoController>(
        init: TodoController(),
        builder: (controller) {
          return Scaffold(
            appBar: AppBar(
              title: Text('Todo App'),
            ),
            body: Column(
              children: <Widget>[
                Expanded(
                  child: TodoListWidget(),
                ),
                TodoFormWidget(),
              ],
            ),
          );
        },
      ),
    );
  }
}
  1. 运行应用，添加新的Todo项，并在列表中查看它们：

问题：使用Flutter 和 Provider 编写一个TODO应用

以下是ChatGPT 的回答

  1. 创建一个新的Flutter项目，并在pubspec.yaml文件中添加provider依赖：
dependencies:
  flutter:
    sdk: flutter
  provider: ^4.3.2
  1. 创建一个TodoModel类，用于存储Todo项的数据：
class TodoModel {
  final String title;
  final String description;
  final bool isDone;

  TodoModel({this.title, this.description, this.isDone = false});
}
  1. 创建一个TodoProvider类，用于管理Todo项的数据：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class TodoProvider with ChangeNotifier {
  List<TodoModel> _todos = [];

  List<TodoModel> get todos => _todos;

  void addTodo(TodoModel todo) {
    _todos.add(todo);
    notifyListeners();
  }

  void toggleTodo(TodoModel todo) {
    todo.isDone = !todo.isDone;
    notifyListeners();
  }
}
  1. 创建一个TodoList组件，用于显示Todo项的列表：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:todo_app/todo_model.dart';
import 'package:todo_app/todo_provider.dart';

class TodoList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final todos = Provider.of<TodoProvider>(context).todos;

    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        final todo = todos[index];
        return ListTile(
          title: Text(todo.title),
          trailing: Checkbox(
            value: todo.isDone,
            onChanged: (value) {
              Provider.of<TodoProvider>(context, listen: false).toggleTodo(todo);
            },
          ),
        );
      },
    );
  }
}
  1. 创建一个TodoForm组件，用于添加新的Todo项：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:todo_app/todo_model.dart';
import 'package:todo_app/todo_provider.dart';

class TodoForm extends StatefulWidget {
  @override
  _TodoFormState createState() => _TodoFormState();
}

class _TodoFormState extends State<TodoForm> {
  final _formKey = GlobalKey<FormState>();
  final _titleController = TextEditingController();
  final _descriptionController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            controller: _titleController,
            decoration: InputDecoration(labelText: 'Title'),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter a title';
              }
              return null;
            },
          ),
          TextFormField(
            controller: _descriptionController,
            decoration: InputDecoration(labelText: 'Description'),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter a description';
              }
              return null;
            },
          ),
          RaisedButton(
            onPressed: () {
              if (_formKey.currentState.validate()) {
                Provider.of<TodoProvider>(context, listen: false).addTodo(
                  TodoModel(
                    title: _titleController.text,
                    description: _descriptionController.text,
                  ),
                );
                Navigator.pop(context);
              }
            },
            child: Text('Add Todo'),
          ),
        ],
      ),
    );
  }
}
  1. 在应用的主页面中，使用TodoProvider管理TodoList和TodoForm组件：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:todo_app/todo_form.dart';
import 'package:todo_app/todo_list.dart';
import 'package:todo_app/todo_provider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo App',
      home: ChangeNotifierProvider(
        create: (context) => TodoProvider(),
        child: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo App'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Expanded(
              child: TodoList(),
            ),
            RaisedButton(
              onPressed: () {
                showModalBottomSheet(
                  context: context,
                  builder: (context) => TodoForm(),
                );
              },
              child: Text('Add Todo'),
            ),
          ],
        ),
      ),
    );
  }
}

问题：使用Flutter 和 Riverpod 编写一个TODO应用 具体代码实现

以下是ChatGPT 的回答

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

final todosProvider = Provider((ref) => List<String>());

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo App',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Todos'),
            TodoList(),
            AddTodo(),
          ],
        ),
      ),
    );
  }
}

class TodoList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final todos = context.read(todosProvider);
    return Expanded(
      child: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(todos[index]),
          );
        },
      ),
    );
  }
}

class AddTodo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textController = TextEditingController();
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        controller: textController,
        decoration: InputDecoration(
          hintText: 'Add Todo',
        ),
        onSubmitted: (value) {
          context.read(todosProvider).add(value);
          textController.clear();
        },
      ),
    );
  }
}

真的太强了!!!! 只要chatgpt学习样本足够多，一个初级的工程师是完全有能力替代了。 在代码方面的检索完胜现在所有的搜索引擎 一个跨时代的产品即将要出现，想象空间真的太大了 赶紧学习利用起来吧，绝对是编程的好助手 让你效率直接翻倍

avatar
文章
阅读
粉丝