diff --git a/.gitbook/assets/#2.png b/.gitbook/assets/#2.png deleted file mode 100644 index e76da35..0000000 Binary files a/.gitbook/assets/#2.png and /dev/null differ diff --git a/.gitbook/assets/Accordion.png b/.gitbook/assets/Accordion.png deleted file mode 100644 index cf9ad36..0000000 Binary files a/.gitbook/assets/Accordion.png and /dev/null differ diff --git a/.gitbook/assets/Animation -scaling.gif b/.gitbook/assets/Animation -scaling.gif deleted file mode 100644 index 629386e..0000000 Binary files a/.gitbook/assets/Animation -scaling.gif and /dev/null differ diff --git a/.gitbook/assets/Animation docs banner.gif b/.gitbook/assets/Animation docs banner.gif deleted file mode 100644 index 8723d9a..0000000 Binary files a/.gitbook/assets/Animation docs banner.gif and /dev/null differ diff --git a/.gitbook/assets/Animation- allignment.gif b/.gitbook/assets/Animation- allignment.gif deleted file mode 100644 index 4d5c407..0000000 Binary files a/.gitbook/assets/Animation- allignment.gif and /dev/null differ diff --git a/.gitbook/assets/Animation- slide.gif b/.gitbook/assets/Animation- slide.gif deleted file mode 100644 index 62a0a70..0000000 Binary files a/.gitbook/assets/Animation- slide.gif and /dev/null differ diff --git a/.gitbook/assets/Animation-Rotation.gif b/.gitbook/assets/Animation-Rotation.gif deleted file mode 100644 index 65bdba5..0000000 Binary files a/.gitbook/assets/Animation-Rotation.gif and /dev/null differ diff --git a/.gitbook/assets/Animation-container.gif b/.gitbook/assets/Animation-container.gif deleted file mode 100644 index 721ca85..0000000 Binary files a/.gitbook/assets/Animation-container.gif and /dev/null differ diff --git a/.gitbook/assets/Animation-size.gif b/.gitbook/assets/Animation-size.gif deleted file mode 100644 index b3b430e..0000000 Binary files a/.gitbook/assets/Animation-size.gif and /dev/null differ diff --git a/.gitbook/assets/Basic checkbox.png b/.gitbook/assets/Basic checkbox.png deleted file mode 100644 index bda3966..0000000 Binary files a/.gitbook/assets/Basic checkbox.png and /dev/null differ diff --git a/.gitbook/assets/Basic radio button.png b/.gitbook/assets/Basic radio button.png deleted file mode 100644 index 02e316c..0000000 Binary files a/.gitbook/assets/Basic radio button.png and /dev/null differ diff --git a/.gitbook/assets/Basic shimmer effect@2x.png b/.gitbook/assets/Basic shimmer effect@2x.png deleted file mode 100644 index a116ed2..0000000 Binary files a/.gitbook/assets/Basic shimmer effect@2x.png and /dev/null differ diff --git a/.gitbook/assets/Bottom sheet Docs banner.gif b/.gitbook/assets/Bottom sheet Docs banner.gif deleted file mode 100644 index 5f0de01..0000000 Binary files a/.gitbook/assets/Bottom sheet Docs banner.gif and /dev/null differ diff --git a/.gitbook/assets/Bottom sheets WIthout overlay@3x.png b/.gitbook/assets/Bottom sheets WIthout overlay@3x.png deleted file mode 100644 index 1f199da..0000000 Binary files a/.gitbook/assets/Bottom sheets WIthout overlay@3x.png and /dev/null differ diff --git a/.gitbook/assets/Checkbox list tile@3x.png b/.gitbook/assets/Checkbox list tile@3x.png deleted file mode 100644 index b0ff05d..0000000 Binary files a/.gitbook/assets/Checkbox list tile@3x.png and /dev/null differ diff --git a/.gitbook/assets/Circular checkbox.png b/.gitbook/assets/Circular checkbox.png deleted file mode 100644 index e27115c..0000000 Binary files a/.gitbook/assets/Circular checkbox.png and /dev/null differ diff --git a/.gitbook/assets/Circular loaders@2x.png b/.gitbook/assets/Circular loaders@2x.png deleted file mode 100644 index 38d52ed..0000000 Binary files a/.gitbook/assets/Circular loaders@2x.png and /dev/null differ diff --git a/.gitbook/assets/Custom checkbox.png b/.gitbook/assets/Custom checkbox.png deleted file mode 100644 index 1f79b95..0000000 Binary files a/.gitbook/assets/Custom checkbox.png and /dev/null differ diff --git a/.gitbook/assets/Dashed border - circle.png b/.gitbook/assets/Dashed border - circle.png deleted file mode 100644 index de75a48..0000000 Binary files a/.gitbook/assets/Dashed border - circle.png and /dev/null differ diff --git a/.gitbook/assets/Dashed border - circle@3x.png b/.gitbook/assets/Dashed border - circle@3x.png deleted file mode 100644 index 5e1208f..0000000 Binary files a/.gitbook/assets/Dashed border - circle@3x.png and /dev/null differ diff --git a/.gitbook/assets/Dashed borders@3x.png b/.gitbook/assets/Dashed borders@3x.png deleted file mode 100644 index f64788b..0000000 Binary files a/.gitbook/assets/Dashed borders@3x.png and /dev/null differ diff --git a/.gitbook/assets/Docs banner -Checkboxes@2x.png b/.gitbook/assets/Docs banner -Checkboxes@2x.png deleted file mode 100644 index 4526940..0000000 Binary files a/.gitbook/assets/Docs banner -Checkboxes@2x.png and /dev/null differ diff --git a/.gitbook/assets/Docs banner-Borders@2x.png b/.gitbook/assets/Docs banner-Borders@2x.png deleted file mode 100644 index b482925..0000000 Binary files a/.gitbook/assets/Docs banner-Borders@2x.png and /dev/null differ diff --git a/.gitbook/assets/Docs banner-Bottomsheets@2x.png b/.gitbook/assets/Docs banner-Bottomsheets@2x.png deleted file mode 100644 index 9f4cdf2..0000000 Binary files a/.gitbook/assets/Docs banner-Bottomsheets@2x.png and /dev/null differ diff --git a/.gitbook/assets/Docs banner-Checkbox list tile@2x.png b/.gitbook/assets/Docs banner-Checkbox list tile@2x.png deleted file mode 100644 index 026deb3..0000000 Binary files a/.gitbook/assets/Docs banner-Checkbox list tile@2x.png and /dev/null differ diff --git a/.gitbook/assets/Docs banner-Radio button @2x.png b/.gitbook/assets/Docs banner-Radio button @2x.png deleted file mode 100644 index 76d0671..0000000 Binary files a/.gitbook/assets/Docs banner-Radio button @2x.png and /dev/null differ diff --git a/.gitbook/assets/Docs banner-Radio list tile@2x.png b/.gitbook/assets/Docs banner-Radio list tile@2x.png deleted file mode 100644 index 64983b1..0000000 Binary files a/.gitbook/assets/Docs banner-Radio list tile@2x.png and /dev/null differ diff --git a/.gitbook/assets/Dotted border@3x.png b/.gitbook/assets/Dotted border@3x.png deleted file mode 100644 index e0e756a..0000000 Binary files a/.gitbook/assets/Dotted border@3x.png and /dev/null differ diff --git a/.gitbook/assets/Dotted borders@3x.png b/.gitbook/assets/Dotted borders@3x.png deleted file mode 100644 index 0347a3f..0000000 Binary files a/.gitbook/assets/Dotted borders@3x.png and /dev/null differ diff --git a/.gitbook/assets/GW-Borders docs banner.png b/.gitbook/assets/GW-Borders docs banner.png deleted file mode 100644 index 303b4bc..0000000 Binary files a/.gitbook/assets/GW-Borders docs banner.png and /dev/null differ diff --git a/.gitbook/assets/Introscreens full width.gif b/.gitbook/assets/Introscreens full width.gif deleted file mode 100644 index fa0ae46..0000000 Binary files a/.gitbook/assets/Introscreens full width.gif and /dev/null differ diff --git a/.gitbook/assets/Introscreens-half.gif b/.gitbook/assets/Introscreens-half.gif deleted file mode 100644 index bf0a94b..0000000 Binary files a/.gitbook/assets/Introscreens-half.gif and /dev/null differ diff --git a/.gitbook/assets/Progress bar with child property@2x.png b/.gitbook/assets/Progress bar with child property@2x.png deleted file mode 100644 index 1a00944..0000000 Binary files a/.gitbook/assets/Progress bar with child property@2x.png and /dev/null differ diff --git a/.gitbook/assets/Radiolist tile@3x.png b/.gitbook/assets/Radiolist tile@3x.png deleted file mode 100644 index 007c26e..0000000 Binary files a/.gitbook/assets/Radiolist tile@3x.png and /dev/null differ diff --git a/.gitbook/assets/Ratings@2x.png b/.gitbook/assets/Ratings@2x.png deleted file mode 100644 index b0546dc..0000000 Binary files a/.gitbook/assets/Ratings@2x.png and /dev/null differ diff --git a/.gitbook/assets/Rotation@3x.png b/.gitbook/assets/Rotation@3x.png deleted file mode 100644 index 2b2c1a7..0000000 Binary files a/.gitbook/assets/Rotation@3x.png and /dev/null differ diff --git a/.gitbook/assets/Shimmer effect on text@2x.png b/.gitbook/assets/Shimmer effect on text@2x.png deleted file mode 100644 index f07716f..0000000 Binary files a/.gitbook/assets/Shimmer effect on text@2x.png and /dev/null differ diff --git a/.gitbook/assets/Solid borders@3x.png b/.gitbook/assets/Solid borders@3x.png deleted file mode 100644 index f0460fd..0000000 Binary files a/.gitbook/assets/Solid borders@3x.png and /dev/null differ diff --git a/.gitbook/assets/Square checkbox.png b/.gitbook/assets/Square checkbox.png deleted file mode 100644 index f8c2245..0000000 Binary files a/.gitbook/assets/Square checkbox.png and /dev/null differ diff --git a/.gitbook/assets/Square radio buttons.png b/.gitbook/assets/Square radio buttons.png deleted file mode 100644 index a61a027..0000000 Binary files a/.gitbook/assets/Square radio buttons.png and /dev/null differ diff --git a/.gitbook/assets/Square-solid-button.png b/.gitbook/assets/Square-solid-button.png deleted file mode 100644 index dd84b18..0000000 Binary files a/.gitbook/assets/Square-solid-button.png and /dev/null differ diff --git a/.gitbook/assets/Standard buttons - solid@2x.png b/.gitbook/assets/Standard buttons - solid@2x.png deleted file mode 100644 index 1493884..0000000 Binary files a/.gitbook/assets/Standard buttons - solid@2x.png and /dev/null differ diff --git a/.gitbook/assets/Sticky headers docs baner_compressed.gif b/.gitbook/assets/Sticky headers docs baner_compressed.gif deleted file mode 100644 index 9df59ae..0000000 Binary files a/.gitbook/assets/Sticky headers docs baner_compressed.gif and /dev/null differ diff --git a/.gitbook/assets/Sticky headers docs banner.gif b/.gitbook/assets/Sticky headers docs banner.gif deleted file mode 100644 index 46ad01a..0000000 Binary files a/.gitbook/assets/Sticky headers docs banner.gif and /dev/null differ diff --git a/.gitbook/assets/Sticky headers-basic.gif b/.gitbook/assets/Sticky headers-basic.gif deleted file mode 100644 index fad6060..0000000 Binary files a/.gitbook/assets/Sticky headers-basic.gif and /dev/null differ diff --git a/.gitbook/assets/Sticky headers-customized.gif b/.gitbook/assets/Sticky headers-customized.gif deleted file mode 100644 index 7a202d3..0000000 Binary files a/.gitbook/assets/Sticky headers-customized.gif and /dev/null differ diff --git a/.gitbook/assets/Transparent social button@2x.png b/.gitbook/assets/Transparent social button@2x.png deleted file mode 100644 index bc1eb0e..0000000 Binary files a/.gitbook/assets/Transparent social button@2x.png and /dev/null differ diff --git a/.gitbook/assets/accordian with text@2x.png b/.gitbook/assets/accordian with text@2x.png deleted file mode 100644 index 53146f5..0000000 Binary files a/.gitbook/assets/accordian with text@2x.png and /dev/null differ diff --git a/.gitbook/assets/accordion with icon@2x.png b/.gitbook/assets/accordion with icon@2x.png deleted file mode 100644 index b7027f2..0000000 Binary files a/.gitbook/assets/accordion with icon@2x.png and /dev/null differ diff --git a/.gitbook/assets/alert with multiple buttons@2x.png b/.gitbook/assets/alert with multiple buttons@2x.png deleted file mode 100644 index 4ceac1c..0000000 Binary files a/.gitbook/assets/alert with multiple buttons@2x.png and /dev/null differ diff --git a/.gitbook/assets/allignment@3x.png b/.gitbook/assets/allignment@3x.png deleted file mode 100644 index 3634203..0000000 Binary files a/.gitbook/assets/allignment@3x.png and /dev/null differ diff --git a/.gitbook/assets/block button@2x.png b/.gitbook/assets/block button@2x.png deleted file mode 100644 index e0e9c39..0000000 Binary files a/.gitbook/assets/block button@2x.png and /dev/null differ diff --git a/.gitbook/assets/block social button@2x (1).png b/.gitbook/assets/block social button@2x (1).png deleted file mode 100644 index b6783a1..0000000 Binary files a/.gitbook/assets/block social button@2x (1).png and /dev/null differ diff --git a/.gitbook/assets/block social button@2x.png b/.gitbook/assets/block social button@2x.png deleted file mode 100644 index 9679f0a..0000000 Binary files a/.gitbook/assets/block social button@2x.png and /dev/null differ diff --git a/.gitbook/assets/cards with avatars@2x.png b/.gitbook/assets/cards with avatars@2x.png deleted file mode 100644 index a43620b..0000000 Binary files a/.gitbook/assets/cards with avatars@2x.png and /dev/null differ diff --git a/.gitbook/assets/cards with image overlays@2x.png b/.gitbook/assets/cards with image overlays@2x.png deleted file mode 100644 index 0643381..0000000 Binary files a/.gitbook/assets/cards with image overlays@2x.png and /dev/null differ diff --git a/.gitbook/assets/circular border - oval-solid@3x.png b/.gitbook/assets/circular border - oval-solid@3x.png deleted file mode 100644 index 409e69d..0000000 Binary files a/.gitbook/assets/circular border - oval-solid@3x.png and /dev/null differ diff --git a/.gitbook/assets/custom_radio_1 (1) (1).png b/.gitbook/assets/custom_radio_1 (1) (1).png deleted file mode 100644 index ee949de..0000000 Binary files a/.gitbook/assets/custom_radio_1 (1) (1).png and /dev/null differ diff --git a/.gitbook/assets/Custom_radio_1.png b/.gitbook/assets/custom_radio_1.png similarity index 100% rename from .gitbook/assets/Custom_radio_1.png rename to .gitbook/assets/custom_radio_1.png diff --git a/.gitbook/assets/custom_radio_2 (1) (1).png b/.gitbook/assets/custom_radio_2 (1) (1).png deleted file mode 100644 index 9185142..0000000 Binary files a/.gitbook/assets/custom_radio_2 (1) (1).png and /dev/null differ diff --git a/.gitbook/assets/dashed border with radius.png b/.gitbook/assets/dashed border with radius.png deleted file mode 100644 index 3c0fc8e..0000000 Binary files a/.gitbook/assets/dashed border with radius.png and /dev/null differ diff --git a/.gitbook/assets/dashed border.png b/.gitbook/assets/dashed border.png deleted file mode 100644 index a1d9254..0000000 Binary files a/.gitbook/assets/dashed border.png and /dev/null differ diff --git a/.gitbook/assets/dashed border@3x.png b/.gitbook/assets/dashed border@3x.png deleted file mode 100644 index 5307255..0000000 Binary files a/.gitbook/assets/dashed border@3x.png and /dev/null differ diff --git a/.gitbook/assets/disabled buttons@2x.png b/.gitbook/assets/disabled buttons@2x.png deleted file mode 100644 index 8407ee9..0000000 Binary files a/.gitbook/assets/disabled buttons@2x.png and /dev/null differ diff --git a/.gitbook/assets/full width button@2x.png b/.gitbook/assets/full width button@2x.png deleted file mode 100644 index 5caa3ba..0000000 Binary files a/.gitbook/assets/full width button@2x.png and /dev/null differ diff --git a/.gitbook/assets/full width social button@2x (1).png b/.gitbook/assets/full width social button@2x (1).png deleted file mode 100644 index d25dbc7..0000000 Binary files a/.gitbook/assets/full width social button@2x (1).png and /dev/null differ diff --git a/.gitbook/assets/full width social button@2x.png b/.gitbook/assets/full width social button@2x.png deleted file mode 100644 index a1709c9..0000000 Binary files a/.gitbook/assets/full width social button@2x.png and /dev/null differ diff --git a/.gitbook/assets/fullwidth icon button@2x.png b/.gitbook/assets/fullwidth icon button@2x.png deleted file mode 100644 index 9f54a75..0000000 Binary files a/.gitbook/assets/fullwidth icon button@2x.png and /dev/null differ diff --git a/.gitbook/assets/fullwidth@2x.png b/.gitbook/assets/fullwidth@2x.png deleted file mode 100644 index d58c9c7..0000000 Binary files a/.gitbook/assets/fullwidth@2x.png and /dev/null differ diff --git a/.gitbook/assets/github-settings 2.png b/.gitbook/assets/github-settings 2.png deleted file mode 100644 index f92b36c..0000000 Binary files a/.gitbook/assets/github-settings 2.png and /dev/null differ diff --git a/.gitbook/assets/intro-screens-docs-banner-compressed (1) (1) (1).gif b/.gitbook/assets/intro-screens-docs-banner-compressed (1) (1) (1).gif deleted file mode 100644 index 78d8cad..0000000 Binary files a/.gitbook/assets/intro-screens-docs-banner-compressed (1) (1) (1).gif and /dev/null differ diff --git a/.gitbook/assets/Intro screens docs banner-compressed.gif b/.gitbook/assets/intro-screens-docs-banner-compressed (1).gif similarity index 100% rename from .gitbook/assets/Intro screens docs banner-compressed.gif rename to .gitbook/assets/intro-screens-docs-banner-compressed (1).gif diff --git a/.gitbook/assets/link share.png b/.gitbook/assets/link share.png deleted file mode 100644 index ac3ca68..0000000 Binary files a/.gitbook/assets/link share.png and /dev/null differ diff --git a/.gitbook/assets/outline 2x social button@2x (1).png b/.gitbook/assets/outline 2x social button@2x (1).png deleted file mode 100644 index c1adbb4..0000000 Binary files a/.gitbook/assets/outline 2x social button@2x (1).png and /dev/null differ diff --git a/.gitbook/assets/outline 2x social button@2x.png b/.gitbook/assets/outline 2x social button@2x.png deleted file mode 100644 index 2bc1d79..0000000 Binary files a/.gitbook/assets/outline 2x social button@2x.png and /dev/null differ diff --git a/.gitbook/assets/outline 2x@2x.png b/.gitbook/assets/outline 2x@2x.png deleted file mode 100644 index 2ca2e56..0000000 Binary files a/.gitbook/assets/outline 2x@2x.png and /dev/null differ diff --git a/.gitbook/assets/pills disabled@2x.png b/.gitbook/assets/pills disabled@2x.png deleted file mode 100644 index 2dc582d..0000000 Binary files a/.gitbook/assets/pills disabled@2x.png and /dev/null differ diff --git a/.gitbook/assets/pills icon button@2x.png b/.gitbook/assets/pills icon button@2x.png deleted file mode 100644 index f2d221f..0000000 Binary files a/.gitbook/assets/pills icon button@2x.png and /dev/null differ diff --git a/.gitbook/assets/pills outline 2x@2x.png b/.gitbook/assets/pills outline 2x@2x.png deleted file mode 100644 index 3c63f40..0000000 Binary files a/.gitbook/assets/pills outline 2x@2x.png and /dev/null differ diff --git a/.gitbook/assets/pills social buttons@2x.png b/.gitbook/assets/pills social buttons@2x.png deleted file mode 100644 index 5183b2c..0000000 Binary files a/.gitbook/assets/pills social buttons@2x.png and /dev/null differ diff --git a/.gitbook/assets/scaling@3x.png b/.gitbook/assets/scaling@3x.png deleted file mode 100644 index b44d839..0000000 Binary files a/.gitbook/assets/scaling@3x.png and /dev/null differ diff --git a/.gitbook/assets/size@3x.png b/.gitbook/assets/size@3x.png deleted file mode 100644 index 9b66401..0000000 Binary files a/.gitbook/assets/size@3x.png and /dev/null differ diff --git a/.gitbook/assets/slide@3x.png b/.gitbook/assets/slide@3x.png deleted file mode 100644 index ad6a09f..0000000 Binary files a/.gitbook/assets/slide@3x.png and /dev/null differ diff --git a/.gitbook/assets/slightly rounded corners@2x.png b/.gitbook/assets/slightly rounded corners@2x.png deleted file mode 100644 index a5e390e..0000000 Binary files a/.gitbook/assets/slightly rounded corners@2x.png and /dev/null differ diff --git a/.gitbook/assets/solid badge buttons@2x.png b/.gitbook/assets/solid badge buttons@2x.png deleted file mode 100644 index a813bf4..0000000 Binary files a/.gitbook/assets/solid badge buttons@2x.png and /dev/null differ diff --git a/.gitbook/assets/solid border.png b/.gitbook/assets/solid border.png deleted file mode 100644 index a0563db..0000000 Binary files a/.gitbook/assets/solid border.png and /dev/null differ diff --git a/.gitbook/assets/solid border@3x.png b/.gitbook/assets/solid border@3x.png deleted file mode 100644 index b37eded..0000000 Binary files a/.gitbook/assets/solid border@3x.png and /dev/null differ diff --git a/.gitbook/assets/solid button@2x.png b/.gitbook/assets/solid button@2x.png deleted file mode 100644 index bb0ddf2..0000000 Binary files a/.gitbook/assets/solid button@2x.png and /dev/null differ diff --git a/.gitbook/assets/solid social button@2x.png b/.gitbook/assets/solid social button@2x.png deleted file mode 100644 index 3448c59..0000000 Binary files a/.gitbook/assets/solid social button@2x.png and /dev/null differ diff --git a/.gitbook/assets/square icon button@2x.png b/.gitbook/assets/square icon button@2x.png deleted file mode 100644 index 193f542..0000000 Binary files a/.gitbook/assets/square icon button@2x.png and /dev/null differ diff --git a/.gitbook/assets/square social button@2x.png b/.gitbook/assets/square social button@2x.png deleted file mode 100644 index 8249d12..0000000 Binary files a/.gitbook/assets/square social button@2x.png and /dev/null differ diff --git a/.gitbook/assets/square solid@2x.png b/.gitbook/assets/square solid@2x.png deleted file mode 100644 index 90b23c3..0000000 Binary files a/.gitbook/assets/square solid@2x.png and /dev/null differ diff --git a/.gitbook/assets/square@2x.png b/.gitbook/assets/square@2x.png deleted file mode 100644 index 533449c..0000000 Binary files a/.gitbook/assets/square@2x.png and /dev/null differ diff --git a/.gitbook/assets/tabs@2x.png b/.gitbook/assets/tabs@2x.png deleted file mode 100644 index 231dcf2..0000000 Binary files a/.gitbook/assets/tabs@2x.png and /dev/null differ diff --git a/.gitbook/assets/tile with avatar@2x.png b/.gitbook/assets/tile with avatar@2x.png deleted file mode 100644 index 8c53c7f..0000000 Binary files a/.gitbook/assets/tile with avatar@2x.png and /dev/null differ diff --git a/.gitbook/assets/with image@2x.png b/.gitbook/assets/with image@2x.png deleted file mode 100644 index 9195cfa..0000000 Binary files a/.gitbook/assets/with image@2x.png and /dev/null differ diff --git a/.gitignore b/.gitignore deleted file mode 100644 index cf3063e..0000000 --- a/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -/dist -/node_modules/ -/package-lock.json -/build/node_modules/ -/build/package-lock.json -.idea -.DS_Store -/src/.vuepress/dist diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 595e215..0000000 --- a/.npmignore +++ /dev/null @@ -1,12 +0,0 @@ -pids -logs -node_modules -npm-debug.log -coverage/ -run -dist -.DS_Store -.nyc_output -.basement -config.local.js -basement_dist diff --git a/README.md b/README.md index f965b9b..9d2415c 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,27 @@ --- description: >- - Flutter Development Docs by GetWidget is one of the largest Flutter - open-source UI Kit libraries for mobile or web apps. It has more than 1000+ - pre-built reusable widgets. + Get Flutter es una de las librerías UI de código abierto más grandes de + Flutter, para aplicaciones web y móviles. Tiene más de 1000 widgets + reutilizables preconstruidos. --- -# Flutter Docs +# Introducción -![Get Widget Banner](https://ik.imagekit.io/ionicfirebaseapp/getwidget/docs/tr:w-800,f-auto/link-share_aT-cHzGY9.png) +![Get Flutter librería UI de código abierto](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto-1300/github-settings_2_6MxhZpdf5.png) -## How GetWidget Started? +## ¿ Cómo comenzó Get Flutter ? -We are a huge follower of Flutter and using it from a very early stage ever since it was released in the alpha stage in 2017. We used it in various Flutter apps including some enterprise SAAS applications. +Somos grandes seguidores de Flutter y lo estamos utilizando desde sus comienzos, incluso desde que fue lanzado en su versión alfa en el año 2017. Lo utilizamos en varias aplicaciones, incluyendo algunas aplicaciones empresariales SAAS. -Flutter almost has all the widgets available that developers can use in projects but again, we used to develop lots of projects with flutter and hence decided why not develop all the possible widgets that can be reused in any project and speed up the app development. +Flutter tiene casi todos los widgets necesarios que un desarrollador puede usar en un proyecto, pero de nuevo, nosotros realizamos muchos proyectos con Flutter y decidimos, por qué no, desarrollar todos los widgets posibles que pueden ser reutilizados en cualquier proyecto y aumentar la velocidad de desarrollo. -We launched our UI Library in the beginning to develop a flutter app, to test the library component. Kindly give us your feedback to improve and add more widgets to our library. And if you are new then follow our this Flutter development doc with [GetWidget](https://www.getwidget.dev). These Flutter Docs will help you out to build the Flutter app faster. +Estamos lanzando nuestra versión beta en principio, para desarrollar y testear los componentes de la librería. Si puedes, danos tu feedback para poder mejorar y agregar más widgets a nuestra librería. -## Get Widget Roadmap +## Get Flutter Roadmap -We are committed to continuing this library development to make flutter app design & development less time consuming and with a small learning curve too. +Estamos comprometidos a continuar con el desarrollo de esta librería para hacer del diseño y desarrollo de aplicaciones Flutter un proceso más rápido y con una pequeña curva de aprendizaje. -We will really appreciate it if you could check our Roadmap and do Vote & share your Feedback on upcoming widgets and New features: [https://roadmap.getwidget.dev/](https://roadmap.getwidget.dev) +Realmente apreciaremos mucho si puedes ver nuestro Roadmap y votar y/o compartir tu feedback sobre los próximos widgets y features: [https://roadmap.getflutter.dev/](https://roadmap.getflutter.dev/) -Your support and feedback help us to build the best Flutter Open-Source product. +Tu apoyo y tu feedback nos ayuda a construir el mejor producto de código abierto de Flutter. -### XD Link:[https://xd.adobe.com/view/a23a7d02-b811-4d4e-b10a-b9c3d33eb50a-f769/grid/](https://xd.adobe.com/view/a23a7d02-b811-4d4e-b10a-b9c3d33eb50a-f769/grid/) - -### [DOWNLOAD XD](https://drive.google.com/file/d/1vX7vT7soJS3weh7T8qWCTrmaA7\_C-tDH/view?usp=sharing) diff --git a/SUMMARY.md b/SUMMARY.md index b6d2fdd..df064ee 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -1,45 +1,32 @@ # Table of contents -* [Flutter Docs](README.md) -* [src](src/README.md) - * [Flutter GetWidget Docs](src/introduction.md) - * [Flutter Tutorial with Getwidget](src/getting-started.md) - * [GF Flutter Accordion](src/gf-accordion.md) - * [GF Flutter Checkbox](src/gf-checkbox.md) - * [GF Flutter CheckboxListTile](src/gf-checkbox-listtile.md) - * [GF Flutter Radio Button](src/gf-radio.md) - * [GF Flutter RadioList Tile](src/gf-radio-listtile.md) - * [GF Flutter Toast Widget](src/gf-toast.md) - * [GF Flutter Alert Dialog](src/gf-alert.md) - * [GF Custom Flutter Carousel Widget](src/gf-carousel.md) - * [GF Flutter Badge](src/gf-badge.md) - * [GF Flutter Rating](src/gf-rating.md) - * [Flutter Button Widget](src/gf-button/README.md) - * [Flutter Pills Button](src/gf-button/pills-button.md) - * [Flutter Social Button](src/gf-button/social-button.md) - * [Flutter Icon Button](src/gf-button/icon-button.md) - * [Flutter Elevated Button](src/gf-button/standard-button.md) - * [Flutter Square Button](src/gf-button/square-button.md) - * [GF Flutter Shimmer](src/gf-shimmer.md) - * [GF Flutter Avatar](src/gf-avatar.md) - * [GF Flutter Image](src/gf-image.md) - * [GF Flutter Toggle](src/gf-toggle.md) - * [GF Flutter Loader](src/gf-loader.md) - * [GF Flutter Progress Bar](src/gf-progress-bar.md) - * [GF Flutter Appbar](src/gf-appbar.md) - * [GF Flutter Drawer Widget](src/gf-drawer.md) - * [GF Custom Flutter Card](src/gf-card.md) - * [GF Flutter TabBar](src/gf-tab.md) - * [GF Flutter Typography](src/gf-typography.md) - * [GF Flutter ListTile](src/gf-tile.md) - * [Changelog](src/changelog.md) - * [GF Flutter SearchBar](src/gf-searchbar.md) - * [GF Flutter Floating Widget](src/gf-floating-widget.md) - * [GF Flutter Animation](src/gf-animation.md) - * [GF Flutter Border](src/gf-border.md) - * [GF Flutter Bottomsheet Model](src/gf-bottomsheet.md) - * [GF Introduction Screen](src/gf-intro-screen.md) - * [GF Flutter Sticky Header](src/gf-sticky-header.md) - * [GF Flutter Dropdown](src/gf-dropdown.md) - * [GF Flutter Multiselect](src/gf-multiselect.md) - * [Flutter GetWidget Docs](src/index.md) +* [Introducción](README.md) +* [Comenzando](getting-started.md) +* [GF Button](gf-button/README.md) + * [Botón estándar](gf-button/standard-button.md) + * [Botón píldora](gf-button/pills-button.md) + * [Botón cuadrado](gf-button/square-button.md) + * [Botón con ícono](gf-button/icon-button.md) + * [Botón social](gf-button/social-button.md) +* [GF Badge](gf-badge.md) +* [GF Avatar](gf-avatar.md) +* [GF Image](gf-image.md) +* [GF Card](gf-card.md) +* [GF Carousel](gf-carousel.md) +* [GF Tile](gf-tile.md) +* [GF Tab](gf-tab.md) +* [GF Floating Widget](gf-floating-widget.md) +* [GF Toast](gf-toast.md) +* [GF Toggle](gf-toggle.md) +* [GF Typography](gf-typography.md) +* [GF Drawer](gf-drawer.md) +* [GF Accordion](gf-accordion.md) +* [GF Alert](gf-alert.md) +* [GF Appbar](gf-appbar.md) +* [GF SearchBar](gf-searchbar.md) +* [GF Rating](gf-rating.md) +* [GF Loader](gf-loader.md) +* [GF Progress Bar](gf-progress-bar.md) +* [GF Shimmer](gf-shimmer.md) +* [Changelog](changelog.md) + diff --git a/src/changelog.md b/changelog.md similarity index 83% rename from src/changelog.md rename to changelog.md index 9e28435..163671d 100644 --- a/src/changelog.md +++ b/changelog.md @@ -4,9 +4,7 @@ description: Get flutter Changelog # Changelog -## Changelog Info - -### 1.0.8 - 2020-02-19 +### 1.0.8 - 2020-02-18 #### Fixed @@ -14,11 +12,11 @@ description: Get flutter Changelog **Added** -* added new component +* added new component - * GFProgressBar + * GFProgressBar - \*\*\*\* + \*\*\*\* ### **1.0.7 - 2020-02-11** @@ -90,19 +88,20 @@ Added few new components 1. Stable version release 2. code refectoring 3. this release includes following stable components -4. GFAvatar -5. GFButton -6. GFIconButton -7. GFButtonBar -8. GFBadge -9. GFButtonBadge -10. GFIconBadge -11. GFCard -12. GFCarousel -13. GFImageOverlay -14. GFListTile -15. GFTabs -16. GFTypography + +* GFAvatar +* GFButton +* GFIconButton +* GFButtonBar +* GFBadge +* GFButtonBadge +* GFIconBadge +* GFCard +* GFCarousel +* GFImageOverlay +* GFListTile +* GFTabs +* GFTypography ### 1.0.0-dev.9 - 2020-01-17 @@ -149,3 +148,4 @@ Added few new components #### Added * initial release with buttons, badge, card, list tile, avatar and many more components. + diff --git a/getting-started.md b/getting-started.md new file mode 100644 index 0000000..ef58739 --- /dev/null +++ b/getting-started.md @@ -0,0 +1,42 @@ +--- +description: >- + GetFlutter es una librería de código abierto de Flutter que integra más de + 1000 componentes UI preconstruidos. La librería es construida para hacer más + rápido y amigable el desarrollo en Flutter. +--- + +# Comenzando + +## Guía de instalación + +Agrega la siguiente dependencia en el archivo pubspec.yaml + +```dart +dependencies: + getflutter: ^1.0.9 +``` + +Puedes instalar esta dependencia con los siguientes comandos: + +con pub: + +```dart +pub get +``` + +con Flutter: + +```dart +flutter pub get +``` + +Tu editor puede soportar `pub get` o `flutter pub get`. Revisa la documentación de tu editor para más información. + +Importalo: + +Ahora puedes importar en el código Dart los componentes necesarios para tu aplicación. + +```dart +import 'package:getflutter/getflutter.dart'; +``` + diff --git a/gf-accordion.md b/gf-accordion.md new file mode 100644 index 0000000..9655473 --- /dev/null +++ b/gf-accordion.md @@ -0,0 +1,77 @@ +--- +description: >- + Tapping a GF Accordion expands or collapses the view of its children. + GFAccordion is used to collapse and expand the content to view the messages or + the description of the given title +--- + +# GF Accordion + +![Accordion](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Accordion_2x_kucB2_qHr.png) + +### Usage + +The simple code of a basic Accordion is as shown below + +```dart + import 'package:getflutter/getflutter.dart'; + + GFAccordian( + title: 'GF Accordion', + content: Text('GetFlutter is an open source library that comes with pre-build 1000+ UI components.' + ) +) +``` + +### Accordion with Icon + +![Accordion with Icon](.gitbook/assets/accordion-with-icon-2x.png) + +Icons are mostly used in Accordion to show whether the content is expanded or collapsed. The most commonly used icons are the up and down arrow icons. But we can use different icons to represent the hide and show event by using **collapsedIcon** and **expandedIcon**. The below code shows the usage: + +```dart +import 'package:getflutter/getflutter.dart'; + +GFAccordian( + title: 'GF Accordion', + content: Text('GetFlutter is an open source library that comes with pre-build 1000+ UI components.'), + collapsedIcon: Icon(Icons.add), + expandedIcon: Icon(Icons.minimize) +), +``` + +### Accordion with trailing Text + +![Accordion with Trailing Text](.gitbook/assets/accordion-with-text-2x.png) + +The trailing part takes any widget like text, icon etc. The below code shows the accordion with the text. + +```dart +import 'package:getflutter/getflutter.dart'; + + GFAccordian( + title: 'GF Accordion', + content: Text('GetFlutter is an open source library that comes with pre-build 1000+ UI components.'), + collapsedIcon: Text('Show'), + expandedIcon: Text('Hide') +), +``` + +### Custom Properties + +| | | +| :--- | :--- | +| **child** | **child** of type \[Widget\] which is alternative to **title**. **title** will get priority over **child** | +| **content** | shows its **children** when it is expanded | +| **contentChild** | **contentChild** of type \[Widget\] which is alternative to **content**. **content** will get priority over **contentChild** | +| **titlebackgroundColor** | changes the **backgroundColor** of the **Accordion** title | +| **collapsedIcon** | type of \[Widget\] when the **Accordion** is collpased | +| **expandedIcon** | type of \[Widget\] when the **Accordion** is expanded | +| **textStyle** | textStyle of type \[textStyle\] applicable to **title** only and not for **child** | +| **titlePadding** | padding used to set for the **Accordion** title | +| **contentPadding** | padding used to set for the **Accordion** description | +| **contentbackgroundColor** | changes the **backgroundColor** of the **Accordion** description | +| **margin** | used to set the margin of the **Accordion** | +| **titleborderColor** | used to change the color of the title **border** | +| **contentborderColor** | used to change the color of the content **border** | + diff --git a/gf-alert.md b/gf-alert.md new file mode 100644 index 0000000..97c4fa4 --- /dev/null +++ b/gf-alert.md @@ -0,0 +1,169 @@ +--- +description: >- + GFAlert is a simple widget which is used to show some information and wait for + the user's action. +--- + +# GF Alert + +![Alert](https://ik.imagekit.io/ionicfirebaseapp/tr:dpr-auto,tr:w-auto/docs/Alerts_2x_BDFQKkxzq.png) + + + +### + +### Usage + +**GFAlert** should be wrapped inside the **GFFloating** Widget.The **child** of the **GFFloatingWidget** takes **GFAlert** as its argument and the **body** takes any kind of widgets. The Alert code is as shown below. + +```dart +import 'package:getflutter/getflutter.dart'; + + return Scaffold( + body:GFFloatingWidget( + child:GFAlert( + title: 'Welcome !', + content: 'Get Flutter is one of the largest Flutter open-source UI library for mobile or web apps with 1000+ pre-built reusable widgets.', + bottombar: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + GFButton( + onPressed: (){ + setState(() { + showalert=false; + }); + }, + shape: GFButtonShape.pills, + icon: Icon(Icons.keyboard_arrow_right, color: GFColors.getGFColor(GFColor.white),), + position: GFPosition.end, + text: 'Learn More',) + ], + ), + ) + body:Text('body or any kind of widget here..') + ) +) +``` + +### Alert with multiple buttons + +![Alert with Multiple Buttons](.gitbook/assets/basic-alert-2x.png) + +Alert can have two or more buttons for call of action in the **bottombar** of the alert widget. The code below shows the multiple buttons + +```dart +import 'package:getflutter/getflutter.dart'; + + return Scaffold( + body:GFFloatingWidget( + child:GFAlert( + title: 'Welcome !', + content: 'Get Flutter is one of the largest Flutter open-source UI library for mobile or web apps with 1000+ pre-built reusable widgets.', + bottombar: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + GFButton( + onPressed: (){ + setState(() { + showalert=false; + }); + }, + shape: GFButtonShape.pills, + child: Text('Skip',style: TextStyle(color: Colors.black)), + SizedBox( + width:5 + ), + GFButton( + onPressed: (){ + setState(() { + showalert=false; + }); + }, + shape: GFButtonShape.pills, + icon: Icon(Icons.keyboard_arrow_right, color: GFColors.getGFColor(GFColor.white),), + position: GFPosition.end, + text: 'Learn More',) + ], + ), + ) + body:Text('body or any kind of widget here..') + ) +) +``` + +### Types of Alert + +There are the types of alerts ie , `basic` , `rounded` and `fullWidth` . The default alert is a basic alert. The below code shows the **rounded** alert. For **fullWidth** alert replace **rounded** with **fullWidth** + +```dart +import 'package:getflutter/getflutter.dart'; + + return Scaffold( + body:GFFloatingWidget( + child:GFAlert( + title: 'Welcome !', + content: 'Get Flutter is one of the largest Flutter open-source UI library for mobile or web apps with 1000+ pre-built reusable widgets.', + type: GFAlertType.rounded, + bottombar: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + GFButton( + onPressed: (){ + setState(() { + showalert=false; + }); + }, + shape: GFButtonShape.pills, + child: Text('Skip',style: TextStyle(color: Colors.black)), + SizedBox( + width:5 + ), + GFButton( + onPressed: (){ + setState(() { + showalert=false; + }); + }, + shape: GFButtonShape.pills, + icon: Icon(Icons.keyboard_arrow_right, color: GFColors.getGFColor(GFColor.white),), + position: GFPosition.end, + text: 'Learn More',) + ], + ), + ) + body:Text('body or any kind of widget here..') + ) +) +``` + +### Positioning of Alert + +Alerts can be positioned accordingly inside the **GFFloating** Widget. The positioning takes two parameters ie, **horizontalPosition** and **verticalPosition**. The usage of these is shown below. + +```dart +import 'package:getflutter/getflutter.dart'; + +body:GFFloatingWidget( + horizontalPosition:40.0, + verticalPosition:20.0, + child:GFAlert( + title: 'Welcome!', + ), + body:Text('body or any kind of widget here..') +) +``` + + + +### Custom Properties + +| | | +| :--- | :--- | +| **child** | **child** of type \[Widget\] which is alternative to **title**. **title** will get priority over **child** | +| **contentChild** | **contentchild** of type \[Widget\] which is alternative to **content**. **content** will get priority over **contentchild** | +| **titleTextStyle** | changes the style of the **title** not for the **child** | +| **backgroundColor** | used to change the backgroundColor of the GFAlert | +| **contentTextStyle** | changes the style of the **content** not for the **contentChild** | +| **width** | used to control the width of the **Alert** | +| **alignment** | used to align the **title or content** to desired position | + diff --git a/gf-appbar.md b/gf-appbar.md new file mode 100644 index 0000000..31bd4c1 --- /dev/null +++ b/gf-appbar.md @@ -0,0 +1,302 @@ +--- +description: >- + GFAppbar is a top action bar, which provides a dedicated space with visual + structure and interactive elements. +--- + +# GF Appbar + +![GF App Bar](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Appbar_-3bDD0z8f.png) + + + +An app bar consists of a toolbar and potentially other widgets, such as a GFTabBar and FlexibleSpaceBar. The GFAppBar displays the toolbar widgets, leading, title, and actions, above. + +### Usage + +The simple code of a basic GFAppbar is as shown below. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFAppBar( + leading: GFIconButton( + icon: Icon( + Icons.message, + color: Colors.white, + ), + onPressed: () {}, + type: GFButtonType.transparent, + ), + title: Text("GF Appbar"), + actions: [ + GFIconButton( + icon: Icon( + Icons.favorite, + color: Colors.white, + ), + onPressed: () {}, + type: GFButtonType.transparent, + ), + ], +), +``` + +### GFAppbar with SearchBar + +![App Bar with Search](.gitbook/assets/appbar-3.png) + +If searchBar is true, it displays search bar textfield in the title space of the appbar with leading, trailing options. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFAppBar( + leading: GFIconButton( + icon: Icon( + Icons.message, + color: Colors.white, + ), + onPressed: () {}, + type: GFButtonType.transparent, + ), + searchBar: true, + title: Text("GF Appbar"), + actions: [ + GFIconButton( + icon: Icon( + Icons.favorite, + color: Colors.white, + ), + onPressed: () {}, + type: GFButtonType.transparent, + ), + ], +), +``` + +### GFAppbar with Segmented Tabs + +**Segmented** **tabs** can also be used inside the **Appbar**. In the **title** field of the Appbar just define the Segmented tab code and the work will be done. Below code shows a simple segmented tab inside Appbar + +```dart +import 'package:getflutter/getflutter.dart'; + +TabController tabController; + @override + void initState() { + super.initState(); + tabController = TabController(length: 3, vsync: this); + } + + @override + void dispose() { + tabController.dispose(); + super.dispose(); + } + + return Scaffold( + appBar: GFAppBar( + backgroundColor: GFColors.getGFColor(GFColor.dark), + title: GFSegmentTabs( + tabController: tabController, + tabBarColor: GFColors.getGFColor(GFColor.light), + labelColor: GFColors.getGFColor(GFColor.white), + unselectedLabelColor: GFColors.getGFColor(GFColor.dark), + indicator: BoxDecoration( + color: GFColors.getGFColor(GFColor.dark), + ), + indicatorPadding: EdgeInsets.all(8.0), + indicatorWeight: 2.0, + border: Border.all(color: Colors.white, width: 1.0), + initialIndex: 0, + length: 3, + tabs: [ + Text( + "Tab1", + ), + Text( + "Tab2", + ), + Text( + "Tab3", + ), + ], + ), + ), + body: GFTabBarView(controller: tabController, children: [ + Center( + child: Text('Tab 1'), + ), + Center( + child: Text('Tab 2'), + ), + Center( + child: Text('Tab 3'), + ), + ]), +); +``` + +Look and feel of the **GFAppbar search bar** can be customized using the GFAppbar properties. + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **searchBar** | If true, displays search bar in the title space | +| **searchHintText** | It takes text to displays the search bar hint text | +| **searchHintStyle** | It styles the \[searchHintText\] | +| **searchTextStyle** | It styles the search text | +| **searchBarColorTheme** | It defines the search bar icons color theme | +| **searchController** | Controls the text being edited. If null, this widget will create its own \[TextEditingController\] | +| **onChanged** | Called when the user initiates a change to the TextField's value: when they have inserted or deleted text | +| **onSubmitted** | Called when the user indicates that they are done editing the text in the field. | +| **onTap** | Called for each distinct tap except for every second tap of a double tap. If the text field is created with enabled false, taps will not be recognized. | + +Look and feel of the **GFAppbar** can be customized using the GFAppbar properties. + +### Custom Properties + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
leading + A widget to display before the [title]
automaticallyImplyLeading + Controls whether we should try to imply the leading widget if null. If + true and [leading] is null, automatically try to deduce what the leading + widget should be. If false and [leading] is null, leading space is given + to [title]. If leading widget is not null, this parameter has no effect.
title + The primary widget displayed in the app bar. Typically a [Text] widget + containing a description of the current contents of the app.
actions + Widgets to display after the [title] widget. Typically these widgets are + [IconButton]s representing common operations. For less common operations, + consider using a [PopupMenuButton] as the last action.
flexibleSpace + +

