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).
- 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).
- 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
- Open a Dart file (or a Flutter project) in VS Code.
- Type the prefix (for example, "fstateless" or "ftextfield") and press Tab (or Enter) to insert the snippet.
- Use Tab to navigate through the placeholders (for example, to change the widget's name, label, or callback).
- Press Esc to exit the snippet mode.
📋 Examples
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'),
);
}
}
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! 🚀
| |