docs: enhance Flutter VS Code and Styled Widgets sections with comprehensive content

* docs(flutter): enhance VS Code IDE section with comprehensive content

* docs(flutter): enhance styled widgets section with comprehensive theming content

Author: mrosyidr

src/data/roadmaps/flutter/content/[email protected]

@@ -1 +1,26 @@
-# Styled Widgets
+# Styled Widgets
+
+Styled widgets in Flutter refer to widgets that are decorated with custom styles, such as colors, fonts, shapes, and visual properties. They help create consistent and visually appealing user interfaces by applying themes and styling across your application.
+
+Flutter provides two main design systems for styled widgets:
+
+- **Material Widgets** - Google's Material Design components with built-in styling, animations, and theming
+- **Cupertino Widgets** - Apple's iOS design language widgets that provide native iOS look and feel
+
+You can customize styled widgets through:
+
+- **ThemeData** for app-wide styling and color schemes
+- **Individual widget properties** like color, padding, and decoration
+- **Custom themes** using ThemeExtension for reusable component styles
+- **BoxDecoration** for borders, shadows, gradients, and backgrounds
+- **TextStyles** for typography and font customization
+
+Styled widgets can be created by wrapping existing widgets with styling containers like Container, DecoratedBox, or Theme widgets, or by using the built-in styling properties of Material and Cupertino widgets.
+
+Visit the following resources to learn more:
+
+- [@official@Use themes to share colors and font styles](https://docs.flutter.dev/cookbook/design/themes)
+- [@official@Styling widgets](https://docs.flutter.dev/ui/widgets/styling)
+- [@official@Material theming](https://docs.flutter.dev/ui/design/material)
+- [@official@Cupertino theming](https://docs.flutter.dev/ui/design/cupertino)
+- [@feed@Explore top posts about Flutter](https://app.daily.dev/tags/flutter?ref=roadmapsh)

src/data/roadmaps/flutter/content/[email protected]

@@ -1,3 +1,22 @@
 # VS Code
 
-To use VS Code for Flutter development, you must install the Flutter and Dart plugins for VS Code. These plugins support Flutter-specific features such as syntax highlighting, debugging, and hot reloading.
+VS Code is a lightweight, fast, and highly customizable code editor that provides excellent support for Flutter development. To use VS Code for Flutter development, you must install the Flutter and Dart plugins for VS Code. These plugins support Flutter-specific features such as syntax highlighting, debugging, and hot reloading.
+
+With the Flutter extension, VS Code provides essential development tools including:
+
+- Flutter widget inspector
+- Hot reload and hot restart
+- Integrated debugging
+- Code completion and IntelliSense
+- Flutter outline view
+- Device management
+- Integrated terminal
+
+VS Code is particularly popular among developers who prefer a lightweight IDE with fast performance, extensive customization options, and cross-platform availability.
+
+Visit the following resources to learn more:
+
+- [@official@VS Code for Flutter](https://docs.flutter.dev/development/tools/vs-code)
+- [@official@Flutter extension for VS Code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter)
+- [@official@Dart extension for VS Code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code)
+- [@feed@Explore top posts about Flutter](https://app.daily.dev/tags/flutter?ref=roadmapsh)