This widget is stacked behind the toolbar and the tab bar. It's height + will

+

be the same as the app bar's overall height.

+
bottom + This widget appears across the bottom of the app bar. Typically a [TabBar]. + Only widgets that implement [PreferredSizeWidget] can be used at the bottom + of an app bar.
elevation + The z-coordinate at which to place this app bar relative to its parent. + This controls the size of the shadow below the app bar. The value is non-negative.
shape + The material's shape as well its shadow. A shadow is only displayed + if the [elevation] is greater than zero.
backgroundColor + The color to change background color of the app bar's material.
brightness + The brightness of the app bar's material. Typically this is set along + with [backgroundColor], [iconTheme], [textTheme].
iconTheme + The color, opacity, and size to use for app bar icons. Typically this + is set along with [backgroundColor], [brightness], [textTheme].
actionsIconTheme + The color, opacity, and size to use for the icons that appear in the appbar's + [actions]. This should only be used when the [actions] should be themed + differently than the icon that appears in the app bar's [leading] + widget.
textTheme + The typographic styles to use for text in the app bar. Typically this + is set along with [brightness] [backgroundColor], [iconTheme].
primary + Whether this app bar is being displayed at the top of the screen. If true, + the app bar's toolbar elements and [bottom] widget will be padded + on top by the height of the system status bar. The layout of the [flexibleSpace] + is not affected by the [primary] property.
centerTitle + Whether the title should be centered. Defaults to being adapted to the + current [TargetPlatform].
titleSpacing + +

