Flutter In Visual Studio

VS Code extension to create a binding between your translations from .arb files and your Flutter app. It generates boilerplate code for official Dart Intl library and adds auto-complete for keys in Dart code.

The assets subsection of the flutter section specifies files that should be included with the app. Each asset is identified by an explicit path (relative to the pubspec.yaml file) where the asset file is located. The order in which the assets are declared doesn’t matter. Type “flutter” in the extensions search field, select Flutter in the list, and click Install. This also installs the required Dart plugin. Validate your setup with the Flutter Doctor Invoke View Command Palette. Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. Re-open your Visual Studio Code; Press Ctrl + Shift + P; Type flutter and choose Flutter: New Application Project; Type your project name (e.g: flutterapplication1) Select a folder to create the project in; If you want to change your flutter sdk location. Go to Visual Studio Code. The keytool command might not be in your path—it’s part of Java, which is installed as part of Android Studio. For the concrete path, run flutter doctor -v and locate the path printed after ‘Java binary at:’. Then use that fully qualified path replacing java (at the end) with keytool.

Visual

This plugin is also available for IntelliJ / Android Studio.

CLI tool intl_utils can be used for manual invocation or in CI/CD systems.

Star us on GitHub, and follow us on Twitter

Getting started

1. Install the VS Code extension

Install from the Visual Studio Code Marketplace or by searching within VS Code.

2. Initialize extension for your project

Open your project, open the command palette and find the Flutter Intl: Initialize command.

By default en locale is added by auto-creating a file lib/l10n/intl_en.arb.

NOTE: By default the extension generates and maintains files inside lib/generated/ folder which you should not edit manually. But you should keep these files in your project repository.

3. Setup your app

Add dependency needed for localization:

Setup your localizationsDelegates and your supportedLocales which will allow to access the strings.

Additional set up for iOS apps:

To enable localization for iOS apps, extend ios/Runner/Info.plist file with supported locales configuration.This list should be consistent with the locales listed in the lib/l10n folder.

Current locale can be changed programmatically using S.load method and passing the locale:

Access to the current locale:

4. Add other locales

You probably want to localize you Flutter app into more than one locale.

You can add more locales with command Flutter Intl: Add locale.

5. Add keys to main ARB file

ARB files extension stands for Application Resource Bundle and is used by the Dart Intl package. It's supported by Google and is official localization library for Dart.

Flutter

File content example:

In the example above we have 5 keys:

  • pageHomeConfirm - A very simple key
  • pageHomeWelcome - A key which translation contains a placeholder name
  • pageHomeWelcomeGender - A gender key whose translation depends on a placeholder gender. Genders are formatted in ICU format.
  • pageHomeWelcomeRole - A select key whose translation depends on a placeholder role. Selects are formatted in ICU format.
  • pageNotificationsCount - A plural key whose translation depends on a placeholder howMany. Plurals are formatted in ICU format.

Your main ARB file by default is lib/l10n/intl_en.arb. When you add new key-value pairs in it and save the file, those keys will be automatically available for auto-complete in your Dart code.

6. Reference the keys in Dart code

The ARB file's keys now correspond to methods from the S class. For example:

In case keys have defined placeholders, or their translation is in Plural, Gender or Select ICU format, you can reference them in your code in a following way:

By default the extension recognizes placeholders order by how they are defined in the main ARB file for that key. If you want to redefine the order of placeholders for usage from Dart code, you can do that by adding meta info for the key:

In this case you will use given key in your Dart code by passing first name as the first parameter, and then last name as a second parameter:

In order to format a number or date & time, you need to format the value in Dart code and pass the formatted string value to translation string key getter.

Commands

The extension provides several commands for working with Flutter localization.You can access all of the below commands from the Command Palette (Cmd+Shift+P or Ctrl+Shift+P).

Flutter Intl: Initialize

Creates the inital binding between translations from .arb files and your Flutter app.The command will create a default locale en, the locale that will be used for auto-complete support for keys in Dart code.

The following file will be created:

Additionally this command will update pubspec.yaml file with plugin config which you can change manually later:

Flutter Intl: Add locale

Adds another locale to your Flutter app.The command will ask you for a new locale.

The following file will be created:

Flutter Intl: Remove locale

Removes an existing locale from your Flutter app.The command will ask you to pick a locale from the list of existing locales.

The following file will be removed:

Editor actions

Visual

Extract to ARB files

Extract string to ARB files using code actions. The dialog will ask you to enter the string key, which will be extracted to ARB files together with the selected content.

Configuration options

Plugin reads its configuration from project's pubspec.yaml file.Here is a full configuration for the plugin:

Example

The complete Flutter project example can be found here.

Reporting Issues

How To Use Flutter In Visual Studio

Issues should be reported in the Flutter Intl issue tracker.

