dartlang

dartlang logo

A Dart plugin for Atom.

dartlang is a full-featured Dart development plugin for Atom. It supports features like auto-discovery of the Dart SDK, displaying errors and warnings as you type, code completion, refactoring capabilities, and integration with Pub and other tools.

Install

Installing

The plugin should auto-detect the Dart SDK location. If not, you can set it manually in the plugin configuration page (Preferences > Packages > dartlang).

Packages we recommend

synced-sidebar - this package synchronises the selection in the file view with the active text editor.

Packages to avoid

We do not recommend using both emmet and the dartlang package together. Editing large .dart files will be slow if you have emmet installed. You can track the issue here.

Getting Started

Using commands

Much of Atom’s functionality is surfaced via named commands. You can see all the available commands by hitting shift-cmd-p / ctrl-shift-p. You can execute a command directly by searching for it and selecting it in the command palette. Many commands can also be accessed using associated key bindings.

Setting up and configuring

To open the settings for Atom, hit cmd-, / ctrl-, or select the Atom > Preferences… menu item. From here you can configure general text editor settings, customize key bindings, customize the theme and look of Atom, and adjust settings for various Atom packages, including the dartlang package.

The dartlang plugin will attempt to auto-locate the Dart SDK. If it fails, you can adjust your operating system’s PATH settings and manually run the SDK auto-locate command ('auto locate sdk'). Or, you can configure the SDK’s path in dartlang settings section.

In addition, the autocomplete-plus plugin has settings that are useful to customize. This plugin controls the UI of the code completion popup. From its preference page you can control how frequently autocomplete comes up, which keys invoke it, and which keys choose from selections.

Another good setting to toggle is the tabs plugin’s Use Preview Tabs setting. If you check that setting, files first open in a preview mode. Their tab will get re-used by the next file to open, unless you make an edit in the file. This is a super handy option to let you explore a source base without getting a proliferation of open tabs.

Opening Dart projects

To open a project, use the 'add project folder' command, or select the File > Add Project Folder… menu item. When a project is added to Atom, the dartlang plugin will recursively scan through the project, two directory levels deep, looking for Dart projects. These are directories with pubspec.yaml or .packages files.

When there are any Dart projects open in Atom, the dartlang plugin will automatically start the Dart analysis server. This is an external process that provides functionality like analyzing code for errors and warnings, providing code completion information, and various code searching and refactoring tools. This process is automatically managed by the dartlang plugin.

If the plugin is not able to identify your Dart projects, you can manually tell it to treat a directory as a Dart project. Right click on the top-level directory and choose the Mark as a Dart Project option, or run the Atom command 'mark as dart project'. This will create an .analysis_options file in the directory; the dartlang plugin will use that as a hint to treat the directory as a Dart project, even without a pubspec.yaml or .packages file present.

Opening Dart files

Currently, opening individual Dart files - so that their containing directory is not open in Atom - is not well supported. You will get some Dart specific functionality, like syntax highlighting, but you will not get much of the rest of it, including things like errors and warnings, hyper-link navigation, and code completion. We’re investigating ways to better support opening individual Dart files in Atom; stay tuned.

Working with Dart projects

There are various tools and commands available to help you work with Dart projects. The various pub commands are available as context menu items in the files view. The commands are also available from the command palette (shift-cmd-p / ctrl-shift-p). So, to run pub get on a project, select the pubspec.yaml file in the files view, right click, and select the Pub Get menu item. Alternatively, whenever a Dart file is open, you can run the pub get Atom command, and pub will be run for the associated Dart project.

Other Pub commands which are available are pub activate, to install various Dart tools. pub global run, which lets you execute a previously installed pub application. And pub run, which lets you execute a pub app installed locally to that project (referenced from the pubspec).

Working with code

The dartlang plugin shows errors and warnings in your code as you type. These are displayed in a problems view at the bottom of Atom, in-line in the code, and in a summary in the status line.

You can toggle the problems view on and off by clicking on the status line summary, or by configuring it in the settings page.

Clicking on an issue in the problems view will take you to that source code with the problem. For some issues, the plugin can provide automated fixes - so called ‘quick fixes’. When at a source location with errors, hit ctrl-1; if there are any available fixes a menu with available options will be shown.

