diff --git a/src/data/roadmaps/flutter/content/styled-widgets@wBSdmrVPv3Zuys3X8VvBm.md b/src/data/roadmaps/flutter/content/styled-widgets@wBSdmrVPv3Zuys3X8VvBm.md index 8efcad71e..b229fc73c 100644 --- a/src/data/roadmaps/flutter/content/styled-widgets@wBSdmrVPv3Zuys3X8VvBm.md +++ b/src/data/roadmaps/flutter/content/styled-widgets@wBSdmrVPv3Zuys3X8VvBm.md @@ -1 +1,26 @@ -# Styled Widgets \ No newline at end of file +# 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) \ No newline at end of file diff --git a/src/data/roadmaps/flutter/content/vs-code@HMDsgljLshA63XX-hhAxV.md b/src/data/roadmaps/flutter/content/vs-code@HMDsgljLshA63XX-hhAxV.md index f29627412..4a0427864 100644 --- a/src/data/roadmaps/flutter/content/vs-code@HMDsgljLshA63XX-hhAxV.md +++ b/src/data/roadmaps/flutter/content/vs-code@HMDsgljLshA63XX-hhAxV.md @@ -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) \ No newline at end of file