Visual Studio Code offer great experience in text editor just like IDE. Flutter is the next generation easy app development framework for mobile apps (Android and iOS), desktop app, and web apps. Here some extension in Visual Studio Code that is useful for cross platform application development with Flutter Framework. This pack include extensions, git tools, todo list tools, recommended selection of themes and icons, and some utilities..You can select or disable some extension in this pack, so it can run as depend on your needs.

Extension Included In This Pack

Here are some useful extension included in this packs :

  • Auto-Open Markdown Preview - Open Markdown preview automatically when opening a Markdown file.
  • Awesome Flutter Snippets - Awesome Flutter Snippets is a collection snippets and shortcuts for commonly used Flutter functions and classes.
  • Better Comments - Improve your code commenting by annotating with alert, informational, TODOs, and more!
  • BLOC - Support for the bloc library and provides tools for effectively creating blocs for both Flutter and AngularDart apps.
  • Bracket Pair Colorizer 2 - A customizable extension for colorizing matching brackets.
  • carbon-now-sh - A Code package to open the current editor content in carbon.now.sh .
  • Change Case - Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word.
  • CodeSnap - Take beautiful screenshots of your code.
  • Dart - Dart language support and debugger for Visual Studio Code.
  • EditorConfig for VS Code - EditorConfig Support for Visual Studio Code.
  • Error Lens - Improve highlighting of errors, warnings and other language diagnostics.
  • Flutter - Flutter support and debugger for Visual Studio Code.
  • Flutter Files - Quickly scaffold flutter bloc file templates.
  • Flutter Helpers - This extension currently helps you to easily write JSONSerializable annotated classes and allows you to run code generation for those classes. You can also watch the files so that code generation is faster.
  • Flutter Tree - Extension for Flutter to build basic widget tree.
  • Flutter Widget Snippets - A set of helpful widget snippets for day to day Flutter development.
  • gi - Generating .gitignore files made easy.
  • Git History - View git log, file history, compare branches or commits.
  • GitLens Git supercharged - Supercharge the Git capabilities built into Visual Studio Code .Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
  • Git Graph - View a Git Graph of your repository, and perform Git actions from the graph.
  • GitHub Pull Requests - Pull Request Provider for GitHub.
  • Highlight Matching Tag - Highlights matching closing or opening tag.
  • indent-rainbow - Makes indentation easier to read.
  • Jumpy - Jumpy provides fast cursor movement, inspired by Atom's package of the same name.
  • Live Share - Real-time collaborative development from the comfort of your favorite tools.
  • Markdown All in One - All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more).
  • Markdown Preview Enhanced - Markdown Preview Enhanced ported to vscode.
  • markdownlint - Markdown linting and style checking for Visual Studio Code.
  • Material Icon Theme - Material Design Icons for Visual Studio Code.
  • Mayukai Theme - Dark theme based on Ayu Theme, Andromeda Theme, Monokai, and some Material Colors.
  • MetaGo - vscode cursor move and select; jump, navigation, goto, acejump.
  • Multiple clipboards for VSCode - Override the regular Copy and Cut commands to keep selections in a clipboard ring.
  • Polacode - Polaroid for your code.
  • Pubspec Assist - Easily add dependencies to your Dart / Flutter project.
  • Pubspec Dependency Search - Easy search dependency name in dart packages site for flutter developers.
  • REST Client - REST Client for Visual Studio Code.
  • Settings Sync - Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
  • Trailing Spaces - Highlight trailing spaces and delete them in a flash.
  • TODO Highlight - Highlight TODOs, FIXMEs, and any keywords, annotations.
  • TODO List - List all action comments (TODO, FIXME, HACK etc) in an easy-to-read list.
  • Todo+ - Manage todo lists with ease. Powerful, easy to use and customizable.
  • Visual Studio IntelliCode - AI-assisted development.
  • VS Code Flutter i18n JSON - VS Code extension to create a binding between your translations from .json files and your Flutter app.
  • VSCode-Faker - Generate fake data for name, address, lorem ipsum, commerce and much more.
  • Waka Time - Metrics, insights, and time tracking automatically generated from your programming activity. Not installed by default.

For more information

Waka Time included in this extension pack. If you want to use Waka Time, you need free register in their website, and put API Key that needed in Waka Time Extension. You can read more details at their developer page.

Extension in this pack will be updated, added, or reduced, if future development for those extensions changed. If you don't like some extension in this extension pack, you can just disabling that extension in Extensions Menu, select extension you want to disabled, click Gear Icon, and choose Disable.

You can review what is changed every release by looking at Changelog File.

Flutter Visual Studio Code Shortcuts

If you failed to install or update this extension pack. Try removing it first by uninstall this extension pack or remove all extension from your VS Code. And then try reinstalling this extension pack again. Don't forget to use reliable internet connection too.

Flutter On Vs Code

Enjoy The Packs!