When looking at source code, you can get more information about a class, method, or variable by placing the cursor on that symbol and hitting F1. The dartdoc information for that element will be displayed.

Command or option-clicking on an element will jump to its definition. To jump back, hit cmd-option-up (or ctrl-alt-up).

You can toggle on and off a structural outline view of the current Dart file by executing the command 'toggle outline view'.

In order to find all the places where an element is referenced, right click on that element and select the menu item Find References. You can also use the key binding ctrl-f4. The results will be displayed in a view on the right; clicking on a result will jump to the associated source location. The results view can be closed via the close button (or by hitting the escape key twice).

To view the type hierarchy of a class, hit F4 or right click on the class and choose Type Hierarchy.

In order to toggle the errors view on and off, you can click on the error summary in the status line (normally showing no errors).

Refactorings and code modifications

In addition to quick fixes, the plugin can also perform some automated code transformations. These include a rename refactoring, available from the context menu or via option-shift-r / alt-shift-r. Also, the plugin has the ability to automatically organize import directives, available by the 'organize directives' command or option-cmd-o / ctrl-alt-o. Additionally, you can format a Dart source code using the 'dart format' command or the option-cmd-b / ctrl-alt-b key binding.

Diagnosing analysis server issues

To view detailed info about what the analysis server is doing, run the 'analysis server status' command. This will let you know if the analysis server is currently running, allow you to terminate and restart the server, and let you re-analyze the Dart source for the current projects.

This status dialog can be useful for diagnosing issues with the analysis server, like analysis not terminating, or excessive CPU or memory consumption.

For developers working on the plugin itself, or trying to resolve analysis server issues, you can enable a setting to start the analysis server with debug flags. This will expose some additional options in the analysis server status dialog; only a very small number of developers should need to enable this setting.

Flutter

What is Flutter?

Flutter is a new project to help developers build high-performance, high-fidelity, cross-platform mobile apps.

The dartlang plugin currently contains functionality related to creating and running Flutter projects. We plan to move that out into a separate plugin in the future.

Getting Flutter

See the Flutter getting started guide for how to get set up. In a nutshell, you’ll need to:

  • clone the Flutter git repository
  • add the flutter/bin directory to your OS path

In Atom, install the flutter plugin (Packages > Settings View > Install Packages). In the flutter plugin’s preferences page, set the Flutter SDK path to where the Flutter repo was cloned locally.

Creating Flutter projects

In order to create a Flutter project, run the Flutter 'create project' Atom command. This will create a new Dart project with a dependency on the flutter package. It’ll also create the entry-point to the Flutter app, lib/main.dart. That file should look something like this:

import 'package:flutter/material.dart';

void main() {
  runApp(
    new MaterialApp(
      title: "Flutter Demo",
      routes: {
        '/': (RouteArguments args) => new FlutterDemo()
      }
    )
  );
}

class FlutterDemo extends StatelessComponent {
  Widget build(BuildContext context) {
    return new Scaffold(
      toolBar: new ToolBar(
        center: new Text("Flutter Demo")
      ),
      body: new Material(
        child: new Center(
          child: new Text("Hello world!")
        )
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(
          icon: 'content/add'
        )
      )
    );
  }
}

Setting up your mobile device

In order to run a Flutter app, you’ll need the Android adb tool installed, an Android device connected via USB, and to have your mobile device in developer mode. See this page for more details about setting up your Android device.

Running a Flutter project

Once your device is set up, execute the 'run application' command. This will launch your app on the device. If your phone does not have the Flutter APK on it, one will be automatically installed. You should see your app running on the device:

The Atom plugin uses the flutter command installed with the flutter package to launch your app. You can run this tool by hand as well. Try making a change to the application’s source, and then from the command-line, run:

flutter run

You should see the app re-launch on the mobile device with the new changes. Run:

flutter -h

in order to see a list of other available commands.

More info!

For information about using Flutter to build apps, please see Getting Started with Flutter.

Feedback

Feedback welcome! You can file bugs and feature requests at github.com/dart-atom/dartlang/issues.

The source code for this plugin can be found at github.com/dart-atom/dartlang.