What is the shortcut to create flutter stateless and stateful widgets ?

Shortcuts to Create Flutter Widgets

Flutter provides convenient shortcuts and snippets to quickly create StatelessWidget and StatefulWidget classes, significantly speeding up development workflow.

IDE Shortcuts

VS Code (with Flutter Extension)

dartCopy
// Type and press Tab or Enter:
stless → Creates StatelessWidget
stful  → Creates StatefulWidget

Android Studio / IntelliJ IDEA

dartCopy
// Type and press Tab or Enter:
stless → Creates StatelessWidget
stful  → Creates StatefulWidget

Generated StatelessWidget

dartCopy
// Type: stless + Tab
class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Generated StatefulWidget

dartCopy
// Type: stful + Tab
class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Additional Useful Shortcuts

stless

stful

stanim

build

initS

dis

Custom Snippets

VS Code Custom Snippet (

.vscode/flutter.code-snippets

jsonCopy
{
  "StatelessWidget": {
    "prefix": "stless",
    "body": [
      "class ${1:WidgetName} extends StatelessWidget {",
      "  const ${1:WidgetName}({super.key});",
      "",
      "  @override",
      "  Widget build(BuildContext context) {",
      "    return ${2:Container}();",
      "  }",
      "}"
    ]
  }
}

Quick Actions

Wrap with Widget (Keyboard shortcuts):

• Windows/Linux:
  textCopy

  Ctrl + .

• Mac:
  textCopy

  Cmd + .

dartCopy
// Place cursor on widget and use quick action:
Text('Hello')

// Convert to:
Container(
  child: Text('Hello'),
)

Refactoring Shortcuts

Ctrl + .

Cmd + .

Ctrl + .

Cmd + .

Ctrl + .

Cmd + .

Ctrl + Alt + M

Cmd + Opt + M

Live Templates (Android Studio)

dartCopy
// Create custom live template:
// Settings → Editor → Live Templates → Flutter

// Example template:
class $NAME$ extends StatelessWidget {
  const $NAME$({super.key});

  @override
  Widget build(BuildContext context) {
    return $END$;
  }
}

Command Palette

VS Code:

• Press
  textCopy

  Ctrl + Shift + P

  (Windows/Linux)
• Press
  textCopy

  Cmd + Shift + P

  (Mac)
• Type "Flutter: New"

Available Commands:

• Flutter: New Project
• Flutter: New Stateless Widget
• Flutter: New Stateful Widget
• Flutter: New Bloc Class

Pro Tip: Install Flutter extensions in your IDE to unlock all these shortcuts and significantly boost your development productivity.

Learn more at Flutter Development Tools.