* * * * * * * * * * * * * * * * * * * * * * * * * * * * *

In this article I will give you some tips on how to develop a Flutter project using Visual Studio Code. The abbreviations used for the content mentioned below are VSCode and AS. In this article, VSCode stands for Visual Studio Code and AS stands for Android Studio. This article is divided into three parts, the first part is the VSCode plug-in; The second part is the VSCode shortcut; The third part is the reference study website.

First, VSCode plug-in

1. TODO Highlight

// TODO: Follow up... // FIXME: To be fixed...Copy the code

2. Better Comments

Second, VSCode shortcut keys

1. Operation project shortcut keys

1.1 command + shift + p

Command + Shift + P: You can create projects or view plug-ins

1.2 Running shortcut keys related to the project
Flutter Run: Runs the flutter run of the current connected device-dDevice ID: after the specified device has run an item: q: stops running r: hot reload CMD + K: clears information about the terminal output. Flutter Clean: clears the cache. Flutter - version: To check the version Flutter Flutter 1.17.1, channel stable, https://github.com/flutter/flutter.git Framework, revision f7a6a7906b • 2020-05-12 18:39:00-0700 Engine • 6BC433C6B6 Tools • Dart 2.8.2Copy the code
Run Xcode build... └ ─ the Compiling, linking and signing... 22.9s Xcode build done. 61.0s Syncing Files to device iPhone SE (2nd Generation)... 305ms Flutter run key commands. R Hot reload. 🔥🔥🔥 r Hot restart. h Repeat thishelp message.
d Detach (terminate "flutter run"but leave application running). c Clear the screen q Quit (terminate the application on the device). An Observatory The debugger and profiler on iPhone SE (2 nd generation) is available at: http://127.0.0.1:61644/jB_NLEwxmYA=/Copy the code
1.3 Develop and debug related shortcut keys
CMD + left mouse button: Go to a class or method. Select a class or method and hold down the Option key. View the constructor of the class or parameters required by the methodThe '-'Fn + F5: Start debuggingprint(): debugging output debugprint() : debugging outputCopy the code

2. Flutter code block

Code block shortcut key

StatelessW statefulW build, etcCopy the code

The relevant code block implementation is provided by the official Awesome Flutter Snippets. For more code block shortcuts, search Awesome Flutter Snippets for details.

2.1 statelessW
class name extends StatelessWidget {
  const name({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    returnContainer( child: child, ); }}Copy the code
2.2 StatelessWidget
import 'package:flutter/material.dart';

StatelessWidget
Copy the code
2.3 statefulW

class name extends StatefulWidget {
  name({Key key}) : super(key: key);

  @override
  _nameState createState() => _nameState();
}

class _nameState extends State<name> {
  @override
  Widget build(BuildContext context) {
    returnContainer( child: child, ); }}Copy the code
2.4 build
@override
  Widget build(BuildContext context) {
    return ;
  }
Copy the code

Plug-ins that appear when searching for Ext: Dart.

3. Flutter edit code shortcut keys

shift+ Control + R: You can perform operations on a Widget, such as wrapping a Widget. Option + up ↑/ Down ↓ : The current line of code can be exchanged with the previous line of code or the next line of codecommand + shift+ P ': You can create projects or view plug-ins CMD +shift+ y/ CMD + j: call up the console CMD + option + r: select the project folder showinFinder Open. : You can open multiple terminals, open the current project's folder CMD +shiftControl + g To go to a line CMD + K + 0 (digit 0) : to fold up the code CMD + k + j: to expand the codeCopy the code

Third, refer to the learning website

  • Flutter — IDE Shortcuts for Faster Development
  • Shortcuts commonly used in Flutter development
  • Sharpening knives without mistakenly cutting wood – Flutter development skills
  • Formatting Flutter code

The author’s wechat: you can add and pull into “aTaller Technology Exchange Group”.

The ways to follow us are: aTaller(Brief book) aTaller(Gold digging) aTaller(wechat official account)

Recommended articles: This article introduces the principle of the reuse of the Flutter picture load, the mix stack, and the use of the Flutter Platform Channel