{"id":15599473,"url":"https://github.com/leerob/dart-react-todo","last_synced_at":"2025-07-02T13:38:17.661Z","repository":{"id":86673795,"uuid":"110776229","full_name":"leerob/dart-react-todo","owner":"leerob","description":"📝Building a todo list with Dart \u0026 React from start to finish","archived":false,"fork":false,"pushed_at":"2020-07-27T17:56:27.000Z","size":110,"stargazers_count":23,"open_issues_count":0,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T22:32:05.812Z","etag":null,"topics":["boostrap","dart","flux","react","redux","todomvc","workiva"],"latest_commit_sha":null,"homepage":"https://leerob.io/blog/getting-started-with-dart-and-react","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leerob.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-15T03:02:54.000Z","updated_at":"2025-03-26T12:19:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"5018dfb5-5ba6-4f0e-90ac-8dd4686205d8","html_url":"https://github.com/leerob/dart-react-todo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leerob%2Fdart-react-todo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leerob%2Fdart-react-todo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leerob%2Fdart-react-todo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leerob%2Fdart-react-todo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leerob","download_url":"https://codeload.github.com/leerob/dart-react-todo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252535350,"owners_count":21763945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boostrap","dart","flux","react","redux","todomvc","workiva"],"created_at":"2024-10-03T01:58:37.894Z","updated_at":"2025-05-05T16:44:29.748Z","avatar_url":"https://github.com/leerob.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"http://i.imgur.com/qfLc39d.jpg\" alt=\"Dart React Todo\" width=\"400\"\u003e\n  \u003cbr\u003e\n  Getting Started with Dart \u0026 React\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n[![Build Status](https://travis-ci.org/leerob/dart-react-todo.svg?branch=master)](https://travis-ci.org/leerob/dart-react-todo)\n\n\u003e Update (2019): This tutorial has been updated for [Dart 2.0](https://www.dartlang.org/dart-2) and [OverReact 2.0](https://github.com/Workiva/over_react/releases/tag/2.0.0) 🎉\n\n### Overview\n\nThere are a million different ways to build a web app in today's landscape. Different languages and frameworks come and go and vary in popularity. There isn't one right way to do things and ultimately it's about weighing the pros and cons of the available tools at your disposable. The goal of this document is to inform you about another option you may have not previously considered: using React with Dart.\n\n### Table of Contents\n\n- [Quickstart](#quickstart)\n- [What is Dart?](#what-is-dart)\n- [Why React?](#why-react)\n- [Requirements](#requirements)\n- [Getting Started](#getting-started)\n- [Building \u0026 Running](#building-running)\n- [Dart Development Environment](#dart-development-environment)\n- [Building the Application](#building-the-application)\n- [Testing](#testing)\n- [Continuous Integration](#continuous-integration)\n- [Deploying](#deploying)\n- [Your Turn](#your-turn)\n- [Additional Resources](#additional-resources)\n\n### Quickstart\n\nIf you [already have Dart installed and configured](#installing-dart) for Dart 2.0, you can use the quick start.\n\n```bash\n$ git clone https://github.com/leerob/dart-react-todo.git\n$ cd dart-react-todo\n$ pub get\n$ webdev serve\n```\n\nOpen up http://localhost:8080/ to see the application running in the browser.\n\n### What is Dart?\n\nDart is a programming language originally [developed by Google](https://dart.dev/) for building complex web applications. It's a [statically-typed](https://dart.dev/guides/language/sound-dart) alternative to JavaScript that compiles to JS for use in the browser. It's open-source, easy to learn, and easy to scale. But wait, there's more!\n\n- Strong IDE integration (code completion, code navigation, static analysis, etc.)\n- Strong core set of common libraries (async, collections, isolates, etc.)\n- Excellent development ecosystem\n- Multi-threading support\n- And [much, much more](https://dart.dev/guides/language/language-tour)\n\nGoogle uses Dart for [AdWords](https://news.dartlang.org/2016/03/the-new-adwords-ui-uses-dart-we-asked.html) which makes up the majority of Google's revenue. It's also the language used at [Workiva](https://www.workiva.com/) for their next-generation products. Workiva has committed to using Dart and has published a [variety of OSS (open-source software) libraries](https://workiva.github.io/) to make developer's lives easier. If you're curious, here's a list of some companies [who use Dart](https://www.dartlang.org/community/who-uses-dart).\n\n### Why React?\n\nAs I mentioned at the start of this document, it's important to thoroughly evaluate all of the different framework options before choosing what's right for your team or company. I won't go too in-depth here on [React](https://reactjs.org/) vs. [Angular](https://angular.io/) since there are a [variety of articles](https://www.google.com/search?q=react+vs+angular) that dive into specifics, but I will note a couple wins for React:\n\n- Uni-directional data flow\n- Declarative nature of rendering views\n- XML-like syntax called JSX\n\n### Requirements\n\nLet's assume we are given some requirements to create a todo list as shown below. To help us [\"think\" in React](https://reactjs.org/docs/thinking-in-react.html), I've outlined the design with boxes for each React component.\n\n![Todo List Spec Outlined](http://i.imgur.com/1Ra8ID8.jpg)\n\n### Getting Started\n\nThe IDE you choose is mostly personal preference, but here are some I suggest for Dart:\n\n- [VS Code](https://code.visualstudio.com/) (Free)\n- [WebStorm](https://www.jetbrains.com/webstorm/) (Requires License)\n\nYou can clone the git repository with the todo application by running:\n\n```bash\n$ git clone https://github.com/leerob/dart-react-todo.git\n$ cd dart-react-todo\n```\n\n### Installing Dart\n\nYou can install Dart on macOS using [Homebrew](https://brew.sh/).\n\n```bash\n$ brew tap dart-lang/dart\n$ brew install dart\n```\n\nServing Dart applications in a Web browser is done using the `webdev` command. This should be activated globally - instead of on a project-by-project basis:\n\n```bash\n$ pub global activate webdev\n```\n\n### Building \u0026 Running\n\nThe Dart SDK comes with a [tool called `pub`](https://dart.dev/tools/pub/cmd) to help manage your codebase. The most common command `pub get` is used to download a package's dependencies. This is the first thing you will need to do when checking out an\nexisting Dart repository.\n\nIn addition to getting dependencies, you simply need to serve the application to view it in a browser:\n\n```bash\n$ pub get\n$ webdev serve\n```\n\nNow, we can open up http://localhost:8080/ to see the todo application.\n\n#### Building vs. Serving\n\nSome Dart libraries _(like over_react)_ - use builders to generate files \"under the hood\". When you first\nopen a project that contains over_react components in an IDE like Webstorm - you may see a bunch of \nanalysis errors in the \"Dart Analysis\" tab - even after you run `pub get`. This happens because there are\nreferences to objects that have not been built yet. In order to get rid of the analysis errors in your IDE, \nrun `pub run build_runner build` from the root of the project, then restart the analysis server. _Note that\nserving the app via `webdev serve` will also perform the same build._\n\n### Dart Development Environment\n\nThe Dart SDK ships with tools to help you hit the ground running instead\nof having to set up your own development and build environments for each\nproject. These tools provide dependency management, code compilation /\nminification, and debugging support out of the box.\n\n#### Directory \u0026 File Structure\n\nDart has a prescribed directory structure in order to ensure that its tools work\nout of the box.\n\n```\nyour_app/\n├── lib/\n│   └── src/\n├── test/\n├── tool/\n├── web/\n├── pubspec.lock\n└── pubspec.yaml\n```\n\n- **`lib/`**\n  - Contains all internal implementation code.\n- **`test/`**\n  - Contains all unit, integration, and functional tests.\n- **`tool/`**\n  - Contains development tools, scripts, and configuration.\n- **`web/`**\n  - This directory is served by default when running the application. It is common to\n    include an `index.html` file in this directory.\n- **`pubspec.yaml`**\n  - This file defines all the metadata about your package such as name, version, authors,\n    dependencies, etc.\n- **`pubspec.lock`**\n  - This file specifies the version of each dependency installed in the project.\n    It will be automatically updated when dependencies change in\n    `pubspec.yaml` or by running `pub upgrade`. __[It should only be committed in application packages](https://dart.dev/guides/libraries/private-files)__\n\n#### [dart_dev](https://github.com/Workiva/dart_dev)\n\n`dart_dev` is a centralized tooling package built on top of the Dart SDK. All Dart projects eventually share a common set of development requirements:\n\n- Tests (unit, integration, and functional)\n- Consistent code formatting\n- Static analysis to detect issues\n- Documentation generation\n\nThe Dart SDK provides the necessary tooling to accomplish the tasks mentioned above but lacks a consistent usage pattern across multiple projects. Using dart_dev, a single configuration file will get our project configured and ready to use a variety of command line arguments.\n\nFor example: let's format the entire code base.\n\n```bash\n$ pub run dart_dev format\n```\n\n\u003e __Recommended Formatting Package__\n\u003e\n\u003e For \n\u003e\n\u003e \n\nTo make things even more simple, we can set up a bash alias\n\n```bash\n$ alias ddev='pub run dart_dev'\n```\n\nwhich turns the previous command into:\n\n```bash\n$ ddev format\n```\n\n### Building the Application\n\nNow that we have an understanding of the language/tools we're working with, let's start creating the application! We will be utilizing some of Workiva's OSS.\n\n#### [OverReact](https://workiva.github.io/over_react/)\n\nOverReact is a library for building statically-typed React UI components. Since OverReact is built on top of React JS, I strongly encourage you to gain familiarity with React first if you're not by reading [this tutorial](https://reactjs.org/docs/hello-world.html). The example below compares a `render()` function for JSX and OverReact that will have the exact same HTML markup result.\n\n- **React JS** (JSX):\n\n  ```jsx\n  render() {\n    return \u003cdiv className=\"container\"\u003e\n      \u003ch1\u003eClick the button!\u003c/h1\u003e\n      \u003cbutton\n        id=\"main_button\"\n        onClick={_handleClick}\n      \u003eClick me\u003c/button\u003e\n    \u003c/div\u003e;\n  }\n  ```\n\n- **OverReact** (Dart):\n\n  ```dart\n  render() {\n    return (Dom.div()..className = 'container')(\n      Dom.h1()('Click the button!'),\n      (Dom.button()\n        ..id = 'main_button'\n        ..onClick = _handleClick\n      )('Click me')\n    );\n  }\n  ```\n\nOverReact helps bridge the gap between Dart and React. If you're using VS Code, you can utilize [OverReact code snippets](https://github.com/JaceHensley/vscode-over-react-snippets) to help speed up your development. Now, let's talk about our front-end architecture.\n\n#### [w_flux](https://github.com/Workiva/w_flux)\n\nw_flux is an architecture library with uni-directional data flow that provides an MVC like architecture and works well with React UI components.\n\n![w_flux Diagram](http://i.imgur.com/ISwUu51.jpg)\n\nThis library was inspired by [RefluxJS](https://github.com/reflux/refluxjs) and Facebook's [Flux](https://facebook.github.io/flux/). The same general principles apply here. For more information, please read the [README](https://github.com/Workiva/w_flux) in the w_flux repository.\n\n#### Defining Dependencies\n\nAs previously mentioned, we'll use the `pubspec.yaml` file in our root directory to define the dependencies for our project. Let's take a look at the `pubspec.yaml` for the todo list.\n\n**pubspec.yaml**\n\n```yaml\nname: todo_dart_react\nversion: 2.0.0\ndescription: Dart + React Todo List Example\nhomepage: https://github.com/leerob/dart-react-todo\nauthor: Lee Robinson \u003cme@leerob.io\u003e\n\nenvironment:\n  sdk: \"\u003e=2.5.0 \u003c3.0.0\"\n\ndependencies:\n  over_react: ^2.5.2\n  w_flux: ^2.10.3\n  react: ^4.9.1\n\ndev_dependencies:\n  build_runner: ^1.7.0\n  build_test: ^0.10.8\n  build_web_compilers: ^2.4.0\n  dart_dev: ^2.2.0\n  dart_style: ^1.2.9\n  over_react_test: ^2.5.1\n  test: ^1.6.10\n```\n\nThis file tells `pub` which versions of the included packages it needs to retrieve. You can find more information about what all can be included in this file [here](https://dart.dev/tools/pub/pubspec).\n\n#### /web/\n\nInside the `web` directory, we'll find the entry point into our application. This file sets up the `Actions` and `Store` for our Flux architecture. Then, it creates a new `TodoApp` component and renders it into our container.\n\n**main.dart**\n\n```dart\nimport 'dart:html';\n\nimport 'package:over_react/over_react.dart';\nimport 'package:over_react/react_dom.dart' as react_dom;\n\nimport 'package:todo_dart_react/todo_dart_react.dart';\n\nvoid main() {\n  setClientConfiguration();\n\n  TodoActions actions = TodoActions();\n  TodoStore store = TodoStore(actions);\n\n  var todoApp = (TodoApp()\n    ..actions = actions\n    ..store = store)();\n\n  final container = querySelector('#app-container');\n  react_dom.render(todoApp, container);\n}\n```\n\nThe container previously mentioned is the DOM node with an `id` attribute value of `app-container` as shown below. You'll notice I've included [Bootstrap](https://getbootstrap.com/) to handle the styling our of UI components.\n\n**index.html**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge, chrome=1\" /\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0\"\n    /\u003e\n\n    \u003ctitle\u003eDart React Todo\u003c/title\u003e\n    \u003clink rel=\"icon\" href=\"favicon.ico\" type=\"image/x-icon\" /\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css\"\n    /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app-container\" class=\"container\"\u003e\u003c/div\u003e\n\n    \u003cscript src=\"/packages/react/react.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/packages/react/react_dom.js\"\u003e\u003c/script\u003e\n    \u003cscript defer src=\"main.dart.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### /lib/src/\n\nLet's take a look at `actions.dart`. This file defines the available operations we can perform.\n\n**actions.dart**\n\n```dart\nclass TodoActions {\n  final Action\u003cTodo\u003e addTodo = new Action\u003cTodo\u003e();\n  final Action\u003cTodo\u003e deleteTodo = new Action\u003cTodo\u003e();\n  final Action\u003cTodo\u003e completeTodo = new Action\u003cTodo\u003e();\n  final Action clearTodoList = new Action();\n}\n```\n\nYou'll notice some actions take a `Todo` parameter. Let's define the structure of our `Todo` model.\n\n**todo.dart**\n\n```dart\nclass Todo {\n  String content;\n  bool completed = false;\n\n  Todo(this.content);\n}\n```\n\nEach `Todo` object can be initialized with some content and has a completed state which is initially `false`.\n\n#### /stores/\n\nWe now have some actions to dispatch. Next, we need a store to contain our application's data. For this example, we only need one store. **Note**: For larger applications, you will generally have multiple stores. Review the w_flux [README](https://github.com/Workiva/w_flux) for more information.\n\n**todo_store.dart**\n\n```dart\nclass TodoStore extends Store {\n  TodoStore(TodoActions actions) : _actions = actions {\n    _todos = [\n      new Todo('Learn Dart'),\n      new Todo('Learn React'),\n      new Todo('????'),\n      new Todo('Profit!')\n    ];\n\n    triggerOnAction(_actions.addTodo, (todo) =\u003e _todos.add(todo));\n    triggerOnAction(_actions.completeTodo, (todo) =\u003e todo.completed = true);\n    triggerOnAction(_actions.deleteTodo, (todo) =\u003e _todos.remove(todo));\n    triggerOnAction(_actions.clearTodoList, (_) =\u003e _todos = []);\n  }\n\n  final TodoActions _actions;\n\n  List\u003cTodo\u003e _todos = [];\n  List\u003cTodo\u003e get todos =\u003e _todos;\n}\n```\n\nWhen our `TodoStore` is constructed, it populates our todo list with some pre-defined `Todo` objects. It also connects our actions to the store using `triggerOnAction()`. This function will re-render all components that are watching the store after the action has completed. You'll also notice we have a public getter to obtain the list of todos.\n\nTo summarize so far, we have:\n\n- Initialized an entry point into the application\n- Defined actions for the todo list\n- Created a data model for a Todo item\n- Set up a store to contain the application's data\n\n#### /views/\n\nThe final piece will be the OverReact UI components to display the store's data. We defined a top-level `TodoApp` component in `main.dart`. This is what we refer to as a [\"container\"](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) component. It subscribes to our store and dispatches actions. It does _not_ handle displaying UI components.\n\n**todo_app.dart**\n\n```dart\n@Factory()\nUiFactory\u003cTodoAppProps\u003e TodoApp = _$TodoApp;\n\n@Props()\nclass _$TodoAppProps extends FluxUiProps\u003cTodoActions, TodoStore\u003e {}\n\n@Component()\nclass TodoAppComponent extends FluxUiComponent\u003cTodoAppProps\u003e {\n  @override\n  render() {\n    return (TodoList()\n      ..addTodo = props.actions.addTodo\n      ..deleteTodo = props.actions.deleteTodo\n      ..todos = props.store.todos)();\n  }\n}\n```\n\n**Note:** If the structure of this component is confusing, please review the [anatomy of an OverReact component.](https://github.com/Workiva/over_react#anatomy-of-an-overreact-component)\n\nThe `TodoList` component is a \"presentational\" component. It has no knowledge of any stores/actions and simply renders the data passed along as props and uses [callbacks](https://redux.js.org/docs/basics/UsageWithReact.html#presentational-and-container-components) to communicate with the store. Let's take a look at the `renderListItems()` function of the `TodoList` component.\n\n**todo_list.dart**\n\n```dart\n/// Create a new [TodoListItem] for each todo.\nList _renderListItems() {\n  List items = [];\n\n  for (Todo todo in props.todos) {\n    items.add(\n      (TodoListItem()\n        ..key = todo.content\n        ..todo = todo\n        ..deleteTodo = props.deleteTodo)(),\n    );\n  }\n\n  return items;\n}\n```\n\nBased on the todo data passed in as props, this function creates a new list of `TodoListItem` components to be rendered. Those components will render as follows:\n\n**todo_list_item.dart**\n\n```dart\nrender() {\n  return ListGroupItem()(\n    (Dom.input()\n      ..className = 'mr-3'\n      ..type = 'checkbox')(),\n    Dom.span()(\n      props.todo.content,\n    ),\n    (Button()\n      ..addTestId('deleteTodo')\n      ..className = 'float-right'\n      ..skin = ButtonSkin.DANGER\n      ..onClick = ((event) =\u003e props.deleteTodo(props.todo)))(\n      'Delete',\n    ),\n  );\n}\n```\n\nThe `ListGroupItem` component is taken from the [OverReact examples](https://github.com/Workiva/over_react/blob/master/web/src/demo_components/list_group_item.dart). It models the [list group component](https://getbootstrap.com/docs/4.3/components/list-group/) from Bootstrap. You can find more OverReact example components located in [`lib/src/todo_dart_react/components`](https://github.com/leerob/dart-react-todo/tree/master/lib/src/todo_dart_react/components). \n\nYou'll notice we've added a test ID to the `Button` component using `..addTestId()`. Let's talk about how we can unit test this component.\n\n### Testing\n\nAll of the test files are located in the `test/` directory. For this example, I've only created unit tests. You could also create integration and functional tests here as well. Testing OverReact components is simple using [over_react_test](https://github.com/Workiva/over_react_test). Let's look at how we can test our `TodoListItem` component to check it properly calls `deleteTodo` when the button is clicked.\n\n**todo_list_item_test.dart**\n\n```dart\ntest('calls deleteTodo when button is clicked', () {\n  bool called = false;\n  Todo todo = Todo('Testing!');\n  void handler(_) {\n    called = true;\n  }\n\n  // A TestJacket is returned from `mount`. \n  // The jacket instance exposes everything you might need to \n  // access things like the component's props, the DOM node it renders, the component instance itself, etc.\n  TestJacket\u003cTodoListItemComponent\u003e jacket = mount(TodoListItem()\n    ..deleteTodo = handler\n    ..todo = todo);\n\n  final deleteButtonNode = queryByTestId(jacket.getInstance(), 'deleteTodo');\n  click(deleteButtonNode);\n  expect(called, isTrue);\n});\n```\n\nThis test creates a new handler for deleting a todo and passes it to the `TodoListItem` when rendering. Then, we can retrieve the delete button from the DOM of the rendered instance and simulate clicking the button. Finally, we can expect that the handler was successfully called.\n\n**Note:** We don't need to test what happens _when_ a todo is deleted here. For [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns), we should unit test that it is successfully removed from the store in `todo_store_test.dart`.\n\nWe can now run all unit tests using the following command:\n\n```bash\n$ pub run build_runner test\n```\n\n### Continuous Integration\n\nContinuous Integration (CI) is the process of automating the building and testing of your code every time you commit changes to GitHub. We can utilize [Travis CI](https://travis-ci.org/) to easily perform static analysis, check formatting, run unit tests, and generate code coverage using a `.travis.yml` file. You don't need to worry about configuring this file - it's already all set up and running in this repository. If you fork this repo to create your own application, you will need to sync Travis CI with your GitHub account to trigger builds when you commit changes.\n\n### Deploying\n\nWhen you're ready to compile your code to JS, we can use `pub run build_runner build -r`. \nThe `-r` flag stands for \"release\" - and uses `dart2js` to compile Dart into a single JS bundle. \n\n`dart2js` will automatically remove any dead code or unused libraries. By default, the\ncompiled code is output to `.dart_tool/build/generated/todo_dart_react/web/main.dart.js`.\n\n```bash\n$ pub run build_runner build -r\n```\n\n#### Netlify\n\n[Netlify](https://www.netlify.com) makes it extremely easy to deploy your compiled code. You can create an account for free and have the ability to upgrade to utilize features like custom domain names, SSL, and more. Let's look at how we can deploy our todo application from the command line.\n\n**Note**: This will create a `.netlify` file which you might want to commit for your application.\n\n```bash\n$ npm install netlify-cli -g\n$ pub run build_runner build\n$ netlify deploy\n? No site id specified, create a new site Yes\n? Path to deploy? (current dir) build/web/\nDeploying folder: build/web/\n\nDeploy is live (permalink):\n  http://5a11de44a6188f59f422296f.goofy-colden-2480f1.netlify.com\n\nLast build is always accessible on http://goofy-colden-2480f1.netlify.com\n```\n\nThat's it! 🎉 We can modify the settings for our site on Netlify to change the site name. You can view the deployed todo app at https://dart-react-todo.netlify.com/.\n\n### Your Turn\n\nThe todo list isn't fully completed per our requirements. To fully finish the application, you'll need to:\n\n- [ ] Mark todos as completed when the checkbox is clicked\n- [ ] Add an action for clearing all completed todos\n- [ ] Modify the `TodoStore` to listen to the new action\n- [ ] Create the `TodoFooter` component\n- [ ] Hook up the buttons in the footer to the store\n- [ ] Use icons inside the buttons\n\n### Additional Resources\n\n- [Getting the most out of React in Dart](https://www.youtube.com/watch?v=ekBD-_jRjds)\n- [Intro to Dart for Java Developers](https://codelabs.developers.google.com/codelabs/from-java-to-dart/index.html#0)\n- [Language Tour](https://dart.dev/guides/language/language-tour)\n- [Library Tour](https://dart.dev/guides/libraries/library-tour)\n- [Effective Dart](https://dart.dev/guides/language/effective-dart)\n- [Futures Tutorial](https://dart.dev/codelabs/async-await)\n- [Streams Tutorial](https://dart.dev/tutorials/language/streams)\n- [Dart by Example](http://jpryan.me/dartbyexample/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleerob%2Fdart-react-todo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleerob%2Fdart-react-todo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleerob%2Fdart-react-todo/lists"}