Flutter Snippets for VS Code

⚠️ Disclaimer ⚠️

This is not the official Visual Studio Code extension. This is a community-created extension.

Welcome to Flutter Snippets – your friendly helper for writing Flutter code quickly and efficiently in Visual Studio Code! This extension provides a collection of handy snippets covering a wide range of Flutter widgets and features so you can focus on building your app without having to type boilerplate code.

✨ Features

Flutter Snippets (version 1.0.0) now includes the following batches of snippets:

Batch 1 – Navigation, Dialogs, and SnackBar

• fnavigatorpush – Quickly push a new page (using MaterialPageRoute).
• fnavigatorpop – Pop the current page.
• fnavigatorpushnamed – Push a named route (with optional arguments).
• fshowdialog – Show a friendly AlertDialog.
• fshowmodalbottomsheet – Display a modal bottom sheet.
• fshowdatepicker – Open a date picker dialog.
• fshowtimepicker – Open a time picker dialog.
• fsnackbar – Show a SnackBar message (for example, a quick notification).

Batch 2 – Form, Input, and Button Widgets

• ftextfield – Create a TextField (with a controller, label, hint, and onChanged callback).
• ftextformfield – Create a TextFormField (with validation and onChanged).
• fform – Create a Form (with a key and a submit button).
• fdropdown – Create a DropdownButton (with a list of items and an onChanged callback).
• fcheckbox – Create a Checkbox (with a value and onChanged callback).
• fswitch – Create a Switch (with a value and onChanged callback).
• fradio – Create a Radio (with a value, groupValue, and onChanged callback).
• fslider – Create a Slider (with a fixed label and onChanged callback).
• felevatedbutton – Create an ElevatedButton (with an onPressed callback).
• ftextbutton – Create a TextButton (with an onPressed callback).
• foutlinedbutton – Create an OutlinedButton (with an onPressed callback).
• ficonbutton – Create an IconButton (with an icon and onPressed callback).
• ffab – Create a FloatingActionButton (with an onPressed callback).

Batch 3 – Images, Media, Lists, Grids, Animation, and Other Useful Widgets

• fimagenetwork – Create an Image (using Image.network) with a fallback error message.
• fimageasset – Create an Image (using Image.asset) (for example, from your assets folder).
• fcircleavatar – Create a CircleAvatar (with a radius and a background image).
• fgridviewbuilder – Create a GridView (using GridView.builder) (with a SliverGridDelegateWithFixedCrossAxisCount).
• flisttile – Create a ListTile (with a leading icon, title, subtitle, trailing icon, and an onTap callback).
• fdismissible – Create a Dismissible (with a key, an onDismissed callback, and a child).
• fanimatedcontainer – Create an AnimatedContainer (with a duration, width, height, color, and a child).
• fanimatedopacity – Create an AnimatedOpacity (with a duration, opacity, and a child).
• fanimatedbuilder – Create an AnimatedBuilder (with an animation and a builder callback).
• fdrawer – Create a Drawer (with a DrawerHeader and a couple of ListTiles).
• ftabbar – Create a TabBar (with a couple of Tabs).
• ftabbarview – Create a TabBarView (with a couple of children).
• fappbar – Create a custom AppBar (with a title and an action (for example, a search icon)).
• fbottomnavigationbar – Create a BottomNavigationBar (with a currentIndex, an onTap callback, and a couple of items).
• fpageview – Create a PageView (with a couple of children).

🚀 Usage

1. Open a Dart file (or a Flutter project) in VS Code.
2. Type the prefix (for example, "fstateless" or "ftextfield") and press Tab (or Enter) to insert the snippet.
3. Use Tab to navigate through the placeholders (for example, to change the widget's name, label, or callback).
4. Press Esc to exit the snippet mode.

📋 Examples

Stateless Widget (fstateless)

Type "fstateless" and press Tab:

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Hello World'),
    );
  }
}

Stateful Widget (fstateful)

Type "fstateful" and press Tab:

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

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

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Hello World'),
    );
  }
}

TextField (ftextfield)

Type "ftextfield" and press Tab:

TextField(
  controller: myController,
  decoration: const InputDecoration(
    labelText: 'Label',
    hintText: 'Hint',
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    // TODO: Handle text change
  },
)

SnackBar (fsnackbar)

Type "fsnackbar" and press Tab:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: const Text('Your friendly message here'),
    duration: const Duration(seconds: 2),
  ),
);

📝 Requirements

• Visual Studio Code (version 1.60.0 or higher).
• Flutter SDK (installed and configured).

🛠️ Extension Settings

No additional settings are required – just install the extension and start using the snippets!

🐛 Known Issues

None at the moment. If you find any issues or have suggestions, please open an issue (or a pull request) on our GitHub repository.

📜 Release Notes

1.0.0 (2024-03-19)

• Initial release of Flutter Snippets (version 1.0.0) with three batches of snippets:
  • Batch 1: Navigation, Dialogs, and SnackBar (fnavigatorpush, fnavigatorpop, fnavigatorpushnamed, fshowdialog, fshowmodalbottomsheet, fshowdatepicker, fshowtimepicker, fsnackbar).
  • Batch 2: Form, Input, and Button Widgets (ftextfield, ftextformfield, fform, fdropdown, fcheckbox, fswitch, fradio, fslider, felevatedbutton, ftextbutton, foutlinedbutton, ficonbutton, ffab).
  • Batch 3: Images, Media, Lists, Grids, Animation, and Other Useful Widgets (fimagenetwork, fimageasset, fcircleavatar, fgridviewbuilder, flisttile, fdismissible, fanimatedcontainer, fanimatedopacity, fanimatedbuilder, fdrawer, ftabbar, ftabbarview, fappbar, fbottomnavigationbar, fpageview).

🤝 Contributing

Contributions (ideas, bug fixes, or new snippets) are very welcome! Feel free to open an issue or submit a pull request on our GitHub repository.

📄 License

This project is licensed under the MIT License – see the LICENSE file for details.

Happy coding, and enjoy your Flutter journey! 🚀