Build a web app with Dart
This page describes the steps to start developing web-only apps with Dart. If you want to write a multi-platform app, then try Flutter.
Before you begin, ensure you're comfortable with Dart basics by reading the Introduction to Dart. Then follow the steps below to create a small web app with Dart.
1. Install Dart
#To develop real apps, you need an SDK. You can either download the Dart SDK directly (as described below) or download the Flutter SDK, which includes the full Dart SDK.
Use Chocolatey to install a stable release of the Dart SDK.
To install the Dart SDK:
C:\> choco install dart-sdk
You can use APT to install the Dart SDK on Linux.
-
Perform the following one-time setup:
$ sudo apt-get update $ sudo apt-get install apt-transport-https $ wget -qO- https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/dart.gpg $ echo 'deb [signed-by=/usr/share/keyrings/dart.gpg arch=amd64] https://storage.googleapis.com/download.dartlang.org/linux/debian stable main' | sudo tee /etc/apt/sources.list.d/dart_stable.list
-
Install the Dart SDK:
$ sudo apt-get update $ sudo apt-get install dart
With Homebrew, installing Dart is easy.
$ brew tap dart-lang/dart
$ brew install dart
2. Get CLI tools or an IDE (or both)
#terminal
If you like to use the command line, install the webdev
package:
$ dart pub global activate webdev
web Although using an IDE is optional, we highly recommend using one. For a list of available IDEs, see the overview of editors & debuggers.
3. Create a web app
#terminal
To create a web app from the command line,
use the dart create
command with the web
template:
$ dart create -t web quickstart
web To create the same web app from an IDE that has Dart integration, create a project using the template named Bare-bones Web App.
The web app template imports package:web
, Dart's powerful and concise web
interop solution built for the modern web. To learn more about it, check out the
web interop overview.
4. Run the app
#terminal
To run the app from the command line,
use webdev
to build and serve the app:
$ cd quickstart
$ webdev serve
web Or run the app from your IDE.
To view your app, use the Chrome browser
to visit the app's URL—for example,
localhost:8080
.
Whether you use an IDE or the command line,
webdev serve
builds and serves your app
using the development JavaScript compiler.
Startup is slowest the first time the
development compiler builds and serves your app.
After that, assets are cached on disk and incremental builds are much faster.
Once your app has compiled, the browser should display "Your Dart app is running."
5. Add custom code to the app
#Let's customize the app you just created.
-
Copy the
thingsTodo()
function from the following snippet to theweb/main.dart
file:dartIterable<String> thingsTodo() sync* { const actions = ['Walk', 'Wash', 'Feed']; const pets = ['cats', 'dogs']; for (final action in actions) { for (final pet in pets) { if (pet != 'cats' || action == 'Feed') { yield '$action the $pet'; } } } }
-
Add the
newLI()
function (as shown below). It creates a newLIElement
containing the specifiedString
.dartIterable<String> thingsTodo() sync* { /* ... */ } HTMLLIElement newLI(String itemText) => (document.createElement('li') as HTMLLIElement)..text = itemText; void main() { /* ... */ }
-
In the
main()
function, append content to theoutput
element usingappendChild
and the values fromthingsTodo()
:dartIterable<String> thingsTodo() sync* { /* ... */ } HTMLLIElement newLI(String itemText) => (document.createElement('li') as HTMLLIElement)..text = itemText; void main() { final output = querySelector('#output'); for (final item in thingsTodo()) { output?.appendChild(newLI(item)); } }
-
Save your changes.
-
The
webdev
tool automatically rebuilds your app. Refresh the app's browser window. Now your simple Dart app has a todo list! It should look something like this:
-
Optionally, improve the formatting by editing
web/styles.css
, then reload the app to check your changes.css#output { padding: 20px; text-align: left; }
6. Use Dart DevTools to inspect the app
#Use Dart DevTools to set breakpoints, view values and types, and step through your app's Dart code. For setup details and a walkthrough, see Debugging Dart Web Apps.
7. Build and deploy your web app
#To run your web app outside your development environment, you'll need to build and deploy it. To learn more about deploying Dart web apps, check out Web deployment.
What next?
#Check out these resources:
- Dart language, libraries, and conventions
- Web development
- Dart tutorials
除非另有说明,文档之所提及适用于 Dart 3.5.0 版本,本页面最后更新时间: 2024-09-22。 查看文档源码 或者 报告页面问题。