The spacing around [title] content on the horizontal axis. This spacing + is applied even if there is no [leading] content or [actions]. If you want

+

[title] to take all the space available, set this value to 0.0.

+
toolbarOpacity + How opaque the toolbar part of the app bar is. A value of 1.0 is fully + opaque, and a value of 0.0 is fully transparent.
bottomOpacity + How opaque the bottom part of the app bar is. A value of 1.0 is fully + opaque, and a value of 0.0 is fully transparent.
preferredSize + A size whose height is the sum of [kToolbarHeight] and the [bottom] widget's + preferred height. [Scaffold] uses this size to set its app bar's height.
searchBar + If true, displays search bar in the title space
+ diff --git a/gf-avatar.md b/gf-avatar.md new file mode 100644 index 0000000..b0c8e84 --- /dev/null +++ b/gf-avatar.md @@ -0,0 +1,70 @@ +--- +description: >- + GFAvatar is a Flutter Avatar Widget that typically represents the user's + profile image. It comes with different shapes. +--- + +# GF Avatar + +![Avatar](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Avatars_2x_cM1srTq6w.png) + +Avatar + +### Circular Avatar + +![Circular Avatar](.gitbook/assets/circular-avatars-2x.png) + +GFAvatar comes with different shapes , in which one of the default shape is circle. To place the image inside the avatar, image should be given in `backgroundImage` property. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFAvatar( + backgroundImage:NetworkImage(AvatarUrl); +) +``` + +### Standard Avatar + +![Standard Avatar](.gitbook/assets/slightly-rounded-corners-2x.png) + +Standard GFAvatar is a avatar shape which has a slightly rounded corners. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFAvatar( + backgroundImage:NetworkImage(AvatarUrl); + shape: GFAvatarShape.standard +) +``` + +### Square Avatar + +![Square Avatar](.gitbook/assets/square-2x.png) + +Square GFAvatar is a avatar shape which represents a square + +```dart +import 'package:getflutter/getflutter.dart'; + +GFAvatar( + backgroundImage:NetworkImage(AvatarUrl); + shape: GFAvatarShape.square +) +``` + +### Custom Properties + +| | | +| :--- | :--- | +| **child** | type of \[Widget\], which can have text , icon etc | +| **backgroundColor** | GFColor or Color to fill the background of avatar | +| **foregroundColor** | GFColor or Color to change the textColor inside the avatar | +| **radius** | size of the avatar | +| **minRadius** | minimum size of the avatar | +| **maxRadius** | maximun size of the avatar | +| **size** | size of the avatar i.e `GFSize.large, GFSize.medium, GFSize.small` | +| **shape** | shape of the avatar i.e, `GFAvatarShape.standard, GFAvatarShape.circle, GFAvatarShape.square` | +| **borderRadius** | extra radius to avatar shapes, not applicable to circular avatar | + diff --git a/gf-badge.md b/gf-badge.md new file mode 100644 index 0000000..27c474b --- /dev/null +++ b/gf-badge.md @@ -0,0 +1,355 @@ +--- +description: >- + Badge contain a number or other characters. They can be used as a notification + that there are additional items associated with an element and indicate how + many items there are. +--- + +# GF Badge + +![Badge](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Badges_2x_08i8g5F_w.png) + +Badges + +Typically GFBadge takes text widget as child, to display number or characters inside badges. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFBadge( + onPressed: (){}, + child: Text("12"), +), +``` + +### Size + +Badge size can be varied using **size** property, which specifies the size of the badge. Default badge size set to `GFSize.medium`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFBadge( + onPressed: (){}, + child: "primary", + size: GFSize.small, + ), +``` + +### Shape + +Shape of Badge can be changed by setting property **shape** to `GFIconButtonShape.circle`. Default shape of the Badge set to `GFIconButtonShape.standard` which gives square shaped IconButton with slightly rounded corners. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFBadge( + onPressed: (){}, + child: "primary", + shape: GFIconButtonShape.pills, + ), +``` + +| | | +| :--- | :--- | +| **Description** | The GFBadge Shape | +| **Attribute** | shape | +| **Type** | `GFBadgeShape.standard, GFBadgeShape.square, GFBadgeShape.pills, GFBadgeShape.circle` | +| **Default** | `GFButtonShape.standard` | + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **child** | child of type \[widget\] alternative to text | +| **textcolor** | the color to use for this badge;s text | +| **textStyle** | defines the styling of the text | +| **border** | defines the border side | +| **bordershape** | defines the shape of the border | +| **color** | GFColor is used to change the background of the button. | + +## Button with Badges + +Badges can be used with button to display, the badges with label and GFButton properties. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButtonBadge( + onPressed: () {}, + text: 'primary', + icon: GFBadge( + child: Text("12"), + ), +), +``` + +Default button **shape** set to `GFButtonShape.standard` so that we will able to get standard shaped button with solid background color with slightly rounded corners. + +### Solid Button Badge + +![Solid Button Badge](.gitbook/assets/solid-badge-buttons-2x.png) + +By default, button **type** set to `GFType.solid` so, we able to get buttons have a solid background color with slightly rounded corners. + +The callback that is called when the button is tapped. By adding callback to **onPressed** enables the button. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButtonBadge( + onPressed: (){}, + text: "primary", + icon: GFBadge( + child: Text("12"), + ), +), +``` + +### Disabled Button Badge + +![Disabled Button Badge](.gitbook/assets/disabled-badge-buttons-2x.png) + +If this callback and **onPressed** are null, then the button will be disabled. Default GFButton will be disabled because, **onPressed** set to null. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButtonBadge( + onPressed: null, + text: "primary", + icon: GFBadge( + child: Text("12"), + ), + ), +``` + +### Button Badge Type \(Outline Button\) + +![Outline Button Badge](.gitbook/assets/outline-badge-buttons-2x%20%281%29.png) + +Outline Button describes as the Button with a transparent background and a visible border. This button can be easily get in GFButton by adding **type** as **`GFType.outline`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButtonBadge( + onPressed: (){}, + text: "primary", + icon: GFBadge( + child: Text("12"), + ), + type: GFType.outline, + ), +``` + +### Button Badge Shape \(Pills Button\) + +We will able to get pills shaped button with solid background color with rounded corners by adding property **shape** with `GFButtonShape.pills` . + +```dart +import 'package:getflutter/getflutter.dart'; + + GFButtonBadge( + onPressed: (){}, + text: "primary", + icon: GFBadge( + child: Text("12"), + ), + shape: GFButtonShape.pills, + ), +``` + +### Button Badge Size + +Button size can be varied using **size** property, which specifies the size of the button. Default button size set to `GFSize.medium`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButtonBadge( + onPressed: (){}, + text: "primary", + icon: GFBadge( + child: Text("12"), + ), + size: GFSize.small, + ), +``` + +## Properties + +GF Button Badge can be styled with several attributes to look a specific way. Each and every attribute is described below. + +### Color + +GFColor is used to change the background of the button. + +| | | +| :--- | :--- | +| **Description** | The color to use from application's color pallete | +| **Attribute** | color | +| **Type** | `GFColor` | +| **Default** | `GFColor.primary` | + +### Size + +| | | +| :--- | :--- | +| **Description** | The GFButtonBadge Size | +| **Attribute** | size | +| **Type** | `GFSize.large, GFSize.medium, GfSize.small` | +| **Default** | `GFSize.medium` | + +### Shape + +| | | +| :--- | :--- | +| **Description** | The GFButtonBadge Shape | +| **Attribute** | shape | +| **Type** | `GFButtonShape.standard, GFButtonShape.square, GFButtonShape.pills` | +| **Default** | `GFButtonShape.standard` | + +### Type + +| | | +| :--- | :--- | +| **Description** | The GFButtonBadge Type | +| **Attribute** | type | +| **Type** | `GFType.solid, GFType.outline, GFType.outline2x, GFType.transparent` | +| **Default** | `GFType.solid` | + +### Position + +| | | +| :--- | :--- | +| **Description** | The GFButtonBadge Position | +| **Attribute** | position | +| **Type** | `GFPosition.start, GFPosition.end` | +| **Default** | `GFPosition.start` | + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **onPressed** | callback i.e, called when the button is tapped | +| **onLongPressed** | callback i.e, called when the button is long-pressed | +| **text** | text of type \[string\] to describe button's label. text will be priority over child | +| **icon** | icon of type \[widget\] to describe button's label with icon | +| **child** | child of type \[widget\] alternative to text | +| **textcolor** | the color to use for this button's text when the button is enabled | +| **textStyle** | defines the styling of the text | +| **disabledColor** | the fillcolor of the button when the button is disabled | +| **disabledTextColor** | the color to use for this button's text when the button is disabled | +| **borderSide** | defines the border side | +| **bordershape** | defines the shape of the border | +| **buttonBoxShadow** | if `true,` default boxShadow appears around button. | +| **boxShadow** | defines the boxShadow | +| **fullWidthButton** | if `true,` defines the full width of the button. | +| **blockButton** | if `true`, defines the block button. | +| **padding** | defines internal padding of the button | +| **focusColor** | fillColor of the button when it has the input focused | +| **hoverColor** | fillColor of the button when the pointer is hovered over it | +| **splashColor** | indicates that the button has been touched | +| **highlightColor** | indicates that the button is actively being pressed | + +## Icon Button with Badge + +Badges can be used with button to display, the badges with icons and GFIconButton properties. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconBadge( + child: GFIconButton( + onPressed: (){}, + icon: Icon(Icons.ac_unit), + ), + counterChild: GFBadge( + child: Text("12"), + ), +), +``` + +Default icon button **shape** set to `GFButtonShape.standard` so that we will able to get standard shaped button with solid background color with slightly rounded corners. + +### IconButton Badge Size + +Button size can be varied using **size** property, which specifies the size of the button. Default button size set to `GFSize.medium`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconBadge( + child: GFIconButton( + onPressed: (){}, + icon: Icon(Icons.ac_unit), + size: GFSize.large, + ), + counterChild: GFBadge( + child: Text("12"), + ), +), +``` + +### IconButton Badge Type + +Button type can be changed using property **type** by setting to `GFType.outline`. Default type of the IconButton will be `GFType.solid`. + +```dart +import 'package:getflutter/getflutter.dart'; + + GFIconBadge( + child: GFIconButton( + onPressed: (){}, + icon: Icon(Icons.ac_unit), + type: GFType.outline, + ), + counterChild: GFBadge( + child: Text("12"), + ), +), +``` + +### IconButton Badge Shape + +Shape of Icon Button can be changed by setting property **shape** to `GFIconButtonShape.circle`. Default shape of the IconButton set to `GFIconButtonShape.standard` which gives square shaped IconButton with slightly rounded corners. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconBadge( + child: GFIconButton( + onPressed: (){}, + icon: Icon(Icons.ac_unit), + shape: GFIconButtonShape.pills, + ), + counterChild: GFBadge( + child: Text("12"), + ), +), + + +``` + +| | | +| :--- | :--- | +| **Description** | The GFIconButton Shape | +| **Attribute** | shape | +| **Type** | `GFIconButtonShape.standard, GFIconButtonShape.square, GFIconButtonShape.pills, GFIconButtonShape.circle` | +| **Default** | `GFIconButtonShape.standard` | + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **child** | child of type \[widget\] alternative to text | +| **textcolor** | the color to use for this badge;s text | +| **textStyle** | defines the styling of the text | +| **borderSide** | defines the border side | +| **bordershape** | defines the shape of the border | +| **color** | GFColor is used to change the background of the button. | +| **iconSize** | defines the size of icon | +| **buttonBoxShadow** | if `true,` default boxShadow appears around button. | +| **boxShadow** | defines the boxShadow | + diff --git a/gf-button/README.md b/gf-button/README.md new file mode 100644 index 0000000..a08cd53 --- /dev/null +++ b/gf-button/README.md @@ -0,0 +1,111 @@ +--- +description: >- + GF Button es un componente Button de Flutter que viene con más de 100 botones + preconstruidos, con interminables combinaciones de colores que puedes utilizar + directamente en tu proyecto. +--- + +# GF Button + +![Variantes de botones Flutter](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Gf_buttons_2x_aotfII9ZS5.png) + +GF Button es un elemento clickeable que puede ser utilizado para eventos del click, como funciones, ruteo, autenticaciones con redes sociales, envío de formularios, o en cualquier lugar que se necesite una funcionalidad simple y estándar de un botón. Los botones tienen una amplia área de uso y pueden ser utilizados también con cualquier otro widget. + +## Uso + +Podemos obtener un simple botón estándar usando el código a continuación. + +```dart +GFButton( + onPressed: (){}, + text:"primary" +), +``` + +### Botón deshabilitado + +Para utilizar un botón deshabilitado definimos por defecto el valor null al atributo onPressed del GFButton, lo cual deshabilita el botón. + +```dart +GFButton( + onPressed: null, + text:"primary" +), +``` + +## Propiedades + +Se pueden utilizar muchos atributos para darle estilo a los botones GFButton y que luzcan de una manera específica. Cada uno de los atributos se describe a continuación. + +### Color + +GFColor es utilizado para cambiar el color de fondo del botón. + +| | | +| :--- | :--- | +| **Descripción** | El color a utilizar de la paleta de colores de la aplicación | +| **Atributo** | color | +| **Tipo** | `GFColors` | +| **Default** | `GFColors.PRIMARY` | + +### Tamaño + +| | | +| :--- | :--- | +| **Descripción** | El tamaño del botón | +| **Atributo** | size | +| **Tipo** | `GFSize.LARGE, GFSize.MEDIUM, GFSize.SMALL` | +| **Default** | `GFSize.MEDIUM` | + +### Forma + +| | | +| :--- | :--- | +| **Descripción** | La forma del botón | +| **Atributo** | shape | +| **Tipo** | `GFButtonShape.standard, GFButtonShape.square, GFButtonShape.pills` | +| **Default** | `GFButtonShape.standard` | + +### Tipo + +| | | +| :--- | :--- | +| **Descripción** | El tipo del botón | +| **Atributo** | type | +| **Tipo** | `GFButtonType.solid, GFButtonType.outline, GFButtonType.outline2x, GFButtonType.transparent` | +| **Default** | `GFButtonType.solid` | + +### Posición + +| | | +| :--- | :--- | +| **Descripción** | La posición del icono del botón | +| **Atributo** | position | +| **Tipo** | `GFPosition.start, GFPosition.end` | +| **Default** | `GFPosition.start` | + +### Propiedades personalizadas + +| Nombre | Descripción | +| :--- | :--- | +| **onPressed** | callback disparado cuando es tocado el botón | +| **onLongPress** | callback disparado cuando el botón es presionado un poco más tiempo | +| **text** | describe la etiqueta del botón con un texto. Tiene prioridad sobre la propiedad child | +| **icon** | describe la etiqueta del botón con un ícono | +| **child** | describe la etiqueta del botón con un Widget. Es una alternativa al atributo text | +| **textColor** | el color del texto del botón cuando este está habilitado | +| **textStyle** | define el estilo del texto | +| **disabledColor** | el color de relleno del botón cuando está deshabilitado | +| **disabledTextColor** | el color del texto del botón cuando este está deshabilitado | +| **borderSide** | define el borde del botón | +| **borderShape** | define la forma del borde del botón | +| **buttonBoxShadow** | si es `true` muestra el sombreado por defecto | +| **boxShadow** | define el sombreado del botón | +| **fullWidthButton** | si es `true` muestra el botón ocupando el ancho máximo | +| **blockButton** | si es `true` define el botón como un bloque | +| **padding** | define el padding del botón | +| **focusColor** | color del botón cuando tiene el foco | +| **hoverColor** | color del botón cuando se pasa el puntero por encima | +| **splashColor** | color del botón cuando se presiona | +| **highlightColor** | color del botón cuando se mantiene presionado | + diff --git a/gf-button/icon-button.md b/gf-button/icon-button.md new file mode 100644 index 0000000..86eb2e3 --- /dev/null +++ b/gf-button/icon-button.md @@ -0,0 +1,263 @@ +--- +description: >- + Un botón con ícono tiene la funcionalidad estándar de un botón sólido con una + etiqueta y un ícono. +--- + +# Botón con ícono + +![Botón con ícono](https://ik.imagekit.io/ionicfirebaseapp/docs/buttons/tr:dpr-auto,tr:w-auto/Icon_buttons_2x_OTNJg6egxk.png) + +## Botón con ícono + +El atributo **shape** está definido por defecto como `GFButtonShape.standard`, por lo tanto, obtendremos un botón estándar con un sólido color de fondo y bordes ligeramente redondeados. + +### Botón deshabilitado + +![Botón deshabilitado](../.gitbook/assets/disabled-buttons-2x.png) + +El atributo **onPressed** de un GFIconButton es null por defecto, de esta forma obtenemos un botón deshabilitado. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconButton( + onPressed: null, + text:"primary" +), +``` + +Se pueden utilizar muchos atributos para darle estilo a los botones GFIconButton y que luzcan de una manera específica. Cada uno de los atributos se describe a continuación. + +### Botón sólido con ícono + +![Botón sólido con ícono](../.gitbook/assets/solid-icon-button-2x.png) + +El atributo **type** está definido por defecto como `GFButtonType.solid`, por lo tanto, obtendremos un botón con un sólido color de fondo y bordes ligeramente redondeados. + +El callback disparado cuando se presiona el botón, definido en el atributo **onPressed**, habilita el botón. + +```dart +import 'package:getflutter/getflutter.dart'; + + GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + ), +``` + +### Botón Outline con ícono + +![Botón Outline con ícono](../.gitbook/assets/outline-icon-button-2x-1.png) + +Outline Icon Button es un botón con fondo transparente y borde visible. Podemos obtener este botón facilmente definiedo el atributo **type** como **`GFButtonType.outline`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + type: GFButtonType.outline, + ), +``` + +### Botón Outline 2x con ícono + +![Botón Outline 2x con ícono](../.gitbook/assets/outline-2x-icon-button-2x.png) + +Outline 2x Icon Button es un botón con fondo transparente y borde visible con un ancho de 2x. Podemos obtener este botón facilmente definiedo el atributo **type** como **`GFButtonType.outline2x`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + type: GFButtonType.outline2x, + ), +``` + +### Botón transparente con ícono + +![Botón transparente con ícono](../.gitbook/assets/transparent-icon-button-2x.png) + +En un GFIconButton, definiendo la propiedad **type** como **`GFButtonType.transparent`** obtenemos un botón transparente. Por defecto, el valor de **type** es **`GFButtonType.solid`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + type: GFButtonType.transparent, + ), +``` + +### Botón píldora con ícono + +![Botón Pill con ícono](../.gitbook/assets/pills-icon-button-2x.png) + +Podemos obtener un botón con forma de píldora y un color sólido de fondo con bordes redondeados definiedo la propiedad **shape** como **`GFButtonShape.pills`**. + +```dart +import 'package:getflutter/getflutter.dart'; + + GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + shape: GFButtonShape.pills, + ), +``` + +### Botón cuadrado con ícono + +![Botón cuadrado con ícono](../.gitbook/assets/square-icon-button-2x.png) + +Podemos obtener un botón cuadrado con un color sólido de fondo y sin bordes redondeados definiedo la propiedad **shape** como **`GFButtonShape.square`**. + +```dart +import 'package:getflutter/getflutter.dart'; + + GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + shape: GFButtonShape.square, + ), +``` + +### Botón bloque con ícono + +![Botón bloque con ícono](../.gitbook/assets/block-icon-button-2x.png) + +Block Button especifica cuan ancho debe ser el botón. Definiendo **blockButton** como `true`, el botón será un bloque de ancho máximo con bordes redondeados. Por defecto **blockButton** está definido como `false`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + type: GFButtonType.solid, + blockButton: true, + ), +``` + +### Botón de ancho máximo con ícono + +![Botón de ancho máximo con ícono](../.gitbook/assets/fullwidth-icon-button-2x-1.png) + +Full Width Button especifica cuan ancho debe ser el botón. Definiendo **fullWidthButton** como `true`, el botón será un botón de ancho máximo con bordes redondeados y sin margen a los costados. Por defecto **fullWidthButton** está definido como `false`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + type: GFButtonType.solid, + fullWidthButton: true, + ), +``` + +### Tamaño del botón con ícono + +El tamaño del botón puede ser modificado utilizando la propiedad **size**. El valor por defecto es `GFSize.MEDIUM`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + size: GFSize.SMALL, + ), +``` + +## Botones solo con íconos + +Los botones solo con íconos tienen la funcionalidad estándar de un botón sólido, y tienen un ícono como hijo. + +El atributo **shape** está definido por defecto como `GFButtonShape.standard`, por lo tanto, obtendremos un botón con forma estándar con un sólido color de fondo y bordes ligeramente redondeados. El atributo **type** está definido por defecto como `GFButtonType.solid`, por lo tanto, obtendremos un botón con un sólido color de fondo y bordes ligeramente redondeados. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconButton( + onPressed: (){}, + icon: Icon(Icons.share), + ), +``` + +### Tamaño + +El tamaño del botón puede ser modificado utilizando la propiedad **size**. El valor por defecto es `GFSize.MEDIUM`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconButton( + onPressed: (){}, + text: "primary", + size: GFSize.SMALL, + ), +``` + +### Tipo + +El tipo del botón puede ser cambiado definiedo la propiedad **type** como `GFButtonType.outline`. El valor por defecto es `GFButtonType.solid`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconButton( + onPressed: (){}, + text: "primary", + type: GFButtonType.outline, + ), +``` + +### Forma + +La forma del botón puede ser cambiada definiendo la propiedad **shape** to `GFIconButtonShape.circle`. El valor por defecto es `GFIconButtonShape.standard`, con lo cual obtenemos un botón cuadrado con los bordes ligeramente redondeados. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconButton( + onPressed: (){}, + text: "primary", + shape: GFIconButtonShape.pills, + ), +``` + +| | | +| :--- | :--- | +| **Descripción** | La forma del botón | +| **Atributo** | shape | +| **Tipo** | `GFIconButtonShape.standard, GFIconButtonShape.square, GFIconButtonShape.pills, GFIconButtonShape.circle` | +| **Default** | `GFIconButtonShape.standard` | + +### Propiedades personalizadas + +| Nombre | Descripción | +| :--- | :--- | +| **child** | hijo del tipo \[widget\] alternativa a la propiedad text | +| **textColor** | el color a usar para el texto de esta insignia | +| **textStyle** | define el estilo del texto | +| **borderSide** | define el borde del botón | +| **borderShape** | define la forma del borde | +| **color** | GFColor se usa para cambiar el fondo del botón | +| **iconSize** | define el tamaño del ícono | +| **buttonBoxShadow** | si es `true` muestra el sombreado por defecto del botón | +| **boxShadow** | define el sombreado del botón | + diff --git a/gf-button/pills-button.md b/gf-button/pills-button.md new file mode 100644 index 0000000..88ca454 --- /dev/null +++ b/gf-button/pills-button.md @@ -0,0 +1,141 @@ +--- +description: Un botón píldora luce como un botón sólido con bordes redondeados. +--- + +# Botón píldora + +![Botón píldora](https://ik.imagekit.io/ionicfirebaseapp/docs/buttons/tr:dpr-auto,tr:w-auto/Pills_button-solid_2x_ckYKR31F62.png) + +Para obtener un botón con forma de píldora con un color de fondo sólido y bordes redondeados solo debemos agregar la propiedad **shape** con el valor `GFButtonShape.pills` . + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.pills, + ), +``` + +## Botón sólido + +![Botón sólido](../.gitbook/assets/pills-solid-button-2x.png) + +El atributo **type** está definido por defecto como `GFButtonType.solid`, por lo tanto, obtendremos un botón con forma de píldora con un sólido color de fondo y bordes redondeados. + +El callback disparado cuando se presiona el botón, definido en el atributo **onPressed**, habilita el botón. + +```dart +import 'package:getflutter/getflutter.dart'; + + GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.pills, + ), +``` + +### Botón deshabilitado + +![Botón deshabilitado](../.gitbook/assets/pills-disabled-2x.png) + +Si el atributo **onPressed** es null, entonces el botón estará deshabilitado. Por defecto, GFButton estará deshabilitado porque **onPressed** es null. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: null, + text: "primary", + shape: GFButtonShape.pills, + ), +``` + +### Botón bloque + +![Botón bloque](../.gitbook/assets/block-buttons-2x.png) + +Block Button especifica cuan ancho debe ser el botón. Definiendo **blockButton** como `true`, el botón será un bloque de ancho máximo con bordes redondeados. Por defecto **blockButton** está definido como `false`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.pills, + blockButton: true, + ), +``` + +### Botón de ancho máximo + +![Botón de ancho máximo](../.gitbook/assets/full-width-2x.png) + +Full Width Button especifica cuan ancho debe ser el botón. Definiendo **fullWidthButton** como `true`, el botón será un botón de ancho máximo con bordes redondeados y sin margen a los costados. Por defecto **fullWidthButton** está definido como `false`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.pills, + fullWidthButton: true, + ), +``` + +### Tamaño del botón + +El tamaño del botón puede ser modificado utilizando la propiedad **size**. El valor por defecto es `GFSize.MEDIUM`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.pills, + size: GFSize.SMALL, + ), +``` + +## Botón Outline + +![Botón Outline](../.gitbook/assets/pills-outline-2x.png) + +Outline Button es un botón con fondo transparente y borde visible. Podemos obtener este botón facilmente definiedo el atributo **type** como **`GFButtonType.outline`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.pills, + type: GFButtonType.outline, + ), +``` + +Las propiedades antes mencionadas, como `size`, `blockButton`, `fullWidthButton`, habilitar y deshabilitar botones, funcionan también con **Outline Button**. + +## Botón Outline 2x + +![Botón Outline 2x](../.gitbook/assets/pills-outline-2x-2x.png) + +Outline2x Button es un botón con fondo transparente y borde visible con un ancho de 2x. Podemos obtener este botón facilmente definiedo el atributo **type** como **`GFButtonType.outline2x`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.pills, + type: GFButtonType.outline2x, + ), +``` + +Las propiedades antes mencionadas, como `size`, `blockButton`, `fullWidthButton`, habilitar y deshabilitar botones, funcionan también con **Outline2x Button**. + diff --git a/gf-button/social-button.md b/gf-button/social-button.md new file mode 100644 index 0000000..d465cb2 --- /dev/null +++ b/gf-button/social-button.md @@ -0,0 +1,245 @@ +--- +description: >- + Los botones sociales son botones estándar, sólidos, con una etiqueta y/o con + un ícono. +--- + +# Botón social + +![Social Button](https://ik.imagekit.io/ionicfirebaseapp/docs/buttons/tr:dpr-auto,tr:w-auto/Social_Buttons_2x_qhe5emJKB.png) + +## Botón social full + +El atributo **shape** está definido por defecto como `GFButtonShape.standard`, por lo tanto, obtendremos un botón estándar con un sólido color de fondo y bordes ligeramente redondeados. + +### Botón social sólido + +![Botón social sólido](../.gitbook/assets/solid-social-button-2x.png) + +El atributo **type** está definido por defecto como `GFButtonType.solid`, por lo tanto, obtendremos un botón con sólido color de fondo y bordes ligeramente redondeados. + +El callback disparado cuando se presiona el botón, definido en el atributo **onPressed**, habilita el botón. + +```dart + import 'package:getflutter/getflutter.dart'; + + GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + ), +``` + +### Botón social deshabilitado + +![Botón social deshabilitado](../.gitbook/assets/disabled-buttons-2x-1.png) + +Si el atributo **onPressed** es null, entonces el botón estará deshabilitado. Por defecto, GFButton estará deshabilitado porque **onPressed** es null. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: null, + text: "primary", + icon: Icon(Icons.share), + ), +``` + +### Botón social Outline + +![Botón social Outline](../.gitbook/assets/outline-social-button-2x-1.png) + +Outline Button es un botón con fondo transparente y borde visible. Podemos obtener este botón facilmente definiedo el atributo **type** como **`GFButtonType.outline`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + type: GFButtonType.outline, + ), +``` + +### Botón social Outline 2x + +![Botón social Outline 2x](../.gitbook/assets/outline-2x-social-button-2x.png) + +Outline2x Button es un botón con fondo transparente y borde visible con un ancho de 2x. Podemos obtener este botón facilmente definiedo el atributo **type** como **`GFButtonType.outline2x`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + type: GFButtonType.outline2x, + ), +``` + +### Botón social transparente + +![Botón social transparente](../.gitbook/assets/transparent-social-button-2x.png) + +Definiendo el atributo **type** como **`GFButtonType.transparent`** obtenemos un botón transparente. Por defecto, GFButton define el atributo **type** como `GFButtonType.solid`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + type: GFButtonType.transparent, + ), +``` + +### Botón social píldora + +![Botón social píldora](../.gitbook/assets/pills-social-buttons-2x.png) + +Para obtener un botón con forma de píldora con un color de fondo sólido y bordes redondeados solo debemos agregar la propiedad **shape** con el valor `GFButtonShape.pills`. + +```dart + import 'package:getflutter/getflutter.dart'; + + GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + shape: GFButtonShape.pills, + ), +``` + +### Botón social cuadrado + +![Botón social cuadrado](../.gitbook/assets/square-social-button-2x.png) + +Para obtener un botón cuadrado con un color de fondo sólido sin bordes redondeados solo debemos agregar la propiedad **shape** con el valor `GFButtonShape.square`. + +```dart + import 'package:getflutter/getflutter.dart'; + + GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + shape: GFButtonShape.square, + ), +``` + +### Tamaño de un botón social + +![Tamaño de un botón social](../.gitbook/assets/full-width-social-button-2x-1.png) + +El tamaño del botón puede ser modificado utilizando la propiedad **size**. El valor por defecto es `GFSize.MEDIUM`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + size: GFSize.SMALL, + ), +``` + +### Botón social bloque + +![Botón social bloque](../.gitbook/assets/block-social-button-2x.png) + +Block Button especifica cuan ancho debe ser el botón. Definiendo **blockButton** como `true`, el botón será un bloque de ancho máximo con bordes redondeados. Por defecto **blockButton** está definido como `false`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + type: GFButtonType.solid, + blockButton: true, + ), +``` + +### Botón de ancho máximo + +![Botón de ancho máximo](../.gitbook/assets/full-width-social-button-2x.png) + +Full Width Button especifica cuan ancho debe ser el botón. Definiendo **fullWidthButton** como `true`, el botón será un botón de ancho máximo con bordes redondeados y sin margen a los costados. Por defecto **fullWidthButton** está definido como `false`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + icon: Icon(Icons.share), + type: GFButtonType.solid, + fullWidthButton: true, + ), +``` + +## Botón social con ícono + +![Botón social con ícono](../.gitbook/assets/social-icon-button-2x.png) + +Los botones solo con íconos tienen la funcionalidad estándar de un botón sólido, y tienen un ícono como hijo. + +El atributo **shape** está definido por defecto como `GFButtonShape.standard`, por lo tanto, obtendremos un botón con forma estándar con un sólido color de fondo y bordes ligeramente redondeados. El atributo **type** está definido por defecto como `GFButtonType.solid`, por lo tanto, obtendremos un botón con un sólido color de fondo y bordes ligeramente redondeados. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconButton( + onPressed: (){}, + icon: Icon(Icons.share), + ), +``` + +### Tamaño + +El tamaño del botón puede ser modificado utilizando la propiedad **size**. El valor por defecto es `GFSize.MEDIUM`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconButton( + onPressed: (){}, + text: "primary", + size: GFSize.small, + ), +``` + +### Tipo + +El tipo del botón puede ser cambiado definiedo la propiedad **type** como `GFButtonType.outline`. El valor por defecto es `GFButtonType.solid`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconButton( + onPressed: (){}, + text: "primary", + type: GFButtonType.outline, + ), +``` + +### Forma + +La forma del botón puede ser cambiada definiendo la propiedad **shape** to `GFIconButtonShape.circle`. El valor por defecto es `GFIconButtonShape.standard`, con lo cual obtenemos un botón cuadrado con los bordes ligeramente redondeados. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFIconButton( + onPressed: (){}, + text: "primary", + shape: GFIconButtonShape.pills, + ), +``` + diff --git a/gf-button/square-button.md b/gf-button/square-button.md new file mode 100644 index 0000000..bd813f1 --- /dev/null +++ b/gf-button/square-button.md @@ -0,0 +1,141 @@ +--- +description: Un botón cuadrado luce como un botón sólido sin bordes redondeados. +--- + +# Botón cuadrado + +![Botón cuadrado](https://ik.imagekit.io/ionicfirebaseapp/docs/buttons/tr:dpr-auto,tr:w-auto/Square_button-solid_2x_Wkjf-bdm3.png) + +Para obtener un botón cuadrado con un color de fondo sólido sin bordes redondeados solo debemos agregar la propiedad **shape** con el valor `GFButtonShape.square`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.square, + ), +``` + +## Botón sólido + +![Botón sólido](../.gitbook/assets/square-solid-2x.png) + +El atributo **type** está definido por defecto como `GFButtonType.solid`, por lo tanto, obtendremos un botón cuadrado con un sólido color de fondo sin bordes redondeados. + +El callback disparado cuando se presiona el botón, definido en el atributo **onPressed**, habilita el botón. + +```dart +import 'package:getflutter/getflutter.dart'; + + GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.square, + ), +``` + +### Botón deshabilitado + +![Botón deshabilitado](../.gitbook/assets/square-disabled-2x.png) + +Si el atributo **onPressed** es null, entonces el botón estará deshabilitado. Por defecto, GFButton estará deshabilitado porque **onPressed** es null. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: null, + text: "primary", + shape: GFButtonShape.square, + ), +``` + +### Botón bloque + +![Botón bloque](../.gitbook/assets/block-2x.png) + +Block Button especifica cuan ancho debe ser el botón. Definiendo **blockButton** como `true`, el botón será un bloque de ancho máximo sin bordes redondeados. Por defecto **blockButton** está definido como `false`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.square, + blockButton: true, + ), +``` + +### Botón de ancho máximo + +![Botón de ancho máximo](../.gitbook/assets/fullwidth-2x.png) + +Full Width Button especifica cuan ancho debe ser el botón. Definiendo **fullWidthButton** como `true`, el botón será un botón de ancho máximo sin bordes redondeados y sin margen a los costados. Por defecto **fullWidthButton** está definido como `false`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.square, + fullWidthButton: true, + ), +``` + +### Tamaño del botón + +El tamaño del botón puede ser modificado utilizando la propiedad **size**. El valor por defecto es `GFSize.MEDIUM`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.square, + size: GFSize.SMALL, + ), +``` + +## Botón Outline + +![Botón Outline](../.gitbook/assets/outline-2x.png) + +Outline Button es un botón con fondo transparente y borde visible. Podemos obtener este botón facilmente definiedo el atributo **type** como **`GFButtonType.outline`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.square, + type: GFButtonType.outline, + ), +``` + +Las propiedades antes mencionadas, como `size`, `blockButton`, `fullWidthButton`, habilitar y deshabilitar botones, funcionan también con **Outline Button**. + +## Botón Outline 2x + +![Botón Outline 2x](../.gitbook/assets/outline-2x-2x.png) + +Outline2x Button es un botón con fondo transparente y borde visible con un ancho de 2x. Podemos obtener este botón facilmente definiedo el atributo **type** como **`GFButtonType.outline2x`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + shape: GFButtonShape.square, + type: GFButtonType.outline2x, + ), +``` + +Las propiedades antes mencionadas, como `size`, `blockButton`, `fullWidthButton`, habilitar y deshabilitar botones, funcionan también con **Outline2x Button**. + diff --git a/gf-button/standard-button.md b/gf-button/standard-button.md new file mode 100644 index 0000000..ed6e585 --- /dev/null +++ b/gf-button/standard-button.md @@ -0,0 +1,143 @@ +--- +description: >- + Un GF Button estándar luce como un botón sólido con los bordes ligeramente + redondeados. GF Button tiene todas las variantes, tales como Outline, + Transparent, Disable, y Block. +--- + +# Botón estándar + +![Botón estándar](https://ik.imagekit.io/ionicfirebaseapp/docs/buttons/tr:dpr-auto,tr:w-auto/Standard_buttons_-_solid_2x_lnCv20In0.png) + +El atributo **shape** está definido por defecto como `GFButtonShape.standard`, por lo tanto, obtendremos un botón estándar con un sólido color de fondo y bordes ligeramente redondeados. + +## Botón sólido + +![Flutter Botón sólido](../.gitbook/assets/solid-button-2x.png) + +El atributo **type** está definido por defecto como `GFButtonType.solid`, por lo tanto, obtendremos un botón estándar con un sólido color de fondo y bordes ligeramente redondeados. + +El callback disparado cuando se presiona el botón, definido en el atributo **onPressed**, habilita el botón. + +```dart + import 'package:getflutter/getflutter.dart'; + + GFButton( + onPressed: (){}, + text: "primary", + ), +``` + +### Botón deshabilitado + +![GF Flutter Botón deshabilitado](../.gitbook/assets/disabled-button-2x.png) + +Si el atributo **onPressed** es null, entonces el botón estará deshabilitado. Por defecto, GFButton estará deshabilitado porque **onPressed** es null. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: null, + text: "primary", + ), +``` + +### Botón transparente + +![Flutter Botón transparente](../.gitbook/assets/transparent-button-2x.png) + +Definiendo el atributo **type** como **`GFButtonType.transparent`** obtenemos un botón transparente. Por defecto, GFButton define el atributo **type** como `GFButtonType.solid`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + type: GFButtonType.transparent, + ), +``` + +### Botón bloque + +![Flutter Botón bloque](../.gitbook/assets/block-button-2x.png) + +Block Button especifica cuan ancho debe ser el botón. Definiendo **blockButton** como `true`, el botón será un bloque de ancho máximo con bordes redondeados. Por defecto **blockButton** está definido como `false`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + blockButton: true, + ), +``` + +### Botón de ancho máximo + +![Flutter Botón de ancho máximo](../.gitbook/assets/full-width-button-2x.png) + +Full Width Button especifica cuan ancho debe ser el botón. Definiendo **fullWidthButton** como `true`, el botón será un botón de ancho máximo con bordes redondeados y sin margen a los costados. Por defecto **fullWidthButton** está definido como `false`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + fullWidthButton: true, + ), +``` + +### Tamaño del botón + +El tamaño del botón puede ser modificado utilizando la propiedad **size**. El valor por defecto es `GFSize.MEDIUM`. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + size: GFSize.SMALL, + ), +``` + +## Botón Outline + +![Flutter Outline Button](../.gitbook/assets/outline-2x-2x-2.png) + +Outline Button es un botón con fondo transparente y borde visible. Podemos obtener este botón facilmente definiedo el atributo **type** como **`GFButtonType.outline`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + type: GFButtonType.outline, + ), +``` + +Las propiedades antes mencionadas, como `size`, `blockButton`, `fullWidthButton`, habilitar y deshabilitar botones, funcionan también con **Outline Button**. + +## Botón Outline 2x + +![GF Flutter Outline 2X Button](../.gitbook/assets/outline-2x-2x-1.png) + +Outline2x Button es un botón con fondo transparente y borde visible con un ancho de 2x. Podemos obtener este botón facilmente definiedo el atributo **type** como **`GFButtonType.outline2x`**. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFButton( + onPressed: (){}, + text: "primary", + type: GFButtonType.outline2x, + ), +``` + +Las propiedades antes mencionadas, como `size`, `blockButton`, `fullWidthButton`, habilitar y deshabilitar botones, funcionan también con **Outline2x Button**.. + diff --git a/gf-card.md b/gf-card.md new file mode 100644 index 0000000..1465d12 --- /dev/null +++ b/gf-card.md @@ -0,0 +1,120 @@ +--- +description: GFCard has slightly rounded corners and a shodow +--- + +# GF Card + +![Card](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Cards_-_with_avatar_2x_TP2qeapUr.png) + + + +### Usage + +Below code gives the basic GFCard + +```dart +import 'package:getflutter/getflutter.dart'; + + GFCard( + boxFit: BoxFit.cover, + image: Image.asset('your asset image'), + title: GFListTile( + title: Text('Card Title'), + icon: GFIconButton( + onPressed: null, + icon: Icon(Icons.favorite_border), + type: GFType.transparent, + ) + ), + content: Text("Some quick example text to build on the card"), + buttonBar: GFButtonBar( + alignment: MainAxisAlignment.start, + children: [ + GFButton( + onPressed: () {}, + text: 'Read More', + ), + ], + ), + ), +``` + +### GFCards with Avatar + +![Card With Avatar](.gitbook/assets/cards-with-avatars-2x.png) + +```dart +import 'package:getflutter/getflutter.dart'; + + GFCard( + boxFit: BoxFit.cover, + image: Image.asset('your asset image'), + title: GFListTile( + avatar:GFAvatar(), + title: Text('Card Title'), + icon: GFIconButton( + onPressed: null, + icon: Icon(Icons.favorite_border), + type: GFType.transparent, + ) + ), + content:Text( "Some quick example text to build on the card"), + buttonBar: GFButtonBar( + alignment: MainAxisAlignment.start, + children: [ + GFButton( + onPressed: () {}, + text: 'Read More', + ), + ], + ), + ), +``` + +### GFCards with OverlayImage + +![Card With Overlay Image](.gitbook/assets/cards-with-image-overlays-2x.png) + +```dart +import 'package:getflutter/getflutter.dart'; + + GFCard( + boxFit: BoxFit.cover, + imageOverlay: AssetImage('your asset image'), + title: GFListTile( + avatar: GFAvatar(), + title: Text('Card Title'), + subTitle: Text('subtitle'), + ), + content: Text("GFCards has three types of cards i.e, basic, with avataras and with overlay image") + buttonBar: GFButtonBar( + alignment: MainAxisAlignment.center, + children: [ + GFButton( + onPressed: () {}, + text: 'View', + ) + ], + ), + ), +``` + +### Custom Properties + +| | | +| :--- | :--- | +| **titlePosition** | helps to set the title at top of the card | +| **color** | sets the background color of the card | +| **elevation** | controls the size of the shadow below the card | +| **shape** | shape of the card | +| **borderOnForeground** | whether to paint the shape of the border in front of the child, defaults to true | +| **clipBehaviour** | defines the clipping of the child | +| **margin** | defines the card's outer container margin | +| **padding** | defines the card's outer container padding | +| **semanticContainer** | represents a single semantic container, if false a collection of semantic nodes | +| **border** | to draw border above the card | +| **borderRadius** | represents the rounded corners of the card | +| **colorFilter** | applies to the image before painting it | +| **boxFit** | how the image should be inscribed into the box | +| **imageOverlay** | display images as background with shaded overlay | + diff --git a/gf-carousel.md b/gf-carousel.md new file mode 100644 index 0000000..aee1c91 --- /dev/null +++ b/gf-carousel.md @@ -0,0 +1,123 @@ +--- +description: >- + Carousel component is a multi-section container. Each section can be swiped or + dragged between. It contains any number of Slide components. +--- + +# GF Carousel + +![Carousel](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Carousels-Images_2x_ib7ZUd6vJ.png) + +## GF Carousel + +List of Images given to the items in the GFCarousel, it allows to slide the each image container. Below code gives the default image slider component. + +```dart +import 'package:getflutter/getflutter.dart'; + +final List imageList = [ + "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg", + "https://cdn.pixabay.com/photo/2017/12/13/00/23/christmas-3015776_960_720.jpg", + "https://cdn.pixabay.com/photo/2019/12/19/10/55/christmas-market-4705877_960_720.jpg", + "https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg", + "https://cdn.pixabay.com/photo/2019/12/22/04/18/x-mas-4711785__340.jpg", + "https://cdn.pixabay.com/photo/2016/11/22/07/09/spruce-1848543__340.jpg" +]; + + GFCarousel( + items: imageList.map( + (url) { + return Container( + margin: EdgeInsets.all(8.0), + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(5.0)), + child: Image.network( + url, + fit: BoxFit.cover, + width: 1000.0 + ), + ), + ); + }, + ).toList(), + onPageChanged: (index) { + setState(() { + index; + }); + }, + ), +``` + +### Properties + +Look and feel of the carousel can be customized using the GFCarousel properties. Sliding items can be any type of list of widgets or list of images. + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **items** | widgets to be shown as slider | +| **height** | set slide widget height and overrides any existing \[aspectRatio\] | +| **aspectRatio** | aspect ratio is used if no height have been declared. Defaults to 16:9 aspect ratio | +| **viewportFraction** | fraction of the viewport that each page should occupy. Defaults to 0.8, which means each page fills 80% of the slide | +| **autoPlay** | enables auto play, sliding one page at a time. Use \[autoPlayInterval\] to determent the frequency of slides. Defaults to false | +| **reverse** | reverse the order of items if set to true. Defaults to false | +| **autoPlayInterval** | sets Duration to determent the frequency of slides when \[autoPlay\] is set to true. Defaults to 4 seconds | +| **autoPlayAnimationDuration** | animation duration between two transitioning pages while in auto playback. Defaults to 800 ms | +| **autoPlayCurve** | determines the animation curve physics. Defaults to \[Curves.fastOutSlowIn\] | +| **enlargeMainPage** | determines if current page should be larger then the side images, creating a feeling of depth in the carousel. Defaults to false | +| **pauseAutoPlayOnTouch** | sets a timer on touch detected that pause the auto play with the given \[Duration\]. Touch Detection is only active if \[autoPlay\] is true | +| **pagination** | displays pagination on state true | +| **passiveIndicator** | slider pagination's passive color | +| **activeIndicator** | slider pagination's active color | +| **pagerSize** | pagination dots size can be defined using \[double\] | +| **initialPage** | initial page to show when first creating the \[GFCarousel\]. Defaults to 0 | +| **enableInfiniteScroll** | determines if slides should loop infinitely or be limited to item length. Defaults to true, i.e. infinite loop | +| **scrollDirection** | axis along which the page view scrolls. Defaults to \[Axis.horizontal\] | +| **onPageChanged** | called whenever the page in the center of the viewport changes | +| **pageController** | \[pageController\] is created using the properties passed to the constructor and can be used to control the \[PageView\] it is passed to. | + +## GF ItemsCarousel + +ItemsCarousel component is a multi-section container with multiple items. Each section can be swiped or dragged betwen. It contains any number of items in each Slide components. + +In the below code, List of Images given to the children in the GFItemsCarousel, it allows to slide the each slide container that contain multiple items. Below code gives the default multi image slider component. + +```dart +import 'package:getflutter/getflutter.dart'; + +final List imageList = [ + "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg", + "https://cdn.pixabay.com/photo/2017/12/13/00/23/christmas-3015776_960_720.jpg", + "https://cdn.pixabay.com/photo/2019/12/19/10/55/christmas-market-4705877_960_720.jpg", + "https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg", + "https://cdn.pixabay.com/photo/2019/12/22/04/18/x-mas-4711785__340.jpg", + "https://cdn.pixabay.com/photo/2016/11/22/07/09/spruce-1848543__340.jpg" +]; + + GFItemsCarousel( + rowCount: 3, + children: imageList.map( + (url) { + return Container( + margin: EdgeInsets.all(5.0), + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(5.0)), + child: + Image.network(url, fit: BoxFit.cover, width: 1000.0), + ), + ); + }, + ).toList(), +), +``` + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **rowCount** | count of visible cells in each slide | +| **children** | widgets to be shown in slides | + + + diff --git a/gf-drawer.md b/gf-drawer.md new file mode 100644 index 0000000..e9cb24c --- /dev/null +++ b/gf-drawer.md @@ -0,0 +1,119 @@ +--- +description: >- + The GFDrawer component is a navigation drawer that slides in from the side of + the current view. GFDrawer can be the perfect option to provide common + navigation options. +--- + +# GF Drawer + +![Drawer](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Drawer_2x_SN3DBznNN.png) + + + +The GFAppBar automatically displays an appropriate IconButton to show the GFDrawer when a GFDrawer is available in the Scaffold. + +### Usage + +The simple code of a basic GFDrawer is as shown below. + +```text +import 'package:getflutter/getflutter.dart'; + +GFDrawer( + child: ListView( + padding: EdgeInsets.zero, + children: [ + ListTile( + title: Text('Item 1'), + onTap: null, + ), + ListTile( + title: Text('Item 2'), + onTap: null, + ), + ], + ), +), +``` + +Look and feel of the GFDrawer can be customized using the GFDrawer properties. + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **child** | displays the drawer items | +| **color** | defines the background color of the drawer | +| **gradient** | gradient can be used for transforming gradient shaders without applying the same transform to the entire canvas. | +| **backgroundImage** | background image can be added to the drawer | +| **colorFilter** | composited layer that applies a color filter to its children | +| **elevation** | controls the size of the shadow below the drawer. | + +## GF Drawer Header + +The GF Drawer Header component is a header that identifies the app's user. This can be placed inside GFDrawer child. + +### Usage + +The simple code of a basic GFDrawerHeader with GFDrawer is as shown below. + +```text + import 'package:getflutter/getflutter.dart'; + + GFDrawer( + child: ListView( + padding: EdgeInsets.zero, + children: [ + GFDrawerHeader( + currentAccountPicture: GFAvatar( + radius: 80.0, + backgroundImage: NetworkImage("https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"), + ), + otherAccountsPictures: [ + Image( + image: NetworkImage("https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg"), + fit: BoxFit.cover, + ), + GFAvatar( + child: Text("ab"), + ) + ], + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('user name'), + Text('user@userid.com'), + ], + ), + ), + ListTile( + title: Text('Item 1'), + onTap: null, + ), + ListTile( + title: Text('Item 2'), + onTap: null, + ), + ], + ), + ), +``` + +Look and feel of the GFDrawerHeader can be customized using the GFDrawerHeader properties. + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **decoration** | defines the background color of the drawer header | +| **margin** | refers to margin around the drawer header | +| **child** | widget to be placed inside the drawer header, inset by the \[padding\] | +| **currentAccountPicture** | widget placed in the upper-left corner that represents the current user's account | +| **otherAccountsPictures** | list of widgets that represent the current user's other accounts | +| **duration** | the duration for animations of the \[decoration\] | +| **curve** | the curve for animations of the \[decoration\] | + + + diff --git a/gf-floating-widget.md b/gf-floating-widget.md new file mode 100644 index 0000000..0e6a99e --- /dev/null +++ b/gf-floating-widget.md @@ -0,0 +1,59 @@ +--- +description: >- + GF Floating Widget is a simple widget that acts like the outer wrapper to + other kind of components. It has properties like body and child in which the + body acts like the Scaffold's body. +--- + +# GF Floating Widget + +GF Floating Widget's child can take any kind of components or widgets as its paramater. The GF Floating Widget is mostly and effectively used to show some **popups**, **alerts** or some **error messages** which floats over the main body. + +### Usage + +The simple way to use the GF Floating widget with its body and child properties is as shown below: + +```dart +import 'package:getflutter/getflutter.dart'; + +return Scaffold( + body:GFFloatingWidget( + child:Text('This is a floating text'), + body:Text('body or any kind of widget here..') + ) +) +``` + +### Position + +There are two types of positions ie, **horizontalPosition** and **VerticalPosition** in which the **child** of GF Floating widget can be placed any where inside the body ie, it basically floats in the body and hence the name GF Floating Widget. The below code shows how to use the positions: + +```dart +import 'package:getflutter/getflutter.dart'; + +return Scaffold( + body:GFFloatingWidget( + child: GFIconBadge( + child: GFAvatar( + size: GFSize.large, + backgroundImage:AssetImage('your asset image'), + ), + counterChild: GFBadge( + text: '12', + shape: GFBadgeShape.circle, + ) + ), + body:Text('body or any kind of widget here..'), + verticalPosition: MediaQuery.of(context).size.height* 0.2, + horizontalPosition: MediaQuery.of(context).size.width* 0.8, + ) +) +``` + +### Custom Properties + +| | | +| :--- | :--- | +| showblurness | showblurness defines whether the body should be blur or not when showing popups, error messages etc whenever the **child** property is used in GF Floating widget. The showblurness defaults to `false`. | +| blurnessColor | defines how much blur backgroundColor should be whenever the **child** is used and when showblurness is `true` | + diff --git a/gf-image.md b/gf-image.md new file mode 100644 index 0000000..98ea13d --- /dev/null +++ b/gf-image.md @@ -0,0 +1,94 @@ +--- +description: GFImage typically manages assets and dispalys the images +--- + +# GF Image + +![Image](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Images-Square_2x_Zf91TY9B84.png) + +Images + +### Asset Image + +Asset image is used to display the images stored locally in the assets folder. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFImageOverlay( + height: 200, + width: 300, + image: AssetImage('your asset image') +) + +``` + +### Network Image + +Network image is used to display an image from the internet. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFImageOverlay( + height: 200, + width: 300, + image: NetworkImage('your network image') +) +``` + +### Image Overlay + +![Image Overlay](.gitbook/assets/image-overlay.png) + +Image Overlay is used to set the image in the background and text in the foreground with the `colorFilter` property that takes two colors, and outputs one color + +```dart +import 'package:getflutter/getflutter.dart'; + + GFImageOverlay( + height: 200, + width: 300, + child: Center( + child: Text('Light Overlay', style:TextStyle(color:getGFColor(GFColor.white)) + ), + colorFilter: new ColorFilter.mode( + Colors.black.withOpacity(0.20), + BlendMode.darken), + image: AssetImage('your asset image') + ) + +``` + +### Circular Image + +![Circular Image](.gitbook/assets/image-circular.png) + +```dart +import 'package:getflutter/getflutter.dart'; + + GFImageOverlay( + height: 200, + width: 200, + shape: BoxShape.circle, + image:AssetImage('your asset image') + ) + +``` + +## + +### Custom Properties + +| | | +| :--- | :--- | +| **height** | defines the height of the image | +| **width** | defines the width of the image | +| **color** | defines the background color of the image | +| **margin** | image's outer container margin | +| **padding** | image's outer container padding | +| **alignment** | to align the child within the image | +| **boxFit** | how to image should be inscribed into the box | +| **borderRadius** | the corners of the image | +| **border** | the border above the image | + diff --git a/gf-loader.md b/gf-loader.md new file mode 100644 index 0000000..78be26c --- /dev/null +++ b/gf-loader.md @@ -0,0 +1,126 @@ +--- +description: >- + GFLoader is a progress indicator which spins to indicate that the application + is busy. It usually progresses along a circle. +--- + +# GF Loader + +![GF Loader](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Loaders_Docs_Banner_2x_d4qy_o4O9.png) + + + +### Usage + +The basic code of a simple GFLoader is as shown below. There are five types in which the default corresponds to android type of loader. + +```dart +import 'package:getflutter/getflutter.dart'; + GFLoader(), +``` + +### Types of Loaders + +There are five different types of loaders namely **android** , **ios,** **circle**, **square** and **custom** + +### **IOS Loader** + +A simple **ios** loader in which the type of the loader should be passed to **ios**. The code is as shown below. + +```dart +import 'package:getflutter/getflutter.dart'; + GFLoader( + type:GFLoaderType.ios + ), +``` + +![Flutter IOS Loader](.gitbook/assets/ios-loaders-2x.png) + +### Circular Loader + +A simple **circular** shape loader in which the type of the loader should be passed to **circle**. The code is as shown below. + +```dart +import 'package:getflutter/getflutter.dart'; + + GFLoader( + type:GFLoaderType.circle + ), +``` + +![Flutter Circular Loader](.gitbook/assets/circular-loaders-2x.png) + +### Square Loader + +A simple **square** shape loader in which the type of the loader should be passed to **square**. The code is as shown below. + +```dart +import 'package:getflutter/getflutter.dart'; + + GFLoader( + type:GFLoaderType.square + ), +``` + +![Flutter Square Loader](.gitbook/assets/squared-loaders-2x.png) + +### Custom Loader + +Apart from the four types described above, there is a custom loader in which we can pass text, icons, images etc as the parameters to show a variety of customised loaders. The below code shows the custom loader with a gif in it. + +```dart + import 'package:getflutter/getflutter.dart'; + + GFLoader( + type: GFLoaderType.custom, + child: Image(image: AssetImage(your gif here...), +), +``` + +### + +### Custom Loader with Icon + +The below code shows custom loaders with icons in it. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFLoader( + type: GFLoaderType.custom, + loaderIconOne : Icon(Icons.insert_emoticon), + loaderIconTwo : Icon(Icons.insert_emoticon), + loaderIconThree : Icon(Icons.insert_emoticon), +), +``` + + + +### Custom Loader with text + +We can also pass text as a parameter to custom loader. The below code shows a simple usage. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFLoader( + type: GFLoaderType.custom, + loaderIconOne : Text('Please'), + loaderIconTwo : Text('Wait'), + loaderIconThree : Text('a moment'), +), +``` + +### Custom Properties + +| | | +| :--- | :--- | +| **child** | child of type \[Widget\] used only for **custom** type and is prominent over loaderIconOne, loaderIconTwo and loaderIconThree in **custom** type | +| **duration** | defines the animation duration of the loader only in **circle** and **square** type | +| **loaderColorOne** | defines the color of the first dot in only **circle** or **square** type of loader | +| **loaderColorTwo** | defines the color of the second dot in only **circle** or **square** type of loader | +| **loaderColorThree** | defines the color of the third dot in only **circle** or **square** type of loader | +| **androidLoaderColor** | defines the color of the android type loader only | +| **loaderstrokeWidth** | defines the stroke width of the android type loader only | +| **size** | defines the size of the loader ie, `small`, `medium` and `large` and it is applicable to android ios, circle and square type loaders | + diff --git a/gf-progress-bar.md b/gf-progress-bar.md new file mode 100644 index 0000000..7eebc29 --- /dev/null +++ b/gf-progress-bar.md @@ -0,0 +1,126 @@ +--- +description: >- + GF Progress bar is a simple Widget which shows progress along a line or along + a Circle. +--- + +# GF Progress Bar + +![ Flutter Progress Bar Widget](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Progress_bar_docs_banner_2x_U9p_yPuSY.png) + +Progress bar can be of two types , a simple linear progress bar or a Circular Progress bar + +### Usage + +The below code shows a simple **Linear** **progress** **bar** with some defined properties of the progress bar. + +```dart + import 'package:getflutter/getflutter.dart'; + + GFProgressBar( + percentage: 0.9, + backgroundColor : Colors.black26, + progressBarColor: GFColors.DANGER +) +``` + +### + +![Linear Progress Bar](.gitbook/assets/linear-progress-bar-2x.png) + +### Circular Progress Bar + +Circular progress bar is as same as linear progress bar with some additional properties added to the code structure. The below code shows a simple circular progress bar. + +```dart + import 'package:getflutter/getflutter.dart'; + + GFProgressBar( + percentage: 0.9, + width:100, + radius: 90, + backgroundColor : Colors.black26, + progressBarColor: GFColors.DANGER +) +``` + +### + +![Circular Progress Bar](.gitbook/assets/circular-progress-bar-2x.png) + +### Progress bar with Child property + +The progress bar can be customized to show the percentage of progress completed. To show the progress percentage we can use child property which is a Widget type and can be a text, icon , image etc. The below code shows how a child property can be used as text to show the progress percentage. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFProgressBar( + percentage: 0.5, + lineHeight: 20, + child: const Padding( + padding: EdgeInsets.only(right: 5), + child: Text('50%', textAlign: TextAlign.end, + style: TextStyle(fontSize: 16, color: Colors.white), + ), + ), + backgroundColor: Colors.black26, + progressBarColor: GFColors.WARNING, +) +``` + +### + +![Progress Bar with Child Property](.gitbook/assets/progress-bar-with-child-property-2x.png) + +### Progress bar with leading and trailing icons + +The progress bar can be used with leading and trailing icons to show the level of progress percent from 0 to 1. The below code shows a leading and trailing icons in a Linear Progress bar. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFProgressBar( + percentage: 0.8, + lineHeight: 20, + alignment: MainAxisAlignment.spaceBetween, + child: const Text('80%', textAlign: TextAlign.end, + style: TextStyle(fontSize: 16, color: Colors.white), + ), + leading : Icon( Icons.sentiment_dissatisfied, color: GFColors.DANGER), + trailing: Icon( Icons.sentiment_satisfied, color: GFColors.SUCCESS), + backgroundColor: Colors.black26, + progressBarColor: GFColors.INFO, +) +``` + +### + +![Progress bar with leading and trailing icons](.gitbook/assets/progressbar-with-leading-and-trailing-icons-2x.png) + +### + +### Custom Properties + +| | | +| :--- | :--- | +| **percentage** | type of double which should be from 0 to 1 to indicate the progress percentage | +| **radius** | type of double used to show the radius of the Circular Progress Bar | +| **width** | defines the width of the progress bar | +| **type** | type of \[GFProgressType\] which changes the shape of progress bar ie , linear or circular | +| **lineHeight** | defines the height of the progress bar | +| **circleWidth** | defines the thickness of the circle's arc in Circular Progress bar | +| **circleStartAngle** | defines the angle on which the circle starts to progress in degrees.\(ie 0.0, 45.0, 90.0 etc\) | +| **animation** | type of bool which allows the progress line to animate when the percentage value is changed, default is false | +| **animationDuration** | duration of animation in milliseconds , applicable only if animation is true | +| **alignment** | used to align the leading and trailing widget which the progress bar evenly | +| **padding** | defines the padding of the progress bar | +| **animateFromLastPercentage** | type of bool which is used to animate the progress bar from the last percentage value set | +| **linearGradient** | linear gardient colors given to the progress line color | +| **autoLive** | set to false if you don't want to preserve the state of the widget , default is true | +| **fromRightToLeft** | set to true if you want to animate the linear progress bar from right to left | +| **mask** | Creates a mask filter that takes the progress shape being drawn and blurs it | +| **clipLinearGradient** | set to true if you want to display only a part of \[linearGradient\] based on percentage value, | +| **progressHeadType** | type of \[GFProgressHeadType\] which changes the shape of the progress head ie , circular or sqaure | +| **reverse** | type to bool which is used to display the progress in reverse direction | + diff --git a/gf-rating.md b/gf-rating.md new file mode 100644 index 0000000..b65d2f7 --- /dev/null +++ b/gf-rating.md @@ -0,0 +1,85 @@ +--- +description: >- + GFRating is a row of star icon, one can touch or drag the row of icons to set + the rating. +--- + +# GF Rating + +![GF Rating](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Ratings_2x_u92JHlj0d.png) + + + +### Usage + +The simple code of a basic **GF Rating** is as shown below. + +```text +double _rating = 3; + +GFRating( + value: _rating, + onChanged: (value) { + setState(() { + _rating = value; + }); + }, +), +``` + +![Flutter Rating](.gitbook/assets/ratings-2x.png) + +If `showTextForm` true, it displays the GF Rating bar with text field, that takes user input to show the rating. The simple code of rating bar with textform is shown below. + +```text +final _ratingController = TextEditingController(); +double _userRating = 4.5; + +@override +void initState() { + super.initState(); + _ratingController.text = '4.5'; +} + +GFRating( + value: _userRating, + showTextForm: true, + controller: _ratingController, + suffixIcon: GFButton( + type: GFButtonType.transparent, + onPressed: () { + setState(() { + _userRating = double.parse(_ratingController.text ?? '0.0'); + }); + }, + child: const Text('Rate'), + ), +), +``` + +Look and feel of the **GF Rating** can be customized using the GF Rating properties. + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **itemCount** | defines total number of rating items | +| **color** | defines the color of items | +| **borderColor** | defines the border color of \[halfFilledIcon\] | +| **size** | defines the size of items. GFSize can be used for size variations like small. medium. large | +| **allowHalfRating** | if true, allow half rating of items. Default it will be in true state | +| **filledIcon** | defines the items when filled | +| **halfFilledIcon** | defines the items when half-filled | +| **defaultIcon** | defines the default items, when having filledIcon and halfFilledIcon | +| **spacing** | defines the space between items | +| **value** | defines the rating value | +| **onChanged** | return current rating whenever rating is updated | +| **showTextForm** | if true, shows rating \[TextFormField\] with the rating bar, that allows the user input to show rating | +| **suffixIcon** | defines the design and funtion of rating \[TextFormField\]'s suffix icon | +| **controller** | controls the \[TextField\] Controller of rating \[TextFormField\] | +| **inputDecorations** | defines the \[InputDecoration\] of rating \[TextFormField\] | +| **margin** | defines the margin of rating \[TextFormField\] | +| **padding** | defines the padding of rating \[TextFormField\] | + + + diff --git a/gf-searchbar.md b/gf-searchbar.md new file mode 100644 index 0000000..121fb0b --- /dev/null +++ b/gf-searchbar.md @@ -0,0 +1,70 @@ +--- +description: >- + GF SearchBar represent a text field that can be used to search through a + collection. +--- + +# GF SearchBar + +![GF Searchbar](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Search_bar_2x_F2W20uVHc.png) + + + +GF SearchBar contains textfield for user input and the overlay container to show the search list collections. + +### Usage + +The simple code of a basic GFSearchBar is as shown below. + +```text +import 'package:getflutter/getflutter.dart'; + +List list = [ + "Flutter", + "React", + "Ionic", + "Xamarin", + ]; + +GFSearchBar( + searchList: list, + searchQueryBuilder: (query, list) { + return list + .where((item) => + item.toLowerCase().contains(query.toLowerCase())) + .toList(); + }, + overlaySearchListItemBuilder: (item) { + return Container( + padding: const EdgeInsets.all(8), + child: Text( + item, + style: const TextStyle(fontSize: 18), + ), + ); + }, + onItemSelected: (item) { + setState(() { + print('$item'); + }); + }, +), +``` + +Look and feel of the **GFSearchBar** can be customized using the GFSearchBar properties. + +![Search Bar with Results](.gitbook/assets/search-bar-2.png) + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **searchList** | List of \[text\] or \[widget\] reference for users | +| **overlaySearchListItemBuilder** | defines how the \[searchList\] items look like in overlayContainer | +| **hideSearchBoxWhenItemSelected** | if true, it will hide the \[searchBox\] | +| **overlaySearchListHeight** | defines the height of \[searchList\] overlay container | +| **searchQueryBuilder** | can search and filter the \[searchList\] | +| **noItemsFoundWidget** | displays the \[widget\] when the search item failed | +| **onItemSelected** | defines what to do with onSelect \[SearchList\] item | +| **searchBoxInputDecoration** | defines the input decoration of \[searchBox\] | + diff --git a/gf-shimmer.md b/gf-shimmer.md new file mode 100644 index 0000000..8e16263 --- /dev/null +++ b/gf-shimmer.md @@ -0,0 +1,117 @@ +--- +description: >- + GF Shimmer gives a shimmer effect for the child, that can be used to indicate + a loading status. So instead of using ProgressBar or usual loader use GF + Shimmer for a better design and user interface. +--- + +# GF Shimmer + +![Flutter Simmer Widget](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Shimmer_docs_banner_tQJ5qq2Fi.png) + + + +GFShimmer can be used by giving Linear Gradient for more visual shimmer effect or just by adding Main Color and Secondary Color for basic shimmer effect. + +### Usage + +The below code gives a simple Shimmer effect for child with main color and secondary color. + +```text +import 'package:getflutter/getflutter.dart'; + +GFShimmer( + child: emptyBlock, +), + +final Widget emptyBlock = Padding( + padding: const EdgeInsets.symmetric(horizontal: 16), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 54, + height: 46, + color: Colors.white, + ), + const SizedBox(width: 12), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: double.infinity, + height: 8, + color: Colors.white, + ), + const SizedBox(height: 6), + Container( + width: MediaQuery.of(context).size.width * 0.5, + height: 8, + color: Colors.white, + ), + const SizedBox(height: 6), + Container( + width: MediaQuery.of(context).size.width * 0.25, + height: 8, + color: Colors.white, + ), + ], + ), + ) + ], + ), + ); + +``` + + + +![Basic Simmer](.gitbook/assets/basic-shimmer-effect-2x.png) + + + +The below code gives a Shimmer effect for child with Liner Gradient. It only takes Liner Gradient when `[showGradient`\] is **true .** + +```text +GFShimmer( + child: const Text( + 'GF Shimmer', + style: TextStyle(fontSize: 48, fontWeight: FontWeight.w700), + ), + showGradient: true, + gradient: LinearGradient( + begin: Alignment.bottomRight, + end: Alignment.centerLeft, + stops: const [0, 0.3, 0.6, 0.9, 1], + colors: [ + Colors.teal[100], + Colors.teal[200], + Colors.teal[300], + Colors.teal[400], + Colors.teal[500], + ], + ), +), +``` + + + +![Simmer on Text](.gitbook/assets/shimmer-effect-on-text-2x.png) + +Look and feel of the **GF Shimmer** can be customized using the GF Shimmer properties. + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **child** | The child of type \[Widget\] to display shimmer effect. | +| **duration** | Controls the speed of the shimmer effect. The default value is 1500 milliseconds. | +| **direction** | Controls the direction of the shimmer effect. The default direction is GFShimmerDirection.leftToRight. | +| **gradient** | Controls the \[child\]'s shades of color using Linear gradient. Child \[Widget\] only takes gradient color, If \[showGradient\] is true. | +| **showShimmerEffect** | Controls animation effect, defaults true state that makes animation active. | +| **showGradient** | If true, takes gradient color \[gradient\] for the \[child\]'s shimmer effect. Default set to false. | +| **shimmerEffectCount** | Controls the animation shimmerEffectCount. The default value is '0', that displays child \[Widget\]'s shimmer effect forever. | +| **mainColor** | Defines the main color of the \[child\]'s shimmer effect. Child \[Widget\] takes main color, only if \[showGradient\] is false. Default \[showGradient\] will be false. | +| **secondaryColor** | Defines the secondary color of the \[child\]'s shimmer effect. Child \[Widget\] takes secondary color, only if \[showGradient\] is false. Default \[showGradient\] will be false. | + diff --git a/gf-tab.md b/gf-tab.md new file mode 100644 index 0000000..61e6085 --- /dev/null +++ b/gf-tab.md @@ -0,0 +1,285 @@ +--- +description: >- + GFTab is a combination of the Tabbar and TabBarView controlled by tab + controller. Where as GFTabBar contains tab buttons which navigate to + particular tabBarView page in GFTabBarView. +--- + +# GF Tab + +![Tab](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Tabs-icon_1_2x_d161LbF9k.png) + + + +## GFTabBar + +![Tab Bar](.gitbook/assets/tabs-2x.png) + +The GFTabBar is a component that contains a set of tab buttons. A tab bar must be provided tabController to communicate with each tabBarView Component. + +TabController should be initialized, to communicate between Tabbar and Tabbarview. + +```dart +TabController tabController; + +@override +void initState() { + super.initState(); + tabController = TabController(length: 3, vsync: this); +} + +@override +void dispose() { + tabController.dispose(); + super.dispose(); +} +``` + +Below code gives, default GFTabBar with 3 children, children can be any type of widget. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFTabBar( + initialIndex: 0, + length: 3, + controller: tabController, + tabs: [ + Tab( + icon: Icon(Icons.directions_bike), + child: Text( + "Tab1", + ), + ), + Tab( + icon: Icon(Icons.directions_bus), + child: Text( + "Tab2", + ), + ), + Tab( + icon: Icon(Icons.directions_railway), + child: Text( + "Tab3", + ), + ), + ], +), +``` + +Look and feel of the GFTabBar can be customized using the GFTabBar properties. + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **initialIndex** | initial index of the selected tab. Defaults to zero | +| **length** | total number of tabs. Typically greater than one. Must match \[TabBar.tabs\]'s and \[TabBarView.children\]'s length | +| **tabBarHeight** | sets \[GFTabBar\] height | +| **tabBarColor** | sets \[TabBar\] color using GFColor or material color \[Color\] | +| **tabs** | typically a list of two or more \[Tab\] widgets. The length of this list must match the \[controller\]'s \[TabController.length\] and the length of the \[TabBarView.children\] list | +| **controller** | controls widget's selection and animation state. Must provide \[TabController\] | +| **indicatorColor** | color of the line that appears below the selected tab. If this parameter is null, then the value of the Theme's indicatorColor property is used. | +| **indicatorWeight** | thickness of the line that appears below the selected tab. The value of this parameter must be greater than zero and its default value is 2.0. | +| **indicatorPadding** | horizontal padding for the line that appears below the selected tab. | +| **indicator** | defines the appearance of the selected tab indicator. | +| **indicatorSize** | defines how the selected tab indicator's size is computed. | +| **labelColor** | color of selected tab labels. | +| **unselectedLabelColor** | color of unselected tab labels. | +| **labelStyle** | text style of the selected tab labels. | +| **unselectedLabelStyle** | text style of the unselected tab labels. | +| **labelPadding** | padding added to each of the tab labels. | +| **shape** | defines the shape of tabBar | + +## GFTabBarView + +A page view that displays the widget which corresponds to the currently selected tab. This widget is typically used in conjunction with a GFTabBar and must provide TabBarController. + +The tab controller's TabController.length must equal the length of the children list and the length of the TabBar.tabs list. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFTabBarView( + controller: tabController, + children: [ + Container(color: Colors.red), + Container(color: Colors.green), + Container(color: Colors.blue) + ] +), +``` + +Look and feel of the GFTabBarVIew can be customized using the GFTabBarView properties. + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **controller** | controls widget's selection and animation state. Must provide \[TabController\] | +| **children** | one widget per tab. Its length must match the length of the \[GFTabBar.tabs\] list, as well as the \[controller\]'s \[TabController.length\]. | +| **height** | GFTabBarView height can be fixed | + +## GFTabs + +GFTabs component is the combination of GFTabBar with GFTabBarView with default controller to controls page view that displays the widget which corresponds to the currently selected tab. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFTabs( + initialIndex: 0, + length: 3, + tabs: [ + Tab( + icon: Icon(Icons.directions_bike), + child: Text( + "Tab1", + ), + ), + Tab( + icon: Icon(Icons.directions_bus), + child: Text( + "Tab2", + ), + ), + Tab( + icon: Icon(Icons.directions_railway), + child: Text( + "Tab3", + ), + ), + ], + tabBarView: GFTabBarView( + children: [ + Container(child: Icon(Icons.directions_bike), color: Colors.red,), + Container(child: Icon(Icons.directions_bus), color: Colors.blue,), + Container(child: Icon(Icons.directions_railway), color: Colors.orange,), + ], + ), +), +``` + +Look and feel of the GFTabs can be customized using the GFTabs properties. + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **initialIndex** | initial index of the selected tab. Defaults to zero | +| **length** | total number of tabs. Typically greater than one. Must match \[TabBar.tabs\]'s and \[TabBarView.children\]'s length | +| **tabBarColor** | sets \[TabBar\] color using GFColor or material color \[Color\] | +| **tabs** | typically a list of two or more \[Tab\] widgets. The length of this list must match the \[controller\]'s \[TabController.length\] and the length of the \[TabBarView.children\] list | +| **controller** | controls widget's selection and animation state. Must provide \[TabController\] | +| **indicatorColor** | color of the line that appears below the selected tab. If this parameter is null, then the value of the Theme's indicatorColor property is used. | +| **indicatorWeight** | thickness of the line that appears below the selected tab. The value of this parameter must be greater than zero and its default value is 2.0. | +| **indicatorPadding** | horizontal padding for the line that appears below the selected tab. | +| **indicator** | defines the appearance of the selected tab indicator. | +| **indicatorSize** | defines how the selected tab indicator's size is computed. | +| **labelColor** | color of selected tab labels. | +| **unselectedLabelColor** | color of unselected tab labels. | +| **labelStyle** | text style of the selected tab labels. | +| **unselectedLabelStyle** | text style of the unselected tab labels. | +| **labelPadding** | padding added to each of the tab labels. | +| **tabBarView** | one widget per tab. LIst of widgets given to TabBarView. The length of this list must match the \[controller\]'s \[TabController.length\] and the length of the \[TabBarView.children\] list. | +| **tabBarHeight** | defines the tabBar height | +| **height** | defines the complete GFTabs height includes tabBar and tabBarView. | +| **shape** | defines the shape of tabBar | + +## GFSegmentTabs + +GFSegmentTabs are best used as an alternative for tabs. It looks like pills shaped button tab bar with all features of GFTabBar. + +This component is typically used in conjunction with a GFTabBarView and must provide TabBarController to control A page view that displays the widget which corresponds to the currently selected tab. + +```dart +import 'package:getflutter/getflutter.dart'; + +GFSegmentTabs( + tabController: tabController, + initialIndex: 0, + length: 3, + tabs: [ + Text( + "Tab1", + ), + Text( + "Tab2", + ), + Text( + "Tab3", + ), + ], +), +``` + +Look and feel of the GFSEgmentTabs can be customized using the GFSegmentTabs properties. + +### Custom Properties + +| Name | Description | +| :--- | :--- | +| **initialIndex** | initial index of the selected tab. Defaults to zero | +| **length** | total number of tabs. Typically greater than one. Must match \[TabBar.tabs\]'s and \[TabBarView.children\]'s length | +| **height** | sets \[GFSegmentTabs\] height | +| **tabBarColor** | sets \[TabBar\] color using GFColor or material color \[Color\] | +| **tabs** | typically a list of two or more \[Tab\] widgets. The length of this list must match the \[controller\]'s \[TabController.length\] and the length of the \[TabBarView.children\] list | +| **controller** | controls widget's selection and animation state. Must provide \[TabController\] | +| **indicatorColor** | color of the line that appears below the selected tab. If this parameter is null, then the value of the Theme's indicatorColor property is used. | +| **indicatorWeight** | thickness of the line that appears below the selected tab. The value of this parameter must be greater than zero and its default value is 2.0. | +| **indicatorPadding** | horizontal padding for the line that appears below the selected tab. | +| **indicator** | defines the appearance of the selected tab indicator. | +| **indicatorSize** | defines how the selected tab indicator's size is computed. | +| **labelColor** | color of selected tab labels. | +| **unselectedLabelColor** | color of unselected tab labels. | +| **labelStyle** | text style of the selected tab labels. | +| **unselectedLabelStyle** | text style of the unselected tab labels. | +| **labelPadding** | padding added to each of the tab labels. | +| **border** | defines outer border of the tabs | +| **borderRadius** | defines outer border, border radius | +| **width** | defines width of the tab row | + +### GFTabBar as Bottom Navigation Bar + +GFTabBar can be used as bottom navigation bar. The basic code is given below. + +```text +import 'package:getflutter/getflutter.dart'; + +Scaffold( + appBar: GFAppBar( + title: const Text('UI Kit'), + ), + body: GFTabBarView(controller: tabController, children: [ + Container(color: Colors.red), + Container(color: Colors.green), + Container(color: Colors.blue) + ]), + bottomNavigationBar: GFTabBar( + initialIndex: 0, + length: 3, + controller: tabController, + tabs: [ + Tab( + icon: Icon(Icons.directions_bike), + child: const Text( + 'Tab1', + ), + ), + Tab( + icon: Icon(Icons.directions_bus), + child: const Text( + 'Tab2', + ), + ), + Tab( + icon: Icon(Icons.directions_railway), + child: const Text( + 'Tab3', + ), + ), + ], + ), + ) +``` + diff --git a/gf-tile.md b/gf-tile.md new file mode 100644 index 0000000..bfb5e10 --- /dev/null +++ b/gf-tile.md @@ -0,0 +1,47 @@ +--- +description: >- + GFTile represents a single row that typically contains some text as title, + subtitle, icons as trailing and additional text as description +--- + +# GF Tile + +![Tile](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Tiles_2x_NFyiWgtQc.png) + +## Usage + +The simple GFTile code is as show below + +```dart +import 'package:getflutter/getflutter.dart'; + +GFListTile( + titleText:'Title', + subtitleText:'Lorem ipsum dolor sit amet, consectetur adipiscing', + icon: Icon(Icons.favorite) +), +``` + +### With Avatar + +![Tile With Avatar](.gitbook/assets/tile-with-avatar-2x.png) + +```dart +import 'package:getflutter/getflutter.dart'; + +GFListTile( + avatar:GFAvatar(), + titleText:'Title', + subtitleText:'Lorem ipsum dolor sit amet, consectetur adipiscing', + icon: Icon(Icons.favorite) +), +``` + +### Custom Properties + +| | | +| :--- | :--- | +| **color** | defines the backgroundColor | +| **description** | brief text to display | +| **padding** | defines the tile's outer container padding | + diff --git a/gf-toast.md b/gf-toast.md new file mode 100644 index 0000000..84a6e87 --- /dev/null +++ b/gf-toast.md @@ -0,0 +1,88 @@ +--- +description: GFToast can be used to display quick warning or error messages. +--- + +# GF Toast + +![GF Toast](.gitbook/assets/toasts-2x-1.png) + +### Usage + +**GFToast** should be wrapped inside the **GFFloating** Widget.The **child** of the **GFFloatingWidget** takes **GFToast** as its argument and the **body** takes any kind of widgets. The simple code is as shown below. + +```dart +import 'package:getflutter/getflutter.dart'; + + return Scaffold( + body:GFFloatingWidget( + child:GFToast( + text: 'This item already has the label “travel”', + ), + body:Text('body or any kind of widget here..') + ) +) +``` + +### Toast with Button + +![Toast with Button](.gitbook/assets/2.png) + +```dart +import 'package:getflutter/getflutter.dart'; + +GFToast( + text:'This item already has the label “travel”', + button: GFButton( + onPressed: () {}, + text: 'Close', + type: GFButtonType.transparent, + color: GFColor.success, + ), + autoDismiss: false, +), +``` + +### Auto Dismissible Toast + +The bool value `true` should be passed to **autoDismiss** property to make the toast, auto dismissible, + +```dart +import 'package:getflutter/getflutter.dart'; + +GFToast( + text: 'This item already has the label “travel”', + autoDismiss: true, +) +``` + +### Positioning of the Toast + +Toasts can be positioned accordingly inside the **GFFloating** Widget. The positioning takes two parameters ie, **horizontalPosition** and **verticalPosition**. The usage of these is shown below. + +```dart +import 'package:getflutter/getflutter.dart'; + +body:GFFloatingWidget( + horizontalPosition:40.0, + verticalPosition:20.0, + child:GFToast( + text: 'Logged In', + ), + body:Text('body or any kind of widget here..') +) +``` + +### Custom Properties + +| | | +| :--- | :--- | +| **child** | **child** of type \[Widget\] which is alternative to **text**. **text** will get priority over **child** | +| **backgroundColor** | color of type \[GFColor\] or \[Color\] to change the backgroundColor of toast | +| **textStyle** | textStyle of type \[textStyle\] applicable to **text** only and not for **child** | +| **width** | to control the width of the toast | +| **type** | type of \[GFToastType\] _ie_, `rounded` , `fullWidth` and defaults to `basic` | +| **autoDismiss** | takes **bool** values to automatically hide the toast, defaults to `true` | +| **animationDuration** | duration of the fade in and out animation when **autoDismiss** is `true` | +| **animation** | duration called on how much delay the toast should be visible | +| **alignment** | to align the text inside the toast _ie,_ `left`, `center`, `end` | + diff --git a/gf-toggle.md b/gf-toggle.md new file mode 100644 index 0000000..b56c1c5 --- /dev/null +++ b/gf-toggle.md @@ -0,0 +1,91 @@ +--- +description: GFToggle is used to toggle the on/off state of a single setting. +--- + +# GF Toggle + +![GF Toggle](.gitbook/assets/toggles-2x.png) + +### Usage + +The simple toggle code is as shown below. + +```dart +import 'package:getflutter/getflutter.dart'; + + GFToggle( + onChanged: (val){}, + value: null, + ) +``` + +### Types of Toggle + +There are four types ie, `android`, `ios`, `square` and `custom`. The default toggle is a android toggle + +### IOS Toggle + +![IOS Toggle](.gitbook/assets/ios.png) + +The below code shows a simple ios toggle + +```dart +import 'package:getflutter/getflutter.dart'; + + GFToggle( + onChanged: (val){}, + value: null, + type: GFToggleType.ios, + ) +``` + +### Square Toggle + +![Square Toggle](.gitbook/assets/square.png) + + + +The below code shows a simple square toggle + +```dart +import 'package:getflutter/getflutter.dart'; + + GFToggle( + onChanged: (val){}, + value: null, + type: GFToggleType.square, + ) +``` + +### Custom Toggle + +![Custom Toggle](.gitbook/assets/custom-2.png) + +The **custom** toggle can be used to add the text to the on/off state . The default text is **ON** and **OFF** Below is a simple code for custom toggle + +```dart +import 'package:getflutter/getflutter.dart'; + +GFToggle( + onChanged: null, + value: null, + type: GFToggleType.custom, + ), +``` + +### Custom Properties + +| | | +| :--- | :--- | +| **enabledText** | type of \[String\] used to add custom text i.e, ON, ENABLE | +| **disabledText** | type of \[String\] used to add custom text i.e, OFF, DISABLE | +| **enabledTextStyle** | type of \[TextStyle\] used to define the style properties of enabled text | +| **disabledTextStyle** | type of \[TextStyle\] used to define the style properties of disabled text | +| **enabledThumbColor** | color used for the active thumb color | +| **disabledThumnbColor** | color used for the disabled thumb color | +| **enabledTrackColor** | color used for the active track color | +| **disabledTrackColor** | color used for the disabled track color | +| **boxShape** | type of \[BoxShape\] ie , `circle`, `rectangle` used to change the shape of the thumb, default shape is `circle` | +| **borderRadius** | borderRadius should be given zero for a **ios** toggle to make it a **square** toggle with **boxshape** as `rectangle` | +| **duration** | animation duration called when the switch animates during the specific time elapse | + diff --git a/gf-typography.md b/gf-typography.md new file mode 100644 index 0000000..f831195 --- /dev/null +++ b/gf-typography.md @@ -0,0 +1,79 @@ +--- +description: >- + GFTypography defines the different sizes of the texts in the application + varying from Type 1 to Type 6. +--- + +# GF Typography + +![Typography](https://ik.imagekit.io/ionicfirebaseapp/docs/tr:dpr-auto,tr:w-auto/Typography_2x_7rUbGrN2G.png) + + + +### Usage + +The simple Typography code is as shown below + +```dart +import 'package:getflutter/getflutter.dart'; + +GFTypography( + text: 'GF Header Typo1', +), +``` + +### Size + +The different sizes of Typography differs from **Typo1** to **Typo6** + +```dart +import 'package:getflutter/getflutter.dart'; + +GFTypography( + text: 'GF Header Typo1', + type: GFTypographyType.typo1, + ), +``` + +### With Icon + +![Typography with icon](.gitbook/assets/with-icon-2x.png) + +```dart +import 'package:getflutter/getflutter.dart'; + + GFTypography( + text: 'GF Header Typo1', + type: GFTypographyType.typo1, + icon: Icon(Icons.send), + ), +``` + +### With BackgroundImage + +![Typography with background image](.gitbook/assets/with-image-2x.png) + +```dart +import 'package:getflutter/getflutter.dart'; + +GFTypography( + text: 'GF Header Typo1', + type: GFTypographyType.typo1, + icon: Icon(Icons.send), + backgroundImage: NetworkImage(''), +), +``` + +### Custom Properties + +| | | +| :--- | :--- | +| **child** | child of type Widget alternative to text Key | +| **dividerColor** | defines the color of the divider | +| **textColor** | defines the color of the text | +| **dividerBorderRadius** | the border radius of the divider | +| **dividerAlignment** | the alignment of the divider to `start`, `center` or `end` | +| **showDivider** | bool value to hide or show divider , defaults to true | +| **dividerWidth** | the width of the divider | +| **backgroundImagecolorFilter** | colorFilter of background image only when background image is available | + diff --git a/package.json b/package.json deleted file mode 100644 index 724f5d1..0000000 --- a/package.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "getwidgt-documentation-site", - "version": "0.0.1", - "description": "documentation of getwidget flutter library", - "main": "index.js", - "authors": { - "name": "Aditya Koushik R", - "email": "aditya@pietechsolution.com" - }, - "repository": "/getwidgt-documentation-site", - "scripts": { - "dev": "vuepress dev src", - "build": "vuepress build src" - }, - "license": "MIT", - "devDependencies": { - "@vuepress/plugin-google-analytics": "^1.8.2", - "google-fonts-webpack-plugin": "^0.4.4", - "vuepress": "^1.5.3", - "vuepress-plugin-autometa": "^0.1.13", - "vuepress-plugin-clean-urls": "^1.1.2", - "webpack": "^4.45.0" - }, - "dependencies": { - "@mr-hope/vuepress-plugin-copy-code": "^1.20.1", - "@vuepress/plugin-pwa": "^1.8.2", - "vuepress-plugin-img-lazy": "^1.0.4", - "vuepress-theme-book": "0.0.6" - } -} diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js deleted file mode 100644 index f023646..0000000 --- a/src/.vuepress/config.js +++ /dev/null @@ -1,424 +0,0 @@ -const { description } = require('../../package') -const default_options = { - - enable: true, // enables/disables everything - control per page using frontmatter - image: true, // regular meta image used by search engines - twitter: true, // twitter card - og: true, // open graph: facebook, pinterest, google+ - schema: false, // schema.org for google - - author: { - name: 'getwidget', - twitter: '@getwidgetdev', - }, - - // --------------------------------------------------------------------------- - - site: { - name: 'getwidget', - twitter: '@getwidgetdev', - }, - - description_sources: [ - - 'frontmatter', - 'excerpt', - - // markdown paragraph regex - // - /^((?:(?!^#)(?!^\-|\+)(?!^[0-9]+\.)(?!^!\[.*?\]\((.*?)\))(?!^\[\[.*?\]\])(?!^\{\{.*?\}\})[^\n]|\n(?! *\n))+)(?:\n *)+\n/img, - // - // this excludes blockquotes using `(?!^>)` - ///^((?:(?!^#)(?!^\-|\+)(?!^[0-9]+\.)(?!^!\[.*?\]\((.*?)\))(?!^>)(?!^\[\[.*?\]\])(?!^\{\{.*?\}\})[^\n]|\n(?! *\n))+)(?:\n *)+\n/img, - - // html paragraph regex - /(.*?)<\/p>/i, - - ], - - // --------------------------------------------------------------------------- - - // order of what gets the highest priority: - // - // 1. frontmatter - // 2. content markdown image such as `![alt text](http://url)` - // 3. content regular html img - - image_sources: [ - - 'frontmatter', - - /!\[.*?\]\((.*?)\)/i, // markdown image regex - /` - * - * ref：https://v1.vuepress.vuejs.org/config/#head - */ - head: [ - ['link', { rel: 'icon', href: 'https://ik.imagekit.io/ionicfirebaseapp/favicon_QkjfdlGz1.png' }], - ['meta', { name: 'theme-color', content: '#3eaf7c' }], - ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }], - ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }], - ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com' }], - ['link', { rel: 'preload', href: 'https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap' }], - - ], - evergreen: true, - theme: 'vuepress-theme-book', - /** - * Theme configuration, here is the default theme configuration for VuePress. - * - * ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html - */ - themeConfig: { - repo: '', - editLinks: true, - docsDir: '', - editLinkText: '', - lastUpdated: true, - parseHeaders: ['h2', 'h3'], - nav: [ - { text: 'Home', link: 'https://www.getwidget.dev/', target: 'blank' }, - { text: 'Blog', link: 'https://www.getwidget.dev/blog/', target: 'blank' }, - { text: 'Github', link: 'https://github.com/ionicfirebaseapp/getwidget', target: 'blank' }, - { text: 'FLUTTER APP KIT', link: 'https://market.getwidget.dev/products/', target: 'blank' }, - ], - activeHeaderLinks: true, - sidebar: [ - { - title: 'Introduction', - path: '/', - collapsable: true, - children: [ - '/', - ], - }, - { - title: 'Getting started', - path: '/getting-started', - initialOpenGroupIndex: -1, - collapsable: true, - children: [ - '/getting-started' - - ], - }, - { - title: 'GF Button', - path: '/gf-button', - initialOpenGroupIndex: -1, - collapsable: true, - children: [ - { title: 'Elevated Button', path: '/gf-button/standard-button' }, - { title: 'Pills Button', path: '/gf-button/pills-button' }, - { title: 'Square Button', path: '/gf-button/square-button' }, - { title: 'Icon Button', path: '/gf-button/icon-button' }, - { title: 'Social Button', path: '/gf-button/social-button' } - ] - }, - { - title: 'GF Badge', - initialOpenGroupIndex: -1, - collapsable: true, - path: '/gf-badge', - children: [ - '/gf-badge', - ], - }, - { - title: 'GF Avatar', - path: '/gf-avatar', - initialOpenGroupIndex: -1, - collapsable: true, - children: [ - '/gf-avatar', - ], - }, - { - title: 'GF Image', - path: '/gf-image', - collapsable: true, - children: [ - '/gf-image', - ], - }, - { - title: 'GF Card', - path: '/gf-card', - collapsable: true, - children: [ - '/gf-card', - ], - }, - { - title: 'GF Carousel', - path: '/gf-carousel', - collapsable: true, - children: [ - '/gf-carousel', - ], - }, - { - title: 'GF Tile', - path: '/gf-tile', - collapsable: true, - children: [ - '/gf-tile', - ], - }, - { - title: 'GF Tab', - path: '/gf-tab', - collapsable: true, - children: [ - '/gf-tab', - ], - }, - { - title: 'GF Floating Widget', - path: '/gf-floating-widget', - collapsable: true, - children: [ - '/gf-floating-widget', - ], - }, - { - title: 'GF Toast', - path: '/gf-toast', - collapsable: true, - children: [ - '/gf-toast', - ], - }, - { - title: 'GF Toggle', - path: '/gf-toggle', - collapsable: true, - children: [ - '/gf-toggle', - ], - }, - { - title: 'GF Typography', - path: '/gf-typography', - collapsable: true, - children: [ - '/gf-typography', - ], - }, - { - title: 'GF Drawer', - path: '/gf-drawer', - collapsable: true, - children: [ - '/gf-drawer', - ], - }, - { - title: 'GF Accordion', - path: '/gf-accordion', - collapsable: true, - children: [ - '/gf-accordion', - ], - }, - { - title: 'GF Alert', - path: '/gf-alert', - collapsable: true, - children: [ - '/gf-alert', - ], - }, - { - title: 'GF Appbar', - path: '/gf-appbar', - collapsable: true, - children: [ - '/gf-appbar', - ], - }, - { - title: 'GF Searchbar', - path: '/gf-searchbar', - collapsable: true, - children: [ - '/gf-searchbar', - ], - }, - { - title: 'GF Rating', - path: '/gf-rating', - collapsable: true, - children: [ - '/gf-rating', - ], - }, - { - title: 'GF Dropdown', - path: '/gf-dropdown', - collapsable: true, - children: [ - '/gf-dropdown', - ], - }, - { - title: 'GF Loader', - path: '/gf-loader', - collapsable: true, - children: [ - '/gf-loader', - ], - }, - { - title: 'GF Progress Bar', - path: '/gf-progress-bar', - collapsable: true, - children: [ - '/gf-progress-bar', - ], - }, - { - title: 'GF Shimmer', - path: '/gf-shimmer', - collapsable: true, - children: [ - '/gf-shimmer', - ], - }, - { - title: 'GF Animation', - path: '/gf-animation', - collapsable: true, - children: [ - '/gf-animation', - ], - }, - { - title: 'GF Border', - path: '/gf-border', - collapsable: true, - children: [ - '/gf-border', - ], - }, - { - title: 'GF Bottom Sheet', - path: '/gf-bottomsheet', - collapsable: true, - children: [ - '/gf-bottomsheet', - ], - }, - { - title: 'GF Checkbox', - path: '/gf-checkbox', - collapsable: true, - children: [ - '/gf-checkbox', - ], - }, - { - title: 'GF Checkbox ListTile', - path: '/gf-checkbox-listtile', - collapsable: true, - children: [ - '/gf-checkbox-listtile', - ], - }, - { - title: 'GF MultiSelect', - path: '/gf-multiselect', - collapsable: true, - children: [ - '/gf-multiselect', - ], - }, - { - title: 'GF IntroScreen', - path: '/gf-intro-screen', - collapsable: true, - children: [ - '/gf-intro-screen', - ], - }, - { - title: 'GF Radio', - path: '/gf-radio', - collapsable: true, - children: [ - '/gf-radio', - ], - }, - { - title: 'GF Radio ListTile', - path: '/gf-radio-listtile', - collapsable: true, - children: [ - '/gf-radio-listtile', - ], - }, - { - title: 'GF Sticky Header', - path: '/gf-sticky-header', - collapsable: true, - children: [ - '/gf-sticky-header', - ], - }, - - { - title: 'Changelog', - path: '/changelog', - collapsable: true, - children: [ - '/changelog', - ], - }, - { - title: 'Flutter UI KIT Market', - path: 'https://market.getwidget.dev/products/', - target: 'blank', - collapsable: false - }, - ], - }, - - /** - * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/ - */ - plugins: [ - '@vuepress/plugin-back-to-top', - '@vuepress/plugin-medium-zoom', - ['vuepress-plugin-clean-urls', - { - normalSuffix: '/', - indexSuffix: '/', - notFoundPath: '/404.html', - }, - ], - 'img-lazy', - ['autometa', default_options], - [ - "@mr-hope/copy-code", - { - showInMobile: true - }, - ] - ], -} diff --git a/src/.vuepress/enhanceApp.js b/src/.vuepress/enhanceApp.js deleted file mode 100644 index 8452a86..0000000 --- a/src/.vuepress/enhanceApp.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Client app enhancement file. - * - * https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements - */ - -export default ({ - Vue, // the version of Vue being used in the VuePress app - options, // the options for the root Vue instance - router, // the router instance for the app - siteData // site metadata -}) => { - // ...apply enhancements for the site. -} diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl deleted file mode 100644 index 4f54f64..0000000 --- a/src/.vuepress/styles/index.styl +++ /dev/null @@ -1,66 +0,0 @@ -/** - * Custom Styles here. - * - * ref：https://v1.vuepress.vuejs.org/config/#index-styl - */ - *{ - font-family: 'Nunito Sans', sans-serif; - } - -.home .hero img - max-width 450px !important - font-family: 'Nunito Sans', sans-serif; - -// .sidebar > .sidebar-links > li:not(:first-child) { -// margin-top: 0 !important; -// } - - - -// .sidebar > .sidebar-links > li > a.sidebar-link { -// font-size: 1em !important; -// line-height: 1.7 !important; -// font-weight: bold !important; -// font-family: 'Nunito Sans', sans-serif; -// } - -.sidebar-group{ - margin-bottom :0!important; - font-weight:bold; - span{ - color: black !important; - font-size: 1.1em; - font-weight: bold !important; - } - -} - - - -.sidebar-heading.clickable.active { -border-left-color:#f5f7f9!important; -} - -// .sidebar-heading { -// color: black !important; -// font-size: 1.1em; -// transition: color 0.15s ease !important; -// cursor: pointer !important; -// font-weight: bold !important; -// padding: 0.35rem 1.5rem 0.35rem 1.25rem !important; -// width: 100% !important; -// box-sizing: border-box !important; -// margin: 0 !important; -// border-left: 0.25rem solid transparent !important; -// font-family: 'Nunito Sans', sans-serif; -// } -.sidebar-heading:hover{ - background-color: #e6ecf1; -} - -