From 06bd2407b86a0284384080a2528547316e37c39d Mon Sep 17 00:00:00 2001 From: syedmouaazfarrukh Date: Mon, 30 Jan 2023 06:26:23 -0800 Subject: [PATCH] Adding content to 102-styled-widgets --- .../102-styled-widgets/100-material-widgets.md | 18 ++++++++++++++++-- .../101-cupertino-widgets.md | 4 +++- .../102-widgets/102-styled-widgets/index.md | 14 +++++++++++++- 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/100-material-widgets.md b/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/100-material-widgets.md index b73c61862..6c66e0bc8 100644 --- a/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/100-material-widgets.md +++ b/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/100-material-widgets.md @@ -1,7 +1,21 @@ -# Material widgets +# Material Widgets -Visual, behavioral, and motion-rich widgets implementing the Material Design guidelines. +Material Widgets are a set of Flutter widgets that implement Material Design, Google's visual language for design. They are designed to provide a consistent look and feel on both Android and iOS devices. Some common Material Widgets include: + +- RaisedButton +- Scaffold +- AppBar +- TextField +- Drawer +- SnackBar +- BottomNavigationBar +- IconButton + +These widgets are commonly used in Flutter apps to provide a familiar look and feel that follows Material Design guidelines. Visit the following resources to learn more: - [Material Components widgets](https://docs.flutter.dev/development/ui/widgets/material) +- [Flutter – Material Design](https://www.geeksforgeeks.org/flutter-material-design/) +- [Widget catalog in Flutter](https://docs.flutter.dev/development/ui/widgets) +- [Material Designs Guidlines](https://m2.material.io/design/guidelines-overview) \ No newline at end of file diff --git a/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/101-cupertino-widgets.md b/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/101-cupertino-widgets.md index 53ed4dcef..c1df00cc2 100644 --- a/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/101-cupertino-widgets.md +++ b/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/101-cupertino-widgets.md @@ -1,7 +1,9 @@ # Cupertino widgets -Beautiful and high-fidelity widgets for current iOS design language. +Cupertino widgets are a set of Flutter widgets that mimic the look and feel of Apple's iOS user interface. They are designed to provide a consistent look and feel on both iOS and Android devices, and include widgets such as CupertinoButton, CupertinoAlertDialog, and CupertinoSlider. These widgets are useful for building cross-platform apps that need to conform to the iOS design aesthetic.s Visit the following resources to learn more: - [Cupertino (iOS-style) widgets](https://docs.flutter.dev/development/ui/widgets/cupertino) +- [Flutter Cupertino Tutorial](https://blog.logrocket.com/flutter-cupertino-tutorial-build-ios-apps-native/) +- [Flutter Cupertino Widgets](https://www.youtube.com/watch?v=L-TY_5NZ7z4) \ No newline at end of file diff --git a/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/index.md b/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/index.md index 16ee28556..347bd7d18 100644 --- a/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/index.md +++ b/src/roadmaps/flutter/content/102-widgets/102-styled-widgets/index.md @@ -1 +1,13 @@ -# Styled widgets \ No newline at end of file +# Styled Widgets + +Styled Widgets are Flutter widgets that are decorated with custom styles, such as colors, fonts, and shapes. They can be created by wrapping existing widgets with other widgets, such as Container, Theme, or BoxDecoration. For example: + +- Container widget can be used to set a fixed width, height, padding, and margin. +- Theme widget can be used to specify a color scheme and typography for an entire app or a section of it. +- BoxDecoration can be used to add a border, background color, and a border radius to a widget. +- Styled Widgets allow developers to easily customize the look and feel of their Flutter app and create a consistent visual style. + +Learn more from the following links: + +- [Styling widgets in Flutter](https://docs.flutter.dev/development/ui/widgets/styling) +- [Style Your Flutter Widgets](https://www.youtube.com/watch?v=kcq8AbVyMbk) \ No newline at end of file