diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 00000000..dd84ea78
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 00000000..bbcbbe7d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 00000000..b09e1144
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at info@ionicfirebaseapp.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 00000000..a4e22705
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,92 @@
+# Contributing
+
+When contributing to this repository, please first discuss the change you wish to make via issue,
+email, or any other method with the owners of this repository before making a change.
+
+Please note we have a code of conduct, please follow it in all your interactions with the project.
+
+## Pull Request Process
+
+1. Ensure any install or build dependencies are removed before the end of the layer when doing a
+ build.
+2. Update the README.md with details of changes to the interface, this includes new environment
+ variables, exposed ports, useful file locations and container parameters.
+3. Increase the version numbers in any examples files and the README.md to the new version that this
+ Pull Request would represent.
+4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
+ do not have permission to do that, you may request the second reviewer to merge it for you.
+
+## Code of Conduct
+
+### Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+### Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+### Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+### Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+### Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+### Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/
diff --git a/demo_app/lib/assets/icons/avatar.png b/demo_app/lib/assets/icons/avatar.png
new file mode 100644
index 00000000..685ad1a3
Binary files /dev/null and b/demo_app/lib/assets/icons/avatar.png differ
diff --git a/demo_app/lib/assets/icons/back.png b/demo_app/lib/assets/icons/back.png
new file mode 100644
index 00000000..6c90e89b
Binary files /dev/null and b/demo_app/lib/assets/icons/back.png differ
diff --git a/demo_app/lib/assets/icons/badge.png b/demo_app/lib/assets/icons/badge.png
new file mode 100644
index 00000000..5d233517
Binary files /dev/null and b/demo_app/lib/assets/icons/badge.png differ
diff --git a/demo_app/lib/assets/icons/buttons.png b/demo_app/lib/assets/icons/buttons.png
new file mode 100644
index 00000000..d7cf8870
Binary files /dev/null and b/demo_app/lib/assets/icons/buttons.png differ
diff --git a/demo_app/lib/assets/icons/buttons.svg b/demo_app/lib/assets/icons/buttons.svg
new file mode 100644
index 00000000..415c67d3
--- /dev/null
+++ b/demo_app/lib/assets/icons/buttons.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/demo_app/lib/assets/icons/card.png b/demo_app/lib/assets/icons/card.png
new file mode 100644
index 00000000..79543ea6
Binary files /dev/null and b/demo_app/lib/assets/icons/card.png differ
diff --git a/demo_app/lib/assets/icons/chips.png b/demo_app/lib/assets/icons/chips.png
new file mode 100644
index 00000000..99b08372
Binary files /dev/null and b/demo_app/lib/assets/icons/chips.png differ
diff --git a/demo_app/lib/assets/icons/danger.svg b/demo_app/lib/assets/icons/danger.svg
new file mode 100644
index 00000000..dea91e14
--- /dev/null
+++ b/demo_app/lib/assets/icons/danger.svg
@@ -0,0 +1,12 @@
+
diff --git a/demo_app/lib/assets/icons/dark.svg b/demo_app/lib/assets/icons/dark.svg
new file mode 100644
index 00000000..a5e5eb1b
--- /dev/null
+++ b/demo_app/lib/assets/icons/dark.svg
@@ -0,0 +1,11 @@
+
diff --git a/demo_app/lib/assets/icons/dribble.svg b/demo_app/lib/assets/icons/dribble.svg
new file mode 100644
index 00000000..dbaca3b1
--- /dev/null
+++ b/demo_app/lib/assets/icons/dribble.svg
@@ -0,0 +1,6 @@
+
diff --git a/demo_app/lib/assets/icons/fb.svg b/demo_app/lib/assets/icons/fb.svg
new file mode 100644
index 00000000..e6078c98
--- /dev/null
+++ b/demo_app/lib/assets/icons/fb.svg
@@ -0,0 +1,6 @@
+
diff --git a/demo_app/lib/assets/icons/google.svg b/demo_app/lib/assets/icons/google.svg
new file mode 100644
index 00000000..d837859e
--- /dev/null
+++ b/demo_app/lib/assets/icons/google.svg
@@ -0,0 +1,6 @@
+
diff --git a/demo_app/lib/assets/icons/images.png b/demo_app/lib/assets/icons/images.png
new file mode 100644
index 00000000..b5e4cb02
Binary files /dev/null and b/demo_app/lib/assets/icons/images.png differ
diff --git a/demo_app/lib/assets/icons/info.svg b/demo_app/lib/assets/icons/info.svg
new file mode 100644
index 00000000..21fd193c
--- /dev/null
+++ b/demo_app/lib/assets/icons/info.svg
@@ -0,0 +1,12 @@
+
diff --git a/demo_app/lib/assets/icons/items.png b/demo_app/lib/assets/icons/items.png
new file mode 100644
index 00000000..1a495321
Binary files /dev/null and b/demo_app/lib/assets/icons/items.png differ
diff --git a/demo_app/lib/assets/icons/light.svg b/demo_app/lib/assets/icons/light.svg
new file mode 100644
index 00000000..bf6f73a6
--- /dev/null
+++ b/demo_app/lib/assets/icons/light.svg
@@ -0,0 +1,11 @@
+
diff --git a/demo_app/lib/assets/icons/link.svg b/demo_app/lib/assets/icons/link.svg
new file mode 100644
index 00000000..9260d523
--- /dev/null
+++ b/demo_app/lib/assets/icons/link.svg
@@ -0,0 +1,17 @@
+
diff --git a/demo_app/lib/assets/icons/linkedin.svg b/demo_app/lib/assets/icons/linkedin.svg
new file mode 100644
index 00000000..7adb1746
--- /dev/null
+++ b/demo_app/lib/assets/icons/linkedin.svg
@@ -0,0 +1,6 @@
+
diff --git a/demo_app/lib/assets/icons/lists.png b/demo_app/lib/assets/icons/lists.png
new file mode 100644
index 00000000..e3e93174
Binary files /dev/null and b/demo_app/lib/assets/icons/lists.png differ
diff --git a/demo_app/lib/assets/icons/menu.png b/demo_app/lib/assets/icons/menu.png
new file mode 100644
index 00000000..0932d5f5
Binary files /dev/null and b/demo_app/lib/assets/icons/menu.png differ
diff --git a/demo_app/lib/assets/icons/next.png b/demo_app/lib/assets/icons/next.png
new file mode 100644
index 00000000..8d3c89d9
Binary files /dev/null and b/demo_app/lib/assets/icons/next.png differ
diff --git a/demo_app/lib/assets/icons/pinterest.svg b/demo_app/lib/assets/icons/pinterest.svg
new file mode 100644
index 00000000..7aa538e1
--- /dev/null
+++ b/demo_app/lib/assets/icons/pinterest.svg
@@ -0,0 +1,6 @@
+
diff --git a/demo_app/lib/assets/icons/primary.svg b/demo_app/lib/assets/icons/primary.svg
new file mode 100644
index 00000000..c2ad37e4
--- /dev/null
+++ b/demo_app/lib/assets/icons/primary.svg
@@ -0,0 +1,19 @@
+
diff --git a/demo_app/lib/assets/icons/secondary.svg b/demo_app/lib/assets/icons/secondary.svg
new file mode 100644
index 00000000..56c06ebe
--- /dev/null
+++ b/demo_app/lib/assets/icons/secondary.svg
@@ -0,0 +1,17 @@
+
diff --git a/demo_app/lib/assets/icons/slack.svg b/demo_app/lib/assets/icons/slack.svg
new file mode 100644
index 00000000..ed08c2a0
--- /dev/null
+++ b/demo_app/lib/assets/icons/slack.svg
@@ -0,0 +1,6 @@
+
diff --git a/demo_app/lib/assets/icons/slider.png b/demo_app/lib/assets/icons/slider.png
new file mode 100644
index 00000000..03fb809b
Binary files /dev/null and b/demo_app/lib/assets/icons/slider.png differ
diff --git a/demo_app/lib/assets/icons/success.svg b/demo_app/lib/assets/icons/success.svg
new file mode 100644
index 00000000..b06b4ae5
--- /dev/null
+++ b/demo_app/lib/assets/icons/success.svg
@@ -0,0 +1,11 @@
+
diff --git a/demo_app/lib/assets/icons/tabs.png b/demo_app/lib/assets/icons/tabs.png
new file mode 100644
index 00000000..49678a20
Binary files /dev/null and b/demo_app/lib/assets/icons/tabs.png differ
diff --git a/demo_app/lib/assets/icons/toast.png b/demo_app/lib/assets/icons/toast.png
new file mode 100644
index 00000000..44ee2d77
Binary files /dev/null and b/demo_app/lib/assets/icons/toast.png differ
diff --git a/demo_app/lib/assets/icons/toggle.png b/demo_app/lib/assets/icons/toggle.png
new file mode 100644
index 00000000..f33816f9
Binary files /dev/null and b/demo_app/lib/assets/icons/toggle.png differ
diff --git a/demo_app/lib/assets/icons/twitter.svg b/demo_app/lib/assets/icons/twitter.svg
new file mode 100644
index 00000000..ac962749
--- /dev/null
+++ b/demo_app/lib/assets/icons/twitter.svg
@@ -0,0 +1,6 @@
+
diff --git a/demo_app/lib/assets/icons/typo.png b/demo_app/lib/assets/icons/typo.png
new file mode 100644
index 00000000..90592362
Binary files /dev/null and b/demo_app/lib/assets/icons/typo.png differ
diff --git a/demo_app/lib/assets/icons/warning.svg b/demo_app/lib/assets/icons/warning.svg
new file mode 100644
index 00000000..aae2b731
--- /dev/null
+++ b/demo_app/lib/assets/icons/warning.svg
@@ -0,0 +1,10 @@
+
diff --git a/demo_app/lib/assets/icons/whatsapp.svg b/demo_app/lib/assets/icons/whatsapp.svg
new file mode 100644
index 00000000..992ff345
--- /dev/null
+++ b/demo_app/lib/assets/icons/whatsapp.svg
@@ -0,0 +1,6 @@
+
diff --git a/demo_app/lib/assets/icons/youtube.svg b/demo_app/lib/assets/icons/youtube.svg
new file mode 100644
index 00000000..b2503883
--- /dev/null
+++ b/demo_app/lib/assets/icons/youtube.svg
@@ -0,0 +1,6 @@
+
diff --git a/demo_app/lib/assets/logo/logo.png b/demo_app/lib/assets/logo/logo.png
new file mode 100644
index 00000000..27e5cae0
Binary files /dev/null and b/demo_app/lib/assets/logo/logo.png differ
diff --git a/demo_app/lib/screens/avatars.dart b/demo_app/lib/screens/avatars.dart
index 6b9ac2ad..fecf6873 100644
--- a/demo_app/lib/screens/avatars.dart
+++ b/demo_app/lib/screens/avatars.dart
@@ -2,9 +2,9 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ui_kit/components/avatar/gf_avatar.dart';
import 'package:ui_kit/components/card/gf_card.dart';
-import 'package:ui_kit/components/header/gf_header.dart';
+import 'package:ui_kit/components/typography/gf_typography.dart';
import 'package:ui_kit/shape/gf_avatar_shape.dart';
-import 'package:ui_kit/types/gf_heading_type.dart';
+import 'package:ui_kit/types/gf_typography_type.dart';
import 'package:ui_kit/colors/gf_color.dart';
class Avatars extends StatefulWidget {
@@ -27,9 +27,9 @@ class _AvatarsState extends State {
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFHeader(
+ GFTypography(
text: 'Circle Avatar',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -109,9 +109,9 @@ class _AvatarsState extends State {
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFHeader(
+ GFTypography(
text: 'Square Avatar',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -200,9 +200,9 @@ class _AvatarsState extends State {
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFHeader(
+ GFTypography(
text: 'Standard Avatar',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
diff --git a/demo_app/lib/screens/badges.dart b/demo_app/lib/screens/badges.dart
index c355f07b..5beb7ca3 100644
--- a/demo_app/lib/screens/badges.dart
+++ b/demo_app/lib/screens/badges.dart
@@ -4,14 +4,15 @@ import 'package:ui_kit/components/badge/gf_badge.dart';
import 'package:ui_kit/components/badge/gf_button_badge.dart';
import 'package:ui_kit/components/badge/gf_icon_badge.dart';
import 'package:ui_kit/components/card/gf_card.dart';
-import 'package:ui_kit/components/header/gf_header.dart';
+import 'package:ui_kit/components/typography/gf_typography.dart';
import 'package:ui_kit/components/tabs/gf_tabs.dart';
import 'package:ui_kit/components/button/gf_icon_button.dart';
import 'package:ui_kit/position/gf_position.dart';
import 'package:ui_kit/shape/gf_badge_shape.dart';
import 'package:ui_kit/shape/gf_button_shape.dart';
+import 'package:ui_kit/shape/gf_icon_button_shape.dart';
import 'package:ui_kit/size/gf_size.dart';
-import 'package:ui_kit/types/gf_heading_type.dart';
+import 'package:ui_kit/types/gf_typography_type.dart';
import 'package:ui_kit/types/gf_type.dart';
import 'package:ui_kit/components/tabs/gf_tabBarView.dart';
@@ -51,9 +52,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Types of Badges',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -90,9 +91,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Circled Badges with different Sizes',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -126,9 +127,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Squared Badges with different sizes',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -162,9 +163,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Pills with different sizes',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -201,9 +202,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Standard Badges with different sizes',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -241,9 +242,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Types of Button Badges',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -255,7 +256,7 @@ class _BadgesState extends State {
shape: GFButtonShape.pills,
type: GFType.solid,
color: GFColor.info,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.warning,
shape: GFBadgeShape.circle,
@@ -268,7 +269,7 @@ class _BadgesState extends State {
shape: GFButtonShape.square,
type: GFType.solid,
color: GFColor.warning,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
shape: GFBadgeShape.circle,
color: GFColor.info,
@@ -280,7 +281,7 @@ class _BadgesState extends State {
color: GFColor.success,
shape: GFButtonShape.standard,
type: GFType.solid,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
textColor: GFColor.white,
color: GFColor.danger,
@@ -297,9 +298,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Positions of Button Badges',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -311,7 +312,7 @@ class _BadgesState extends State {
shape: GFButtonShape.pills,
type: GFType.solid,
color: GFColor.info,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.warning,
shape: GFBadgeShape.circle,
@@ -324,7 +325,7 @@ class _BadgesState extends State {
shape: GFButtonShape.square,
type: GFType.solid,
color: GFColor.warning,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
shape: GFBadgeShape.circle,
color: GFColor.info,
@@ -337,7 +338,7 @@ class _BadgesState extends State {
color: GFColor.success,
shape: GFButtonShape.standard,
type: GFType.solid,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
textColor: GFColor.white,
color: GFColor.danger,
@@ -355,9 +356,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Pilled shape Button Badges with sizes',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -370,7 +371,7 @@ class _BadgesState extends State {
size: GFSize.large,
type: GFType.solid,
color: GFColor.info,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.warning,
size: GFSize.large,
@@ -385,7 +386,7 @@ class _BadgesState extends State {
size: GFSize.medium,
type: GFType.outline,
color: GFColor.info,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.warning,
size: GFSize.medium,
@@ -400,7 +401,7 @@ class _BadgesState extends State {
size: GFSize.small,
type: GFType.transparent,
color: GFColor.info,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.warning,
size: GFSize.small,
@@ -418,9 +419,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Squared shape Button Badges with sizes',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -433,7 +434,7 @@ class _BadgesState extends State {
size: GFSize.large,
type: GFType.solid,
color: GFColor.warning,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.info,
size: GFSize.large,
@@ -448,7 +449,7 @@ class _BadgesState extends State {
size: GFSize.medium,
type: GFType.outline,
color: GFColor.warning,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.info,
size: GFSize.medium,
@@ -463,7 +464,7 @@ class _BadgesState extends State {
size: GFSize.small,
type: GFType.transparent,
color: GFColor.warning,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.info,
size: GFSize.small,
@@ -481,9 +482,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Standard Button Badges with sizes',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -496,7 +497,7 @@ class _BadgesState extends State {
size: GFSize.large,
type: GFType.solid,
color: GFColor.primary,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.danger,
size: GFSize.large,
@@ -512,7 +513,7 @@ class _BadgesState extends State {
size: GFSize.medium,
type: GFType.outline,
color: GFColor.primary,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.danger,
textColor: GFColor.white,
@@ -528,7 +529,7 @@ class _BadgesState extends State {
size: GFSize.small,
type: GFType.transparent,
color: GFColor.primary,
- counterChild: GFBadge(
+ icon: GFBadge(
text: '12',
color: GFColor.danger,
textColor: GFColor.white,
@@ -551,9 +552,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Types of Icon Badges',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -562,9 +563,8 @@ class _BadgesState extends State {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFIconBadge(
- onPressed: null,
child: GFIconButton(
- shape: GFButtonShape.pills,
+ shape: GFIconButtonShape.pills,
color: GFColor.success,
type: GFType.solid,
onPressed: null,
@@ -576,9 +576,8 @@ class _BadgesState extends State {
size: GFSize.small,
)),
GFIconBadge(
- onPressed: null,
child: GFIconButton(
- shape: GFButtonShape.square,
+ shape: GFIconButtonShape.square,
color: GFColor.primary,
type: GFType.solid,
onPressed: null,
@@ -590,9 +589,8 @@ class _BadgesState extends State {
size: GFSize.small,
)),
GFIconBadge(
- onPressed: null,
child: GFIconButton(
- shape: GFButtonShape.pills,
+ shape: GFIconButtonShape.pills,
color: GFColor.danger,
type: GFType.solid,
onPressed: null,
@@ -604,9 +602,8 @@ class _BadgesState extends State {
size: GFSize.small,
)),
GFIconBadge(
- onPressed: null,
child: GFIconButton(
- shape: GFButtonShape.standard,
+ shape: GFIconButtonShape.standard,
type: GFType.solid,
color: GFColor.warning,
onPressed: null,
@@ -625,9 +622,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Shapes of Icon Badges',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -636,9 +633,8 @@ class _BadgesState extends State {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFIconBadge(
- onPressed: null,
child: GFIconButton(
- shape: GFButtonShape.pills,
+ shape: GFIconButtonShape.pills,
onPressed: null,
icon: Icon(Icons.mail),
),
@@ -648,9 +644,8 @@ class _BadgesState extends State {
size: GFSize.small,
)),
GFIconBadge(
- onPressed: null,
child: GFIconButton(
- shape: GFButtonShape.square,
+ shape: GFIconButtonShape.square,
onPressed: null,
icon: Icon(Icons.mail),
),
@@ -661,9 +656,8 @@ class _BadgesState extends State {
size: GFSize.small,
)),
GFIconBadge(
- onPressed: null,
child: GFIconButton(
- shape: GFButtonShape.pills,
+ shape: GFIconButtonShape.pills,
onPressed: null,
icon: Icon(Icons.mail),
),
@@ -673,9 +667,8 @@ class _BadgesState extends State {
size: GFSize.small,
)),
GFIconBadge(
- onPressed: null,
child: GFIconButton(
- shape: GFButtonShape.standard,
+ shape: GFIconButtonShape.standard,
onPressed: null,
icon: Icon(Icons.mail),
),
@@ -693,9 +686,9 @@ class _BadgesState extends State {
GFCard(
content: Column(
children: [
- GFHeader(
+ GFTypography(
text: 'Sizes of Icon Badges',
- type: GFHeadingType.typo6,
+ type: GFTypographyType.typo6,
),
SizedBox(
height: 10,
@@ -704,7 +697,6 @@ class _BadgesState extends State {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFIconBadge(
- onPressed: null,
child: GFIconButton(
size: GFSize.large,
onPressed: null,
@@ -716,7 +708,6 @@ class _BadgesState extends State {
size: GFSize.small,
)),
GFIconBadge(
- onPressed: null,
child: GFIconButton(
size: GFSize.medium,
onPressed: null,
@@ -728,7 +719,6 @@ class _BadgesState extends State {
size: GFSize.small,
)),
GFIconBadge(
- onPressed: null,
child: GFIconButton(
size: GFSize.small,
onPressed: null,
diff --git a/demo_app/lib/screens/badges/badges.dart b/demo_app/lib/screens/badges/badges.dart
new file mode 100644
index 00000000..34ff7a15
--- /dev/null
+++ b/demo_app/lib/screens/badges/badges.dart
@@ -0,0 +1,295 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:ui_kit/colors/gf_color.dart';
+import 'package:ui_kit/components/badge/gf_badge.dart';
+import 'package:ui_kit/components/badge/gf_button_badge.dart';
+import 'package:ui_kit/components/badge/gf_icon_badge.dart';
+import 'package:ui_kit/components/card/gf_card.dart';
+import 'package:ui_kit/components/typography/gf_typography.dart';
+import 'package:ui_kit/components/tabs/gf_tabs.dart';
+import 'package:ui_kit/components/button/gf_icon_button.dart';
+import 'package:ui_kit/position/gf_position.dart';
+import 'package:ui_kit/shape/gf_badge_shape.dart';
+import 'package:ui_kit/shape/gf_button_shape.dart';
+import 'package:ui_kit/size/gf_size.dart';
+import 'package:ui_kit/types/gf_typography_type.dart';
+import 'package:ui_kit/types/gf_type.dart';
+import 'package:ui_kit/components/tabs/gf_tabBarView.dart';
+
+class Badges extends StatefulWidget {
+ @override
+ _BadgesState createState() => _BadgesState();
+}
+
+class _BadgesState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ backgroundColor: getGFColor(GFColor.dark),
+ title: Text(
+ 'Badges',
+ style: TextStyle(fontSize: 17),
+ ),
+ centerTitle: true,
+ ),
+ body: ListView(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 20),
+ child: GFTypography(
+ text: 'With Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButtonBadge(
+ icon: GFBadge(
+ text: '6',
+ shape: GFBadgeShape.pills,
+ ),
+ onPressed: () {},
+ text: 'Primary',
+ ),
+ GFButtonBadge(
+ icon: GFBadge(
+ text: '6',
+ shape: GFBadgeShape.pills,
+ ),
+ onPressed: () {},
+ text: 'Second',
+ color: GFColor.secondary,
+ ),
+ GFButtonBadge(
+ icon: GFBadge(
+ text: '6',
+ shape: GFBadgeShape.pills,
+ ),
+ onPressed: () {},
+ text: 'Success',
+ color: GFColor.success,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 20,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButtonBadge(
+ icon: GFBadge(
+ text: '6',
+ shape: GFBadgeShape.pills,
+ ),
+ onPressed: () {},
+ text: 'Warning',
+ color: GFColor.warning,
+ ),
+ GFButtonBadge(
+ icon: GFBadge(
+ text: '6',
+ shape: GFBadgeShape.pills,
+ ),
+ onPressed: () {},
+ text: 'Danger',
+ color: GFColor.danger,
+ ),
+ GFButtonBadge(
+ icon: GFBadge(
+ text: '6',
+ shape: GFBadgeShape.pills,
+ ),
+ onPressed: () {},
+ text: 'Info',
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 20,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButtonBadge(
+ icon: GFBadge(
+ text: '6',
+ shape: GFBadgeShape.pills,
+ ),
+ onPressed: () {},
+ text: 'Light',
+ color: GFColor.light,
+ ),
+ GFButtonBadge(
+ icon: GFBadge(
+ text: '6',
+ shape: GFBadgeShape.pills,
+ ),
+ onPressed: () {},
+ text: 'Dark',
+ textStyle: TextStyle(color: getGFColor(GFColor.white)),
+ color: GFColor.dark,
+ ),
+ GFButtonBadge(
+ icon: GFBadge(
+ text: '6',
+ shape: GFBadgeShape.pills,
+ ),
+ onPressed: () {},
+ text: 'Link',
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 20),
+ child: GFTypography(
+ text: 'Icon with Badges',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ children: [
+ SizedBox(
+ height: 20,
+ ),
+ Row(
+ children: [
+ GFIconBadge(
+ child: GFIconButton(
+ type: GFType.transparent,
+ onPressed: () {},
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/primary.svg',
+ color: getGFColor(GFColor.primary),
+ )),
+ counterChild: GFBadge(
+ text: '12',
+ shape: GFBadgeShape.circle,
+ size: GFSize.small,
+ )),
+ GFIconBadge(
+ child: GFIconButton(
+ type: GFType.transparent,
+ onPressed: () {},
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/secondary.svg',
+ color: getGFColor(GFColor.secondary),
+ )),
+ counterChild: GFBadge(
+ text: '12',
+ shape: GFBadgeShape.circle,
+ size: GFSize.small,
+ )),
+ GFIconBadge(
+ child: GFIconButton(
+ type: GFType.transparent,
+ onPressed: () {},
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/success.svg',
+ color: getGFColor(GFColor.success),
+ )),
+ counterChild: GFBadge(
+ text: '12',
+ shape: GFBadgeShape.circle,
+ size: GFSize.small,
+ )),
+ GFIconBadge(
+ child: GFIconButton(
+ type: GFType.transparent,
+ onPressed: () {},
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/warning.svg',
+ color: getGFColor(GFColor.warning),
+ )),
+ counterChild: GFBadge(
+ text: '12',
+ shape: GFBadgeShape.circle,
+ size: GFSize.small,
+ )),
+ GFIconBadge(
+ child: GFIconButton(
+ type: GFType.transparent,
+ onPressed: () {},
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/danger.svg',
+ color: getGFColor(GFColor.danger),
+ )),
+ counterChild: GFBadge(
+ text: '12',
+ shape: GFBadgeShape.circle,
+ size: GFSize.small,
+ )),
+ ],
+ ),
+ Row(
+ children: [
+ GFIconBadge(
+ child: GFIconButton(
+ type: GFType.transparent,
+ onPressed: () {},
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/info.svg',
+ color: getGFColor(GFColor.info),
+ )),
+ counterChild: GFBadge(
+ text: '12',
+ shape: GFBadgeShape.standard,
+ size: GFSize.small,
+ )),
+ GFIconBadge(
+ child: GFIconButton(
+ type: GFType.transparent,
+ onPressed: () {},
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/light.svg',
+ color: getGFColor(GFColor.light),
+ )),
+ counterChild: GFBadge(
+ text: '12',
+ shape: GFBadgeShape.square,
+ size: GFSize.small,
+ )),
+ GFIconBadge(
+ child: GFIconButton(
+ type: GFType.transparent,
+ onPressed: () {},
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/dark.svg',
+ color: getGFColor(GFColor.dark),
+ )),
+ counterChild: GFBadge(
+ text: '12',
+ shape: GFBadgeShape.pills,
+ size: GFSize.small,
+ )),
+ ],
+ )
+ ],
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+}
diff --git a/demo_app/lib/screens/button/button-types.dart b/demo_app/lib/screens/button/button-types.dart
new file mode 100644
index 00000000..a9ffb0bb
--- /dev/null
+++ b/demo_app/lib/screens/button/button-types.dart
@@ -0,0 +1,237 @@
+import 'package:demo_app/screens/avatars.dart';
+import 'package:demo_app/screens/button/shadow-buttons.dart';
+import 'package:ui_kit/components/avatar/gf_avatar.dart';
+
+import 'standard-buttons.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:ui_kit/colors/gf_color.dart';
+import 'package:ui_kit/components/card/gf_card.dart';
+import 'package:ui_kit/components/list_tile/gf_list_tile.dart';
+import 'pill-buttons.dart';
+import 'square-buttons.dart';
+import 'icon-buttons.dart';
+import 'social-buttons.dart';
+
+class ButtonTypes extends StatefulWidget {
+ @override
+ _ButtonTypesState createState() => _ButtonTypesState();
+}
+
+class _ButtonTypesState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ backgroundColor: getGFColor(GFColor.dark),
+ leading: GestureDetector(
+ onTap: (){
+ Navigator.pop(context);
+ },
+ child:Image.asset('lib/assets/icons/back.png')
+ ),
+ title: Text('Buttons', style: TextStyle(fontSize: 17),),
+ centerTitle: true,
+ ),
+
+ body: ListView(
+ children: [
+ SizedBox(
+ height: 20,
+ ),
+ GestureDetector(
+ onTap: (){
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (BuildContext context) => StandardButtons()
+ ),
+ );
+ },
+ child:Container(
+ margin: EdgeInsets.only(left: 15, right: 15, top: 20),
+ padding: EdgeInsets.all(5),
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.all(Radius.circular(7)),
+ color: getGFColor(GFColor.dark),
+ boxShadow: [
+ BoxShadow(
+ color: Colors.black.withOpacity(0.40),
+ blurRadius: 5.0
+ )
+ ]
+ ),
+ child: GFListTile(
+ color: getGFColor(GFColor.dark),
+ showDivider: false,
+ title: Text('Standard Buttons', style: TextStyle(color: getGFColor(GFColor.white)),),
+ icon: Image.asset('lib/assets/icons/next.png'),
+
+ ),
+ )
+ ),
+
+ GestureDetector(
+ onTap: (){
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (BuildContext context) => PillsButtons()
+ ),
+ );
+ },
+ child:Container(
+ margin: EdgeInsets.only(left: 15, right: 15, top: 20),
+ padding: EdgeInsets.all(5),
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.all(Radius.circular(7)),
+ color: getGFColor(GFColor.dark),
+ boxShadow: [
+ BoxShadow(
+ color: Colors.black.withOpacity(0.40),
+ blurRadius: 5.0
+ )
+ ]
+ ),
+ child: GFListTile(
+ color: getGFColor(GFColor.dark),
+ showDivider: false,
+ title: Text('Pills Buttons', style: TextStyle(color: getGFColor(GFColor.white)),),
+ icon: Image.asset('lib/assets/icons/next.png')
+ ),
+ )
+ ),
+
+
+ GestureDetector(
+ onTap: (){
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (BuildContext context) => SquareButtons()
+ ),
+ );
+ },
+ child:Container(
+ margin: EdgeInsets.only(left: 15, right: 15, top: 20),
+ padding: EdgeInsets.all(5),
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.all(Radius.circular(7)),
+ color: getGFColor(GFColor.dark),
+ boxShadow: [
+ BoxShadow(
+ color: Colors.black.withOpacity(0.40),
+ blurRadius: 5.0
+ )
+ ]
+ ),
+ child: GFListTile(
+ color: getGFColor(GFColor.dark),
+ showDivider: false,
+ title: Text('Square Buttons', style: TextStyle(color: getGFColor(GFColor.white)),),
+ icon: Image.asset('lib/assets/icons/next.png')
+ ),
+ )
+ ),
+
+ GestureDetector(
+ onTap: (){
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (BuildContext context) => ShadowButtons()
+ ),
+ );
+ },
+ child:Container(
+ margin: EdgeInsets.only(left: 15, right: 15, top: 20),
+ padding: EdgeInsets.all(5),
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.all(Radius.circular(7)),
+ color: getGFColor(GFColor.dark),
+ boxShadow: [
+ BoxShadow(
+ color: Colors.black.withOpacity(0.40),
+ blurRadius: 5.0
+ )
+ ]
+ ),
+ child: GFListTile(
+ color: getGFColor(GFColor.dark),
+ showDivider: false,
+ title: Text('Shadow Buttons', style: TextStyle(color: getGFColor(GFColor.white)),),
+ icon: Image.asset('lib/assets/icons/next.png')
+ ),
+ )
+ ),
+
+ GestureDetector(
+ onTap: (){
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (BuildContext context) => IconButtons()
+ ),
+ );
+ },
+ child:Container(
+ margin: EdgeInsets.only(left: 15, right: 15, top: 20),
+ padding: EdgeInsets.all(5),
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.all(Radius.circular(7)),
+ color: getGFColor(GFColor.dark),
+ boxShadow: [
+ BoxShadow(
+ color: Colors.black.withOpacity(0.40),
+ blurRadius: 5.0
+ )
+ ]
+ ),
+ child: GFListTile(
+ color: getGFColor(GFColor.dark),
+ showDivider: false,
+ title: Text('Icons Buttons', style: TextStyle(color: getGFColor(GFColor.white)),),
+ icon: Image.asset('lib/assets/icons/next.png')
+ ),
+ )
+ ),
+
+ GestureDetector(
+ onTap: (){
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (BuildContext context) => SocialButtons()
+ ),
+ );
+ },
+ child:Container(
+
+ margin: EdgeInsets.only(left: 15, right: 15, top: 20, bottom: 20),
+ padding: EdgeInsets.all(5),
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.all(Radius.circular(7)),
+ color: getGFColor(GFColor.dark),
+ boxShadow: [
+ BoxShadow(
+ color: Colors.black.withOpacity(0.40),
+ blurRadius: 5.0
+ )
+ ]
+ ),
+ child: GFListTile(
+ color: getGFColor(GFColor.dark),
+ showDivider: false,
+ title: Text('Social Buttons', style: TextStyle(color: getGFColor(GFColor.white)),),
+ icon: Image.asset('lib/assets/icons/next.png')
+ ),
+ )
+ ),
+
+
+ ],
+ )
+
+ );
+ }
+}
diff --git a/demo_app/lib/screens/button/icon-buttons.dart b/demo_app/lib/screens/button/icon-buttons.dart
new file mode 100644
index 00000000..80309f0b
--- /dev/null
+++ b/demo_app/lib/screens/button/icon-buttons.dart
@@ -0,0 +1,1185 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/colors/gf_color.dart';
+import 'package:ui_kit/components/button/gf_button.dart';
+import 'package:ui_kit/components/button/gf_icon_button.dart';
+import 'package:ui_kit/components/card/gf_card.dart';
+import 'package:ui_kit/components/typography/gf_typography.dart';
+import 'package:ui_kit/types/gf_typography_type.dart';
+import 'package:ui_kit/shape/gf_button_shape.dart';
+import 'package:ui_kit/types/gf_type.dart';
+import 'package:ui_kit/size/gf_size.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class IconButtons extends StatefulWidget {
+ @override
+ _IconButtonsState createState() => _IconButtonsState();
+}
+
+class _IconButtonsState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ backgroundColor: getGFColor(GFColor.dark),
+ leading: GestureDetector(
+ onTap: () {
+ Navigator.pop(context);
+ },
+ child: Image.asset('lib/assets/icons/back.png')),
+ title: Text(
+ 'Icon Buttons',
+ style: TextStyle(fontSize: 17),
+ ),
+ centerTitle: true,
+ ),
+ body: ListView(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 30),
+ child: GFTypography(
+ text: 'Solid Icons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+//
+// GFCard(
+// content: Column(
+// children: [
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+//// GFIconButton(
+//// onPressed: (){},
+//// icon: Icon(Icons.ac_unit),
+////// iconSize: 12.0,
+//// type: GFType.solid,
+//// shape: GFButtonShape.pills,
+//// size: GFSize.large,
+////// buttonBoxShadow: true,
+////// color: GFColor.primary,
+////// boxShadow: BoxShadow(
+////// color: Colors.pink,
+////// blurRadius: 2.0,
+////// spreadRadius: 1.0,
+////// offset: Offset.zero,
+////// ),
+////// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
+////// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
+//// ),
+//
+//
+// ],
+// ),
+// ],
+// )
+// )
+
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text(
+ "Primary",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/primary.svg')),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text("Second"),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/secondary.svg'),
+ color: GFColor.secondary,
+ ),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text(
+ "Success",
+ ),
+ icon:
+ SvgPicture.asset('lib/assets/icons/success.svg'),
+ color: GFColor.success,
+ ),
+ )
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Warning",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/warning.svg'),
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Danger",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/danger.svg'),
+ color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Info",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/info.svg'),
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Light",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/light.svg'),
+ type: GFType.solid,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Dark",
+ style: TextStyle(color: getGFColor(GFColor.white)),
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/dark.svg'),
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/link.svg'),
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Outline Icons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ type: GFType.outline,
+ child: Text(
+ "Primary",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/primary.svg',
+ color: getGFColor(GFColor.primary),
+ )),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text("Second"),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/secondary.svg',
+ color: getGFColor(GFColor.secondary),
+ ),
+ color: GFColor.secondary,
+ type: GFType.outline,
+ ),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text(
+ "Success",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/success.svg',
+ color: getGFColor(GFColor.success),
+ ),
+ color: GFColor.success,
+ type: GFType.outline,
+ ),
+ )
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Warning",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/warning.svg',
+ color: getGFColor(GFColor.warning),
+ ),
+ color: GFColor.warning,
+ type: GFType.outline,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Danger",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/danger.svg',
+ color: getGFColor(GFColor.danger),
+ ),
+ color: GFColor.danger,
+ type: GFType.outline,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Info",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/info.svg',
+ color: getGFColor(GFColor.info),
+ ),
+ color: GFColor.info,
+ type: GFType.outline,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Light",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/light.svg',
+ color: getGFColor(GFColor.light),
+ ),
+ type: GFType.outline,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Dark",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/dark.svg',
+ color: getGFColor(GFColor.dark),
+ ),
+ color: GFColor.dark,
+ type: GFType.outline,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/link.svg',
+ color: getGFColor(GFColor.alt),
+ ),
+ color: GFColor.transparent,
+ type: GFType.outline,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Outline 2x Icons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ type: GFType.outline2x,
+ child: Text(
+ "Primary",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/primary.svg',
+ color: getGFColor(GFColor.primary),
+ )),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text("Second"),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/secondary.svg',
+ color: getGFColor(GFColor.secondary),
+ ),
+ color: GFColor.secondary,
+ type: GFType.outline2x,
+ ),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text(
+ "Success",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/success.svg',
+ color: getGFColor(GFColor.success),
+ ),
+ color: GFColor.success,
+ type: GFType.outline2x,
+ ),
+ )
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Warning",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/warning.svg',
+ color: getGFColor(GFColor.warning),
+ ),
+ color: GFColor.warning,
+ type: GFType.outline2x,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Danger",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/danger.svg',
+ color: getGFColor(GFColor.danger),
+ ),
+ color: GFColor.danger,
+ type: GFType.outline2x,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Info",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/info.svg',
+ color: getGFColor(GFColor.info),
+ ),
+ color: GFColor.info,
+ type: GFType.outline2x,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Light",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/light.svg',
+ color: getGFColor(GFColor.light),
+ ),
+ type: GFType.outline2x,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Dark",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/dark.svg',
+ color: getGFColor(GFColor.dark),
+ ),
+ color: GFColor.dark,
+ type: GFType.outline2x,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/link.svg',
+ color: getGFColor(GFColor.alt),
+ ),
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Square Icons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.square,
+ child: Text(
+ "Primary",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/primary.svg')),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.square,
+ child: Text("Second"),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/secondary.svg'),
+ color: GFColor.secondary,
+ ),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ shape: GFButtonShape.square,
+ onPressed: () {},
+ child: Text(
+ "Success",
+ ),
+ icon:
+ SvgPicture.asset('lib/assets/icons/success.svg'),
+ color: GFColor.success,
+ ),
+ )
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.square,
+ child: Text(
+ "Warning",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/warning.svg'),
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.square,
+ child: Text(
+ "Danger",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/danger.svg'),
+ color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.square,
+ child: Text(
+ "Info",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/info.svg'),
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.square,
+ child: Text(
+ "Light",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/light.svg'),
+ type: GFType.solid,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.square,
+ child: Text(
+ "Dark",
+ style: TextStyle(color: getGFColor(GFColor.white)),
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/dark.svg'),
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.square,
+ child: Text(
+ "Link",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/link.svg'),
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Pills Icons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Primary",
+ ),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/primary.svg')),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text("Second"),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/secondary.svg'),
+ color: GFColor.secondary,
+ ),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ shape: GFButtonShape.pills,
+ onPressed: () {},
+ child: Text(
+ "Success",
+ ),
+ icon:
+ SvgPicture.asset('lib/assets/icons/success.svg'),
+ color: GFColor.success,
+ ),
+ )
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Warning",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/warning.svg'),
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Danger",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/danger.svg'),
+ color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Info",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/info.svg'),
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Light",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/light.svg'),
+ type: GFType.solid,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Dark",
+ style: TextStyle(color: getGFColor(GFColor.white)),
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/dark.svg'),
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Link",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/link.svg'),
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Shadow Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text(
+ "Primary",
+ ),
+ icon:
+ SvgPicture.asset('lib/assets/icons/primary.svg'),
+ buttonBoxShadow: true,
+ ),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text("Second"),
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/secondary.svg'),
+ color: GFColor.secondary,
+ buttonBoxShadow: true,
+ ),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text(
+ "Success",
+ ),
+ icon:
+ SvgPicture.asset('lib/assets/icons/success.svg'),
+ color: GFColor.success,
+ buttonBoxShadow: true,
+ ),
+ )
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Warning",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/warning.svg'),
+ color: GFColor.warning,
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Danger",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/danger.svg'),
+ color: GFColor.danger,
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Info",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/info.svg'),
+ color: GFColor.info,
+ buttonBoxShadow: true,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Light",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/light.svg'),
+ type: GFType.solid,
+ color: GFColor.light,
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Dark",
+ style: TextStyle(color: getGFColor(GFColor.white)),
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/dark.svg'),
+ color: GFColor.dark,
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/link.svg'),
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Button Sizes',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text("Large",
+ style: TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.large,
+ icon: SvgPicture.asset('lib/assets/icons/primary.svg'),
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text("Normal",
+ style: TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ icon:
+ SvgPicture.asset('lib/assets/icons/secondary.svg'),
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text("Small",
+ style: TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.small,
+ icon: SvgPicture.asset('lib/assets/icons/info.svg'),
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Block Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Large",
+ ),
+ size: GFSize.large,
+ icon: SvgPicture.asset('lib/assets/icons/primary.svg'),
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Normal",
+ ),
+ size: GFSize.medium,
+ icon: SvgPicture.asset('lib/assets/icons/secondary.svg'),
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Small",
+ ),
+ size: GFSize.small,
+ icon: SvgPicture.asset('lib/assets/icons/success.svg'),
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 20),
+ child: GFTypography(
+ text: 'Icons Only',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFIconButton(
+ icon:
+ SvgPicture.asset('lib/assets/icons/primary.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: GFColor.secondary,
+ icon: SvgPicture.asset(
+ 'lib/assets/icons/secondary.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: GFColor.success,
+ icon:
+ SvgPicture.asset('lib/assets/icons/success.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: GFColor.warning,
+ icon:
+ SvgPicture.asset('lib/assets/icons/warning.svg'),
+ onPressed: () {}),
+ ],
+ ),
+ SizedBox(
+ height: 20,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFIconButton(
+ color: GFColor.danger,
+ icon: SvgPicture.asset('lib/assets/icons/danger.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: GFColor.info,
+ icon: SvgPicture.asset('lib/assets/icons/info.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: GFColor.light,
+ icon: SvgPicture.asset('lib/assets/icons/light.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: GFColor.dark,
+ icon: SvgPicture.asset('lib/assets/icons/dark.svg'),
+ onPressed: () {}),
+ ],
+ ),
+ SizedBox(
+ height: 20,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFIconButton(
+ type: GFType.outline,
+ icon: Icon(Icons.settings),
+ onPressed: () {}),
+ GFIconButton(
+ type: GFType.outline,
+ color: GFColor.secondary,
+ icon: Icon(Icons.send),
+ onPressed: () {}),
+ GFIconButton(
+ type: GFType.outline,
+ color: GFColor.success,
+ icon: Icon(Icons.file_download),
+ onPressed: () {}),
+ GFIconButton(
+ type: GFType.outline,
+ color: GFColor.warning,
+ icon: Icon(Icons.warning),
+ onPressed: () {}),
+ ],
+ ),
+ SizedBox(
+ height: 20,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFIconButton(
+ type: GFType.outline,
+ color: GFColor.danger,
+ icon: Icon(Icons.insert_drive_file),
+ onPressed: () {}),
+ GFIconButton(
+ type: GFType.outline,
+ color: GFColor.info,
+ icon: Icon(Icons.delete),
+ onPressed: () {}),
+ GFIconButton(
+ type: GFType.outline,
+ color: GFColor.light,
+ icon: Icon(Icons.info),
+ onPressed: () {}),
+ GFIconButton(
+ type: GFType.outline,
+ color: GFColor.dark,
+ icon: Icon(Icons.apps),
+ onPressed: () {}),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ ],
+ ));
+ }
+}
diff --git a/demo_app/lib/screens/button/pill-buttons.dart b/demo_app/lib/screens/button/pill-buttons.dart
new file mode 100644
index 00000000..b994ecba
--- /dev/null
+++ b/demo_app/lib/screens/button/pill-buttons.dart
@@ -0,0 +1,1189 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/components/typography/gf_typography.dart';
+import 'package:ui_kit/components/tabs/gf_tabs.dart';
+import 'package:ui_kit/components/button/gf_button.dart';
+import 'package:ui_kit/size/gf_size.dart';
+import 'package:ui_kit/types/gf_typography_type.dart';
+import 'package:ui_kit/types/gf_type.dart';
+import 'package:ui_kit/shape/gf_button_shape.dart';
+import 'package:ui_kit/colors/gf_color.dart';
+import 'package:ui_kit/components/card/gf_card.dart';
+import 'package:ui_kit/components/tabs/gf_tabBarView.dart';
+
+class PillsButtons extends StatefulWidget {
+ @override
+ _PillsButtonsState createState() => _PillsButtonsState();
+}
+
+class _PillsButtonsState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ backgroundColor: getGFColor(GFColor.dark),
+ leading: GestureDetector(
+ onTap: () {
+ Navigator.pop(context);
+ },
+ child: Image.asset('lib/assets/icons/back.png')),
+ title: Text(
+ 'Pills Buttons',
+ style: TextStyle(fontSize: 17),
+ ),
+ centerTitle: true,
+ ),
+ body: GFTabs(
+ height: MediaQuery.of(context).size.height,
+ tabBarColor: Color(0xFFD3E9ED),
+ initialIndex: 0,
+ length: 3,
+ indicatorColor: getGFColor(GFColor.info),
+ unselectedLabelColor: getGFColor(GFColor.danger),
+ labelColor: getGFColor(GFColor.warning),
+ tabs: [
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Solid",
+ style: TextStyle(fontSize: 12),
+ ),
+ type: GFType.solid,
+ textColor: GFColor.white,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Outline",
+ style: TextStyle(fontSize: 12),
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: null,
+ text: 'Outline 2x',
+ textStyle: TextStyle(fontSize: 12, color: getGFColor(GFColor.dark)),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ ),
+ ],
+ tabBarView: GFTabBarView(
+ children: [
+ Container(
+// color: Colors.red,
+ child: ListView(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 30),
+ child: GFTypography(
+ text: 'Default',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Primary",
+ ),
+ color: GFColor.primary,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Secondary",
+ ),
+ color: GFColor.secondary,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Success",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.success,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Warning",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Danger",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Info",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Light",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Dark",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Disabled State',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: null,
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Primary",
+ ),
+ color: GFColor.primary,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Secondary",
+ ),
+ color: GFColor.secondary,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Success",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.success,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Warning",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Danger",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Info",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Light",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Dark",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ shape: GFButtonShape.pills,
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Button Sizes',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text("Large",
+ style: TextStyle(
+ color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.large,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text("Normal",
+ style: TextStyle(
+ color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text("Small",
+ style: TextStyle(
+ color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.small,
+ shape: GFButtonShape.pills,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Block Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text("Large",
+ style:
+ TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.large,
+ shape: GFButtonShape.pills,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text("Normal",
+ style:
+ TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ shape: GFButtonShape.pills,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text("Small",
+ style:
+ TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.small,
+ shape: GFButtonShape.pills,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ ],
+ ),
+ ),
+
+ //tab 2
+ Container(
+// color: Colors.red,
+ child: ListView(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 30),
+ child: GFTypography(
+ text: 'Default',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Primary",
+ ),
+ type: GFType.outline,
+ color: GFColor.primary,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Secondary",
+ ),
+ color: GFColor.secondary,
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Success",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.success,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Warning",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Danger",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Info",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Light",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Dark",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Disabled State',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: null,
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Primary",
+ ),
+ type: GFType.outline,
+ color: GFColor.primary,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Secondary",
+ ),
+ color: GFColor.secondary,
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Success",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.success,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Warning",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Danger",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Info",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Light",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Dark",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Button Sizes',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Large",
+ ),
+ color: GFColor.primary,
+ size: GFSize.large,
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Normal",
+ ),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Small",
+ ),
+ color: GFColor.primary,
+ size: GFSize.small,
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 20),
+ child: GFTypography(
+ text: 'Block Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Large",
+ ),
+ color: GFColor.primary,
+ size: GFSize.large,
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Normal",
+ ),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Small",
+ ),
+ color: GFColor.primary,
+ size: GFSize.small,
+ type: GFType.outline,
+ shape: GFButtonShape.pills,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ ],
+ ),
+ ),
+
+ //tab 3
+ Container(
+// color: Colors.red,
+ child: ListView(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 30),
+ child: GFTypography(
+ text: 'Default',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Primary",
+ ),
+ type: GFType.outline2x,
+ color: GFColor.primary,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Secondary",
+ ),
+ color: GFColor.secondary,
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Success",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.success,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Warning",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Danger",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Info",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Light",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Dark",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Disabled State',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: null,
+ shape: GFButtonShape.pills,
+ child: Text(
+ "Primary",
+ ),
+ type: GFType.outline2x,
+ color: GFColor.primary,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Secondary",
+ ),
+ color: GFColor.secondary,
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Success",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.success,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Warning",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Danger",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Info",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Light",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Dark",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Button Sizes',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Large",
+ ),
+ color: GFColor.primary,
+ size: GFSize.large,
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Normal",
+ ),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Small",
+ ),
+ color: GFColor.primary,
+ size: GFSize.small,
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 20),
+ child: GFTypography(
+ text: 'Block Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Large",
+ ),
+ color: GFColor.primary,
+ size: GFSize.large,
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Normal",
+ ),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Small",
+ ),
+ color: GFColor.primary,
+ size: GFSize.small,
+ type: GFType.outline2x,
+ shape: GFButtonShape.pills,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ ],
+ ),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
diff --git a/demo_app/lib/screens/button/shadow-buttons.dart b/demo_app/lib/screens/button/shadow-buttons.dart
new file mode 100644
index 00000000..7724c422
--- /dev/null
+++ b/demo_app/lib/screens/button/shadow-buttons.dart
@@ -0,0 +1,1048 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/components/typography/gf_typography.dart';
+import 'package:ui_kit/components/tabs/gf_tabs.dart';
+import 'package:ui_kit/components/button/gf_button.dart';
+import 'package:ui_kit/size/gf_size.dart';
+import 'package:ui_kit/types/gf_typography_type.dart';
+import 'package:ui_kit/types/gf_type.dart';
+import 'package:ui_kit/shape/gf_button_shape.dart';
+import 'package:ui_kit/colors/gf_color.dart';
+import 'package:ui_kit/components/card/gf_card.dart';
+import 'package:ui_kit/components/tabs/gf_tabBarView.dart';
+
+class ShadowButtons extends StatefulWidget {
+ @override
+ _ShadowButtonsState createState() => _ShadowButtonsState();
+}
+
+class _ShadowButtonsState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ backgroundColor: getGFColor(GFColor.dark),
+ leading: GestureDetector(
+ onTap: () {
+ Navigator.pop(context);
+ },
+ child: Image.asset('lib/assets/icons/back.png')),
+ title: Text(
+ 'Shadow Buttons',
+ style: TextStyle(fontSize: 17),
+ ),
+ centerTitle: true,
+ ),
+// body: GFTabs(
+// height: MediaQuery.of(context).size.height,
+// tabBarColor: Color(0xFFD3E9ED),
+// initialIndex: 0,
+// length: 3,
+// indicatorColor: getGFColor(GFColor.info),
+// unselectedLabelColor: getGFColor(GFColor.danger),
+// labelColor: getGFColor(GFColor.warning),
+// tabs: [
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Solid",
+// style: TextStyle(fontSize: 12),
+// ),
+// buttonBoxShadow: true,
+// textColor: GFColor.white,
+// ),
+// GFButton(
+// onPressed: null,
+// child: Text(
+// "Outline",
+// style: TextStyle(fontSize: 12),
+// ),
+// type: GFType.outline,
+// ),
+// GFButton(
+// onPressed: null,
+// text: 'Outline 2x',
+// textStyle: TextStyle(fontSize: 12, color: getGFColor(GFColor.dark)),
+// type: GFType.outline2x,
+// ),
+// ],
+// tabBarView: GFTabBarView(
+// children: [
+// Container(
+//// color: Colors.red,
+// child: ListView(
+// children: [
+// Padding(padding: EdgeInsets.only(left:15, top:30),
+// child: GFTypography(
+// text: 'Default',
+// type: GFTypographyType.typo5,
+// dividerWidth: 25,
+// dividerColor: Color(0xFF19CA4B),
+//
+// ),
+// ),
+// GFCard(
+// content: Column(
+// mainAxisAlignment: MainAxisAlignment.start,
+// crossAxisAlignment: CrossAxisAlignment.start,
+// children: [
+//
+// SizedBox(
+// height: 10,
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// shape: GFButtonShape.standard,
+//
+// buttonBoxShadow: true,
+// child: Text("Primary",
+// ),
+//
+// color: GFColor.primary,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text("Secondary",
+// ),
+//
+// color: GFColor.secondary,
+// buttonBoxShadow: true,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Success",
+// ),
+// buttonBoxShadow: true,
+// color: GFColor.success,
+// ),
+// ],
+// ),
+//
+// SizedBox(
+// height: 10,
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Warning",
+// ),
+// buttonBoxShadow: true,
+// color: GFColor.warning,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text("Danger",
+// ),
+// buttonBoxShadow: true,
+// color: GFColor.danger,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Info",
+// ),
+// buttonBoxShadow: true,
+// color: GFColor.info,
+// ),
+// ],
+// ),
+// SizedBox(
+// height: 10,
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Light",
+// ),
+// buttonBoxShadow: true,
+// color: GFColor.light,
+// ),
+//
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Dark",
+// style:
+// TextStyle(color: getGFColor(GFColor.white)),
+// ),
+// buttonBoxShadow: true,
+// color: GFColor.dark,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text("Link",
+// ),
+// buttonBoxShadow: false,
+// color: GFColor.transparent,
+// ),
+// ],
+// ),
+//SizedBox(
+// height: 10,
+//)
+//
+// ],
+// ),
+// ),
+//
+//
+//
+//
+// Padding(padding: EdgeInsets.only(left:15, top:10),
+// child: GFTypography(
+// text: 'Button Sizes',
+// type: GFTypographyType.typo5,
+// dividerWidth: 25,
+// dividerColor: Color(0xFF19CA4B),
+//
+// ),
+// ),
+//
+//
+// GFCard(
+// content: Column(
+// mainAxisAlignment: MainAxisAlignment.start,
+// crossAxisAlignment: CrossAxisAlignment.start,
+// children: [
+// SizedBox(
+// height: 10,
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text("Large",
+// ),
+// color: GFColor.primary,
+// size: GFSize.large,
+// buttonBoxShadow: true,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text("Normal",
+// ),
+// color: GFColor.primary,
+// size: GFSize.medium,
+// buttonBoxShadow: true,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text("Small",
+// ),
+// color: GFColor.primary,
+// size: GFSize.small,
+// buttonBoxShadow: true,
+// ),
+// ],
+// ),
+// SizedBox(
+// height: 10,
+// ),
+//
+// ],
+// ),
+// ),
+//
+//
+// Padding(padding: EdgeInsets.only(left:15, top:10),
+// child: GFTypography(
+// text: 'Block Buttons',
+// type: GFTypographyType.typo5,
+// dividerWidth: 25,
+// dividerColor: Color(0xFF19CA4B),
+//
+// ),
+// ),
+//
+//
+// GFCard(
+// content: Column(
+// mainAxisAlignment: MainAxisAlignment.start,
+// crossAxisAlignment: CrossAxisAlignment.start,
+// children: [
+// SizedBox(
+// height: 10,
+// ),
+// GFButton(
+// onPressed: (){},
+// blockButton: true,
+// child: Text("Large",
+// style: TextStyle(
+// color: getGFColor(GFColor.white))),
+// color: GFColor.primary,
+// size: GFSize.large,
+// buttonBoxShadow: true,
+// ),
+//
+// SizedBox(
+// height: 10,
+// ),
+//
+// GFButton(
+// onPressed: (){},
+// blockButton: true,
+// child: Text("Normal",
+// style: TextStyle(
+// color: getGFColor(GFColor.white))),
+// color: GFColor.primary,
+// size: GFSize.medium,
+// buttonBoxShadow: true,
+// ),
+//
+// SizedBox(
+// height: 10,
+// ),
+//
+//
+// GFButton(
+// onPressed: (){},
+// blockButton: true,
+// child: Text("Small",
+// style: TextStyle(
+// color: getGFColor(GFColor.white))),
+// color: GFColor.primary,
+// size: GFSize.small,
+// buttonBoxShadow: true,
+// ),
+// SizedBox(
+// height: 10,
+// ),
+//
+// ],
+// ),
+// ),
+// ],
+// ),
+// ),
+//
+//
+// //tab 2
+// Container(
+//// color: Colors.red,
+// child: ListView(
+// children: [
+//
+// Padding(padding: EdgeInsets.only(left:15, top:30),
+// child: GFTypography(
+// text: 'Default',
+// type: GFTypographyType.typo5,
+// dividerWidth: 25,
+// dividerColor: Color(0xFF19CA4B),
+//
+// ),
+// ),
+// GFCard(
+// content: Column(
+// mainAxisAlignment: MainAxisAlignment.start,
+// crossAxisAlignment: CrossAxisAlignment.start,
+// children: [
+// SizedBox(
+// height: 10,
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Primary",
+//
+// ),
+//
+// type: GFType.outline,
+//
+// ),
+//
+//
+// GFButton(
+// onPressed: (){},
+// child: Text("Secondary"),
+// type: GFType.outline,
+// color: GFColor.secondary,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Success",
+// ),
+// type: GFType.outline,
+// color: GFColor.success,
+// ),
+// ],
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Warning",
+// ),
+// type: GFType.outline,
+// color: GFColor.warning,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Danger",
+// ),
+// type: GFType.outline,
+// color: GFColor.danger,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Info",
+// ),
+// type: GFType.outline,
+// color: GFColor.info,
+// ),
+// ],
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Light",
+// ),
+// type: GFType.outline,
+// color: GFColor.light,
+// ),
+//
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Dark",
+// ),
+// type: GFType.outline,
+// color: GFColor.dark,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Link",
+// ),
+// color: GFColor.transparent,
+// ),
+// ],
+// ),
+// ],
+// ),
+// ),
+//
+//
+//
+// Padding(padding: EdgeInsets.only(left:15, top:10),
+// child: GFTypography(
+// text: 'Button Sizes',
+// type: GFTypographyType.typo5,
+// dividerWidth: 25,
+// dividerColor: Color(0xFF19CA4B),
+//
+// ),
+// ),
+//
+//
+// GFCard(
+// content: Column(
+// mainAxisAlignment: MainAxisAlignment.start,
+// crossAxisAlignment: CrossAxisAlignment.start,
+// children: [
+// SizedBox(
+// height: 10,
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text("Large",
+// ),
+// color: GFColor.primary,
+// size: GFSize.large,
+// type: GFType.outline,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text("Normal",
+// ),
+// color: GFColor.primary,
+// size: GFSize.medium,
+// type: GFType.outline,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text("Small",
+// ),
+// color: GFColor.primary,
+// size: GFSize.small,
+// type: GFType.outline,
+// ),
+// ],
+// ),
+//
+// ],
+// ),
+// ),
+//
+//
+// Padding(padding: EdgeInsets.only(left:15, top:10),
+// child: GFTypography(
+// text: 'Block Buttons',
+// type: GFTypographyType.typo5,
+// dividerWidth: 25,
+// dividerColor: Color(0xFF19CA4B),
+//
+// ),
+// ),
+//
+//
+// GFCard(
+// content: Column(
+// mainAxisAlignment: MainAxisAlignment.start,
+// crossAxisAlignment: CrossAxisAlignment.start,
+// children: [
+// SizedBox(
+// height: 10,
+// ),
+// GFButton(
+// onPressed: (){},
+// blockButton: true,
+// child: Text("Large",
+// ),
+// color: GFColor.primary,
+// size: GFSize.large,
+// type: GFType.outline,
+// ),
+//
+// SizedBox(
+// height: 10,
+// ),
+//
+// GFButton(
+// onPressed: (){},
+// blockButton: true,
+// child: Text("Normal",
+// ),
+// color: GFColor.primary,
+// size: GFSize.medium,
+// type: GFType.outline,
+// ),
+//
+// SizedBox(
+// height: 10,
+// ),
+//
+//
+// GFButton(
+// onPressed: (){},
+// blockButton: true,
+// child: Text("Small",
+// ),
+// color: GFColor.primary,
+// size: GFSize.small,
+// type: GFType.outline,
+// ),
+//
+// ],
+// ),
+// ),
+//
+// ],
+// ),
+// ),
+//
+//
+// //tab 3
+// Container(
+//// color: Colors.red,
+// child: ListView(
+// children: [
+//
+// Padding(padding: EdgeInsets.only(left:15, top:30),
+// child: GFTypography(
+// text: 'Default',
+// type: GFTypographyType.typo5,
+// dividerWidth: 25,
+// dividerColor: Color(0xFF19CA4B),
+//
+// ),
+// ),
+// GFCard(
+// content: Column(
+// mainAxisAlignment: MainAxisAlignment.start,
+// crossAxisAlignment: CrossAxisAlignment.start,
+// children: [
+// SizedBox(
+// height: 10,
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Primary",
+//
+// ),
+//
+// type: GFType.outline2x,
+//
+// ),
+//
+//
+// GFButton(
+// onPressed: (){},
+// child: Text("Secondary"),
+// type: GFType.outline2x,
+// color: GFColor.secondary,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Success",
+// ),
+// type: GFType.outline2x,
+// color: GFColor.success,
+// ),
+// ],
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Warning",
+// ),
+// type: GFType.outline2x,
+// color: GFColor.warning,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Danger",
+// ),
+// type: GFType.outline2x,
+// color: GFColor.danger,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Info",
+// ),
+// type: GFType.outline2x,
+// color: GFColor.info,
+// ),
+// ],
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Light",
+// ),
+// type: GFType.outline2x,
+// color: GFColor.light,
+// ),
+//
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Dark",
+// ),
+// type: GFType.outline2x,
+// color: GFColor.dark,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text(
+// "Link",
+// ),
+//
+// color: GFColor.transparent,
+// ),
+// ],
+// ),
+// ],
+// ),
+// ),
+//
+//
+//
+// Padding(padding: EdgeInsets.only(left:15, top:10),
+// child: GFTypography(
+// text: 'Button Sizes',
+// type: GFTypographyType.typo5,
+// dividerWidth: 25,
+// dividerColor: Color(0xFF19CA4B),
+//
+// ),
+// ),
+//
+//
+// GFCard(
+// content: Column(
+// mainAxisAlignment: MainAxisAlignment.start,
+// crossAxisAlignment: CrossAxisAlignment.start,
+// children: [
+// SizedBox(
+// height: 10,
+// ),
+// Row(
+// mainAxisAlignment: MainAxisAlignment.spaceBetween,
+// children: [
+// GFButton(
+// onPressed: (){},
+// child: Text("Large",
+// ),
+// color: GFColor.primary,
+// size: GFSize.large,
+// type: GFType.outline2x,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text("Normal",
+// ),
+// color: GFColor.primary,
+// size: GFSize.medium,
+// type: GFType.outline2x,
+// ),
+// GFButton(
+// onPressed: (){},
+// child: Text("Small",
+// ),
+// color: GFColor.primary,
+// size: GFSize.small,
+// type: GFType.outline2x,
+// ),
+// ],
+// ),
+//
+// ],
+// ),
+// ),
+//
+//
+// Padding(padding: EdgeInsets.only(left:15, top:10),
+// child: GFTypography(
+// text: 'Block Buttons',
+// type: GFTypographyType.typo5,
+// dividerWidth: 25,
+// dividerColor: Color(0xFF19CA4B),
+//
+// ),
+// ),
+//
+//
+// GFCard(
+// content: Column(
+// mainAxisAlignment: MainAxisAlignment.start,
+// crossAxisAlignment: CrossAxisAlignment.start,
+// children: [
+// SizedBox(
+// height: 10,
+// ),
+// GFButton(
+// onPressed: (){},
+// blockButton: true,
+// child: Text("Large",
+// ),
+// color: GFColor.primary,
+// size: GFSize.large,
+// type: GFType.outline2x,
+// ),
+//
+// SizedBox(
+// height: 10,
+// ),
+//
+// GFButton(
+// onPressed: (){},
+// blockButton: true,
+// child: Text("Normal",
+// ),
+// color: GFColor.primary,
+// size: GFSize.medium,
+// type: GFType.outline2x,
+// ),
+//
+// SizedBox(
+// height: 10,
+// ),
+//
+//
+// GFButton(
+// onPressed: (){},
+// blockButton: true,
+// child: Text("Small",
+// ),
+// color: GFColor.primary,
+// size: GFSize.small,
+// type: GFType.outline2x,
+// ),
+//
+// ],
+// ),
+// ),
+//
+// ],
+// ),
+// ),
+// ],
+// ),
+// ),
+
+ body: Container(
+// color: Colors.red,
+ child: ListView(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 30),
+ child: GFTypography(
+ text: 'Default',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ shape: GFButtonShape.standard,
+ buttonBoxShadow: true,
+ child: Text(
+ "Primary",
+ ),
+ color: GFColor.primary,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Secondary",
+ ),
+ color: GFColor.secondary,
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Success",
+ ),
+ buttonBoxShadow: true,
+ color: GFColor.success,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Warning",
+ ),
+ buttonBoxShadow: true,
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Danger",
+ ),
+ buttonBoxShadow: true,
+ color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Info",
+ ),
+ buttonBoxShadow: true,
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Light",
+ ),
+ buttonBoxShadow: true,
+ color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Dark",
+ style: TextStyle(color: getGFColor(GFColor.white)),
+ ),
+ buttonBoxShadow: true,
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ buttonBoxShadow: false,
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ )
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Button Sizes',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Large",
+ ),
+ color: GFColor.primary,
+ size: GFSize.large,
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Normal",
+ ),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Small",
+ ),
+ color: GFColor.primary,
+ size: GFSize.small,
+ buttonBoxShadow: true,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Block Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text("Large",
+ style: TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.large,
+ buttonBoxShadow: true,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text("Normal",
+ style: TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ buttonBoxShadow: true,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text("Small",
+ style: TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.small,
+ buttonBoxShadow: true,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
diff --git a/demo_app/lib/screens/button/social-buttons.dart b/demo_app/lib/screens/button/social-buttons.dart
new file mode 100644
index 00000000..0d8bf3ea
--- /dev/null
+++ b/demo_app/lib/screens/button/social-buttons.dart
@@ -0,0 +1,331 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/colors/gf_color.dart';
+import 'package:ui_kit/components/typography/gf_typography.dart';
+import 'package:ui_kit/types/gf_typography_type.dart';
+import 'package:ui_kit/components/button/gf_button.dart';
+import 'package:ui_kit/components/button/gf_icon_button.dart';
+import 'package:ui_kit/components/card/gf_card.dart';
+import 'package:ui_kit/shape/gf_icon_button_shape.dart';
+import 'package:ui_kit/types/gf_type.dart';
+import 'package:ui_kit/size/gf_size.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class SocialButtons extends StatefulWidget {
+ @override
+ _SocialButtonsState createState() => _SocialButtonsState();
+}
+
+class _SocialButtonsState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ backgroundColor: getGFColor(GFColor.dark),
+ leading: GestureDetector(
+ onTap: () {
+ Navigator.pop(context);
+ },
+ child: Image.asset('lib/assets/icons/back.png')),
+ title: Text(
+ 'Social Buttons',
+ style: TextStyle(fontSize: 17),
+ ),
+ centerTitle: true,
+ ),
+ body: ListView(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 20),
+ child: GFTypography(
+ text: 'Social Buttons Full',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ Expanded(
+ child: GFButton(
+ buttonBoxShadow: true,
+ color: Color(0xFF3B5998),
+ onPressed: () {},
+ child: Text(
+ "FB",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/fb.svg')),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text("Twitter"),
+ icon: SvgPicture.asset('lib/assets/icons/twitter.svg'),
+ color: Color(0xFF00ACEE),
+ buttonBoxShadow: true,
+ ),
+ ),
+ SizedBox(
+ width: 6,
+ ),
+ Expanded(
+ child: GFButton(
+ onPressed: () {},
+ child: Text(
+ "Whatsap",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/whatsapp.svg'),
+ color: Color(0xFF25D366),
+ buttonBoxShadow: true,
+ ),
+ )
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Google +",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/google.svg'),
+ color: Color(0xFFDD4B39),
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Dribble",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/dribble.svg'),
+ color: Color(0xFFEA4C89),
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "LinkedIn",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/linkedin.svg'),
+ color: Color(0xFF0E76A8),
+ buttonBoxShadow: true,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Youtube",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/youtube.svg'),
+ color: Color(0xFFC4302B),
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Slack",
+ style: TextStyle(color: getGFColor(GFColor.white)),
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/slack.svg'),
+ color: Color(0XFF2EB67D),
+ buttonBoxShadow: true,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Pinterest",
+ ),
+ icon: SvgPicture.asset('lib/assets/icons/pinterest.svg'),
+ color: Color(0XFFC8232C),
+ buttonBoxShadow: true,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 20),
+ child: GFTypography(
+ text: 'Social Buttons Icons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFIconButton(
+ color: Color(0xFF3B5998),
+ icon: SvgPicture.asset('lib/assets/icons/fb.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0xFF00ACEE),
+ icon: SvgPicture.asset('lib/assets/icons/twitter.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0xFF25D366),
+ icon: SvgPicture.asset('lib/assets/icons/whatsapp.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0xFFDD4B39),
+ icon: SvgPicture.asset('lib/assets/icons/google.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0xFFEA4C89),
+ icon: SvgPicture.asset('lib/assets/icons/dribble.svg'),
+ onPressed: () {}),
+ ],
+ ),
+ SizedBox(
+ height: 20,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFIconButton(
+ color: Color(0xFF0E76A8),
+ icon: SvgPicture.asset('lib/assets/icons/linkedin.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0xFFC4302B),
+ icon: SvgPicture.asset('lib/assets/icons/youtube.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0XFF2EB67D),
+ icon: SvgPicture.asset('lib/assets/icons/slack.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0XFFC8232C),
+ icon:
+ SvgPicture.asset('lib/assets/icons/pinterest.svg'),
+ onPressed: () {}),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 20),
+ child: GFTypography(
+ text: 'Floating Social Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFIconButton(
+ color: Color(0xFF3B5998),
+ shape: GFIconButtonShape.pills,
+ icon: SvgPicture.asset('lib/assets/icons/fb.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0xFF00ACEE),
+ shape: GFIconButtonShape.pills,
+ icon: SvgPicture.asset('lib/assets/icons/twitter.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0xFF25D366),
+ shape: GFIconButtonShape.pills,
+ icon: SvgPicture.asset('lib/assets/icons/whatsapp.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0xFFDD4B39),
+ shape: GFIconButtonShape.pills,
+ icon: SvgPicture.asset('lib/assets/icons/google.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0xFFEA4C89),
+ shape: GFIconButtonShape.pills,
+ icon: SvgPicture.asset('lib/assets/icons/dribble.svg'),
+ onPressed: () {}),
+ ],
+ ),
+ SizedBox(
+ height: 20,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFIconButton(
+ color: Color(0xFF0E76A8),
+ shape: GFIconButtonShape.pills,
+ icon: SvgPicture.asset('lib/assets/icons/linkedin.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0xFFC4302B),
+ shape: GFIconButtonShape.pills,
+ icon: SvgPicture.asset('lib/assets/icons/youtube.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0XFF2EB67D),
+ shape: GFIconButtonShape.pills,
+ icon: SvgPicture.asset('lib/assets/icons/slack.svg'),
+ onPressed: () {}),
+ GFIconButton(
+ color: Color(0XFFC8232C),
+ shape: GFIconButtonShape.pills,
+ icon:
+ SvgPicture.asset('lib/assets/icons/pinterest.svg'),
+ onPressed: () {}),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+}
diff --git a/demo_app/lib/screens/buttons.dart b/demo_app/lib/screens/button/square-buttons.dart
similarity index 52%
rename from demo_app/lib/screens/buttons.dart
rename to demo_app/lib/screens/button/square-buttons.dart
index 0a7055e3..6c875bd6 100644
--- a/demo_app/lib/screens/buttons.dart
+++ b/demo_app/lib/screens/button/square-buttons.dart
@@ -1,29 +1,36 @@
import 'package:flutter/material.dart';
-import 'package:ui_kit/components/header/gf_header.dart';
+import 'package:ui_kit/components/typography/gf_typography.dart';
import 'package:ui_kit/components/tabs/gf_tabs.dart';
import 'package:ui_kit/components/button/gf_button.dart';
-import 'package:ui_kit/types/gf_heading_type.dart';
+import 'package:ui_kit/size/gf_size.dart';
+import 'package:ui_kit/types/gf_typography_type.dart';
import 'package:ui_kit/types/gf_type.dart';
import 'package:ui_kit/shape/gf_button_shape.dart';
import 'package:ui_kit/colors/gf_color.dart';
import 'package:ui_kit/components/card/gf_card.dart';
import 'package:ui_kit/components/tabs/gf_tabBarView.dart';
-class Buttons extends StatefulWidget {
+class SquareButtons extends StatefulWidget {
@override
- _ButtonsState createState() => _ButtonsState();
+ _SquareButtonsState createState() => _SquareButtonsState();
}
-class _ButtonsState extends State {
+class _SquareButtonsState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: getGFColor(GFColor.dark),
+ leading: GestureDetector(
+ onTap: () {
+ Navigator.pop(context);
+ },
+ child: Image.asset('lib/assets/icons/back.png')),
title: Text(
- 'Buttons',
- style: TextStyle(fontSize: 14),
+ 'Square Buttons',
+ style: TextStyle(fontSize: 17),
),
+ centerTitle: true,
),
body: GFTabs(
height: MediaQuery.of(context).size.height,
@@ -40,8 +47,8 @@ class _ButtonsState extends State {
"Solid",
style: TextStyle(fontSize: 12),
),
- type: GFType.solid,
textColor: GFColor.white,
+ shape: GFButtonShape.square,
),
GFButton(
onPressed: null,
@@ -50,13 +57,14 @@ class _ButtonsState extends State {
style: TextStyle(fontSize: 12),
),
type: GFType.outline,
- shape: GFButtonShape.pills,
+ shape: GFButtonShape.square,
),
GFButton(
onPressed: null,
- text: 'Transparent',
+ text: 'Outline 2x',
textStyle: TextStyle(fontSize: 12, color: getGFColor(GFColor.dark)),
- type: GFType.transparent,
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
),
],
tabBarView: GFTabBarView(
@@ -65,15 +73,20 @@ class _ButtonsState extends State {
// color: Colors.red,
child: ListView(
children: [
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 30),
+ child: GFTypography(
+ text: 'Default',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
GFCard(
content: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFHeader(
- text: 'Standard',
- type: GFHeadingType.typo6,
- ),
SizedBox(
height: 10,
),
@@ -81,116 +94,114 @@ class _ButtonsState extends State {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
- onPressed: null,
- child: Text("Primary",
- style: TextStyle(
- color: getGFColor(GFColor.white))),
- type: GFType.solid,
+ onPressed: () {},
+ shape: GFButtonShape.square,
+ child: Text(
+ "Primary",
+ ),
color: GFColor.primary,
),
GFButton(
- onPressed: null,
- child: Text("Secondary",
- style: TextStyle(
- color: getGFColor(GFColor.white))),
- type: GFType.solid,
+ onPressed: () {},
+ child: Text(
+ "Secondary",
+ ),
color: GFColor.secondary,
+ shape: GFButtonShape.square,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
"Success",
),
- type: GFType.solid,
+ shape: GFButtonShape.square,
color: GFColor.success,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
"Warning",
),
- type: GFType.solid,
+ shape: GFButtonShape.square,
color: GFColor.warning,
),
GFButton(
- onPressed: null,
- child: Text("Danger",
- style: TextStyle(
- color: getGFColor(GFColor.white))),
- type: GFType.solid,
+ onPressed: () {},
+ child: Text(
+ "Danger",
+ ),
+ shape: GFButtonShape.square,
color: GFColor.danger,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
- "Light",
+ "Info",
),
- type: GFType.solid,
- color: GFColor.light,
+ shape: GFButtonShape.square,
+ color: GFColor.info,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
- "Info",
+ "Light",
),
- type: GFType.solid,
- color: GFColor.info,
- ),
- GFButton(
- onPressed: null,
- child: Text("Alt",
- style: TextStyle(
- color: getGFColor(GFColor.white))),
- type: GFType.solid,
- color: GFColor.alt,
+ shape: GFButtonShape.square,
+ color: GFColor.light,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
"Dark",
- style:
- TextStyle(color: getGFColor(GFColor.white)),
),
- type: GFType.solid,
+ shape: GFButtonShape.square,
color: GFColor.dark,
),
- ],
- ),
- Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
- "Transparent",
+ "Link",
),
- type: GFType.solid,
color: GFColor.transparent,
),
],
- )
+ ),
+ SizedBox(
+ height: 10,
+ ),
],
),
),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Disabled State',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
GFCard(
content: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFHeader(
- text: 'Pills',
- type: GFHeadingType.typo6,
- ),
SizedBox(
height: 10,
),
@@ -199,30 +210,33 @@ class _ButtonsState extends State {
children: [
GFButton(
onPressed: null,
- child: Text("Primary",
- style: TextStyle(
- color: getGFColor(GFColor.white))),
+ shape: GFButtonShape.square,
+ child: Text(
+ "Primary",
+ ),
color: GFColor.primary,
- shape: GFButtonShape.pills,
),
GFButton(
onPressed: null,
- child: Text("Secondary",
- style: TextStyle(
- color: getGFColor(GFColor.white))),
+ child: Text(
+ "Secondary",
+ ),
color: GFColor.secondary,
- shape: GFButtonShape.pills,
+ shape: GFButtonShape.square,
),
GFButton(
onPressed: null,
child: Text(
"Success",
),
- shape: GFButtonShape.pills,
+ shape: GFButtonShape.square,
color: GFColor.success,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@@ -231,83 +245,78 @@ class _ButtonsState extends State {
child: Text(
"Warning",
),
- shape: GFButtonShape.pills,
+ shape: GFButtonShape.square,
color: GFColor.warning,
),
GFButton(
onPressed: null,
- child: Text("Danger",
- style: TextStyle(
- color: getGFColor(GFColor.white))),
- shape: GFButtonShape.pills,
+ child: Text(
+ "Danger",
+ ),
+ shape: GFButtonShape.square,
color: GFColor.danger,
),
GFButton(
onPressed: null,
child: Text(
- "Light",
+ "Info",
),
- shape: GFButtonShape.pills,
- color: GFColor.light,
+ shape: GFButtonShape.square,
+ color: GFColor.info,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
onPressed: null,
child: Text(
- "Info",
+ "Light",
),
- shape: GFButtonShape.pills,
- color: GFColor.info,
- ),
- GFButton(
- onPressed: null,
- child: Text("Alt",
- style: TextStyle(
- color: getGFColor(GFColor.white))),
- shape: GFButtonShape.pills,
- color: GFColor.alt,
+ shape: GFButtonShape.square,
+ color: GFColor.light,
),
GFButton(
onPressed: null,
child: Text(
"Dark",
- style:
- TextStyle(color: getGFColor(GFColor.white)),
),
- shape: GFButtonShape.pills,
+ shape: GFButtonShape.square,
color: GFColor.dark,
),
- ],
- ),
- Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
GFButton(
onPressed: null,
child: Text(
- "Transparent",
+ "link",
),
- shape: GFButtonShape.pills,
color: GFColor.transparent,
),
],
- )
+ ),
+ SizedBox(
+ height: 10,
+ ),
],
),
),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 20),
+ child: GFTypography(
+ text: 'Button Sizes',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
GFCard(
content: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFHeader(
- text: 'Square',
- type: GFHeadingType.typo6,
- ),
SizedBox(
height: 10,
),
@@ -315,123 +324,122 @@ class _ButtonsState extends State {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
- onPressed: null,
- child: Text("Primary",
+ onPressed: () {},
+ child: Text("Large",
style: TextStyle(
color: getGFColor(GFColor.white))),
color: GFColor.primary,
+ size: GFSize.large,
shape: GFButtonShape.square,
),
GFButton(
- onPressed: null,
- child: Text("Secondary",
+ onPressed: () {},
+ child: Text("Normal",
style: TextStyle(
color: getGFColor(GFColor.white))),
- color: GFColor.secondary,
- shape: GFButtonShape.square,
- ),
- GFButton(
- onPressed: null,
- child: Text(
- "Success",
- ),
- shape: GFButtonShape.square,
- color: GFColor.success,
- ),
- ],
- ),
- Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- GFButton(
- onPressed: null,
- child: Text(
- "Warning",
- ),
+ color: GFColor.primary,
+ size: GFSize.medium,
shape: GFButtonShape.square,
- color: GFColor.warning,
),
GFButton(
- onPressed: null,
- child: Text("Danger",
+ onPressed: () {},
+ child: Text("Small",
style: TextStyle(
color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.small,
shape: GFButtonShape.square,
- color: GFColor.danger,
- ),
- GFButton(
- onPressed: null,
- child: Text(
- "Light",
- ),
- shape: GFButtonShape.square,
- color: GFColor.light,
),
],
),
- Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- GFButton(
- onPressed: null,
- child: Text(
- "Info",
- ),
- shape: GFButtonShape.square,
- color: GFColor.info,
- ),
- GFButton(
- onPressed: null,
- child: Text("Alt",
- style: TextStyle(
- color: getGFColor(GFColor.white))),
- shape: GFButtonShape.square,
- color: GFColor.alt,
- ),
- GFButton(
- onPressed: null,
- child: Text(
- "Dark",
- style:
- TextStyle(color: getGFColor(GFColor.white)),
- ),
- shape: GFButtonShape.square,
- color: GFColor.dark,
- ),
- ],
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 20),
+ child: GFTypography(
+ text: 'Block Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text("Large",
+ style:
+ TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.large,
+ shape: GFButtonShape.square,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text("Normal",
+ style:
+ TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ shape: GFButtonShape.square,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text("Small",
+ style:
+ TextStyle(color: getGFColor(GFColor.white))),
+ color: GFColor.primary,
+ size: GFSize.small,
+ shape: GFButtonShape.square,
+ ),
+ SizedBox(
+ height: 10,
),
- Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- GFButton(
- onPressed: null,
- child: Text(
- "Transparent",
- ),
- shape: GFButtonShape.square,
- color: GFColor.transparent,
- ),
- ],
- )
],
),
),
],
),
),
+
+ //tab 2
Container(
// color: Colors.red,
child: ListView(
children: [
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 30),
+ child: GFTypography(
+ text: 'Default',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
GFCard(
content: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFHeader(
- text: 'Standard',
- type: GFHeadingType.typo6,
- ),
SizedBox(
height: 10,
),
@@ -439,98 +447,122 @@ class _ButtonsState extends State {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
- onPressed: null,
+ onPressed: () {},
+ shape: GFButtonShape.square,
child: Text(
"Primary",
),
type: GFType.outline,
+ color: GFColor.primary,
),
GFButton(
- onPressed: null,
- child: Text("Secondary"),
- type: GFType.outline,
+ onPressed: () {},
+ child: Text(
+ "Secondary",
+ ),
color: GFColor.secondary,
+ type: GFType.outline,
+ shape: GFButtonShape.square,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
"Success",
),
type: GFType.outline,
+ shape: GFButtonShape.square,
color: GFColor.success,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
"Warning",
),
type: GFType.outline,
+ shape: GFButtonShape.square,
color: GFColor.warning,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
"Danger",
),
type: GFType.outline,
+ shape: GFButtonShape.square,
color: GFColor.danger,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
- "Light",
+ "Info",
),
type: GFType.outline,
- color: GFColor.light,
+ shape: GFButtonShape.square,
+ color: GFColor.info,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
- "Info",
+ "Light",
),
type: GFType.outline,
- color: GFColor.info,
+ shape: GFButtonShape.square,
+ color: GFColor.light,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
- "Alt",
+ "Dark",
),
type: GFType.outline,
- color: GFColor.alt,
+ shape: GFButtonShape.square,
+ color: GFColor.dark,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
- "Dark",
+ "Link",
),
- type: GFType.outline,
- color: GFColor.dark,
+ color: GFColor.transparent,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
],
),
),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Disabled State',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
GFCard(
content: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFHeader(
- text: 'Pills',
- type: GFHeadingType.typo6,
- ),
SizedBox(
height: 10,
),
@@ -539,12 +571,12 @@ class _ButtonsState extends State {
children: [
GFButton(
onPressed: null,
+ shape: GFButtonShape.square,
child: Text(
"Primary",
),
type: GFType.outline,
color: GFColor.primary,
- shape: GFButtonShape.pills,
),
GFButton(
onPressed: null,
@@ -552,20 +584,23 @@ class _ButtonsState extends State {
"Secondary",
),
color: GFColor.secondary,
- shape: GFButtonShape.pills,
type: GFType.outline,
+ shape: GFButtonShape.square,
),
GFButton(
onPressed: null,
child: Text(
"Success",
),
- shape: GFButtonShape.pills,
- color: GFColor.success,
type: GFType.outline,
+ shape: GFButtonShape.square,
+ color: GFColor.success,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@@ -574,74 +609,212 @@ class _ButtonsState extends State {
child: Text(
"Warning",
),
- shape: GFButtonShape.pills,
- color: GFColor.warning,
type: GFType.outline,
+ shape: GFButtonShape.square,
+ color: GFColor.warning,
),
GFButton(
onPressed: null,
child: Text(
"Danger",
),
- shape: GFButtonShape.pills,
+ type: GFType.outline,
+ shape: GFButtonShape.square,
color: GFColor.danger,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Info",
+ ),
type: GFType.outline,
+ shape: GFButtonShape.square,
+ color: GFColor.info,
),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
GFButton(
onPressed: null,
child: Text(
"Light",
),
- shape: GFButtonShape.pills,
+ type: GFType.outline,
+ shape: GFButtonShape.square,
color: GFColor.light,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Dark",
+ ),
type: GFType.outline,
+ shape: GFButtonShape.square,
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ color: GFColor.transparent,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Button Sizes',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
- "Info",
+ "Large",
),
- shape: GFButtonShape.pills,
- color: GFColor.info,
+ color: GFColor.primary,
+ size: GFSize.large,
type: GFType.outline,
+ shape: GFButtonShape.square,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
- "Alt",
+ "Normal",
),
- shape: GFButtonShape.pills,
- color: GFColor.alt,
+ color: GFColor.primary,
+ size: GFSize.medium,
type: GFType.outline,
+ shape: GFButtonShape.square,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
- "Dark",
+ "Small",
),
- shape: GFButtonShape.pills,
- color: GFColor.dark,
+ color: GFColor.primary,
+ size: GFSize.small,
type: GFType.outline,
+ shape: GFButtonShape.square,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
],
),
),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Block Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
GFCard(
content: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFHeader(
- text: 'Square',
- type: GFHeadingType.typo6,
+ SizedBox(
+ height: 10,
),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Large",
+ ),
+ color: GFColor.primary,
+ size: GFSize.large,
+ type: GFType.outline,
+ shape: GFButtonShape.square,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Normal",
+ ),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ type: GFType.outline,
+ shape: GFButtonShape.square,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ GFButton(
+ onPressed: () {},
+ blockButton: true,
+ child: Text(
+ "Small",
+ ),
+ color: GFColor.primary,
+ size: GFSize.small,
+ type: GFType.outline,
+ shape: GFButtonShape.square,
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ ],
+ ),
+ ),
+
+ //tab 3
+ Container(
+// color: Colors.red,
+ child: ListView(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 30),
+ child: GFTypography(
+ text: 'Default',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
SizedBox(
height: 10,
),
@@ -649,199 +822,354 @@ class _ButtonsState extends State {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
- onPressed: null,
+ onPressed: () {},
+ shape: GFButtonShape.square,
child: Text(
"Primary",
),
- type: GFType.outline,
+ type: GFType.outline2x,
color: GFColor.primary,
- shape: GFButtonShape.square,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
"Secondary",
),
color: GFColor.secondary,
+ type: GFType.outline2x,
shape: GFButtonShape.square,
- type: GFType.outline,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
"Success",
),
+ type: GFType.outline2x,
shape: GFButtonShape.square,
color: GFColor.success,
- type: GFType.outline,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
"Warning",
),
+ type: GFType.outline2x,
shape: GFButtonShape.square,
color: GFColor.warning,
- type: GFType.outline,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
child: Text(
"Danger",
),
+ type: GFType.outline2x,
shape: GFButtonShape.square,
color: GFColor.danger,
- type: GFType.outline,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
+ child: Text(
+ "Info",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
+ color: GFColor.info,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
child: Text(
"Light",
),
+ type: GFType.outline2x,
shape: GFButtonShape.square,
color: GFColor.light,
- type: GFType.outline,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Dark",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
+ color: GFColor.dark,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ color: GFColor.transparent,
+ ),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Disabled State',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: null,
+ shape: GFButtonShape.square,
+ child: Text(
+ "Primary",
+ ),
+ type: GFType.outline2x,
+ color: GFColor.primary,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Secondary",
+ ),
+ color: GFColor.secondary,
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Success",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
+ color: GFColor.success,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Warning",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
+ color: GFColor.warning,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Danger",
+ ),
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
+ color: GFColor.danger,
+ ),
GFButton(
onPressed: null,
child: Text(
"Info",
),
+ type: GFType.outline2x,
shape: GFButtonShape.square,
color: GFColor.info,
- type: GFType.outline,
),
+ ],
+ ),
+ SizedBox(
+ height: 10,
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
GFButton(
onPressed: null,
child: Text(
- "Alt",
+ "Light",
),
+ type: GFType.outline2x,
shape: GFButtonShape.square,
- color: GFColor.alt,
- type: GFType.outline,
+ color: GFColor.light,
),
GFButton(
onPressed: null,
child: Text(
"Dark",
),
+ type: GFType.outline2x,
shape: GFButtonShape.square,
color: GFColor.dark,
- type: GFType.outline,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Link",
+ ),
+ color: GFColor.transparent,
),
],
),
+ SizedBox(
+ height: 10,
+ ),
],
),
),
- ],
- ),
- ),
- Container(
- margin: EdgeInsets.only(top: 20, right: 20, left: 20),
- height: 100,
- child: Column(
- children: [
- GFHeader(
- text: 'Transparent',
- type: GFHeadingType.typo6,
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Button Sizes',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
),
- Row(
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFButton(
- onPressed: null,
- child: Text(
- "Primary",
- ),
- type: GFType.transparent,
- textColor: GFColor.primary,
+ SizedBox(
+ height: 10,
),
- GFButton(
- onPressed: null,
- child: Text(
- "Secondary",
- ),
- type: GFType.transparent,
- textColor: GFColor.secondary,
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Large",
+ ),
+ color: GFColor.primary,
+ size: GFSize.large,
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Normal",
+ ),
+ color: GFColor.primary,
+ size: GFSize.medium,
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
+ ),
+ GFButton(
+ onPressed: () {},
+ child: Text(
+ "Small",
+ ),
+ color: GFColor.primary,
+ size: GFSize.small,
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
+ ),
+ ],
),
- GFButton(
- onPressed: null,
- child: Text(
- "Success",
- ),
- type: GFType.transparent,
- textColor: GFColor.success,
+ SizedBox(
+ height: 10,
),
],
),
- Row(
+ ),
+ Padding(
+ padding: EdgeInsets.only(left: 15, top: 10),
+ child: GFTypography(
+ text: 'Block Buttons',
+ type: GFTypographyType.typo5,
+ dividerWidth: 25,
+ dividerColor: Color(0xFF19CA4B),
+ ),
+ ),
+ GFCard(
+ content: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
children: [
- GFButton(
- onPressed: null,
- child: Text(
- "Warning",
- ),
- type: GFType.transparent,
- textColor: GFColor.warning,
+ SizedBox(
+ height: 10,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
+ blockButton: true,
child: Text(
- "Danger",
+ "Large",
),
- type: GFType.transparent,
- textColor: GFColor.danger,
+ color: GFColor.primary,
+ size: GFSize.large,
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
),
- GFButton(
- onPressed: null,
- child: Text(
- "Dark",
- ),
- type: GFType.transparent,
- textColor: GFColor.dark,
+ SizedBox(
+ height: 10,
),
- ],
- ),
- Row(
- children: [
GFButton(
- onPressed: null,
+ onPressed: () {},
+ blockButton: true,
child: Text(
- "Light",
+ "Normal",
),
- type: GFType.transparent,
- textColor: GFColor.light,
+ color: GFColor.primary,
+ size: GFSize.medium,
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
),
- GFButton(
- onPressed: null,
- child: Text(
- "Info",
- ),
- type: GFType.transparent,
- textColor: GFColor.info,
+ SizedBox(
+ height: 10,
),
GFButton(
- onPressed: null,
+ onPressed: () {},
+ blockButton: true,
child: Text(
- "Alt",
+ "Small",
),
- type: GFType.transparent,
- textColor: GFColor.alt,
+ color: GFColor.primary,
+ size: GFSize.small,
+ type: GFType.outline2x,
+ shape: GFButtonShape.square,
+ ),
+ SizedBox(
+ height: 10,
),
],
),
- ],
- ))
+ ),
+ ],
+ ),
+ ),
],
),
),
diff --git a/demo_app/lib/screens/button/standard-buttons.dart b/demo_app/lib/screens/button/standard-buttons.dart
new file mode 100644
index 00000000..0f1e3b70
--- /dev/null
+++ b/demo_app/lib/screens/button/standard-buttons.dart
@@ -0,0 +1,1213 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/components/typography/gf_typography.dart';
+import 'package:ui_kit/components/tabs/gf_tabs.dart';
+import 'package:ui_kit/components/button/gf_button.dart';
+import 'package:ui_kit/size/gf_size.dart';
+import 'package:ui_kit/types/gf_typography_type.dart';
+import 'package:ui_kit/types/gf_toggle_type.dart';
+import 'package:ui_kit/types/gf_type.dart';
+import 'package:ui_kit/shape/gf_button_shape.dart';
+import 'package:ui_kit/colors/gf_color.dart';
+import 'package:ui_kit/components/card/gf_card.dart';
+import 'package:ui_kit/components/tabs/gf_tabBarView.dart';
+
+class StandardButtons extends StatefulWidget {
+ @override
+ _StandardButtonsState createState() => _StandardButtonsState();
+}
+
+class _StandardButtonsState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ backgroundColor: getGFColor(GFColor.dark),
+ leading: GestureDetector(
+ onTap: () {
+ Navigator.pop(context);
+ },
+ child: Image.asset('lib/assets/icons/back.png')),
+ title: Text(
+ 'Standard Buttons',
+ style: TextStyle(fontSize: 17),
+ ),
+ centerTitle: true,
+ ),
+ body: GFTabs(
+ height: MediaQuery.of(context).size.height,
+ tabBarColor: Color(0xFFD3E9ED),
+ initialIndex: 0,
+ length: 3,
+ indicatorColor: getGFColor(GFColor.info),
+ unselectedLabelColor: getGFColor(GFColor.danger),
+ labelColor: getGFColor(GFColor.warning),
+ tabs: [
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Solid",
+ style: TextStyle(fontSize: 12),
+ ),
+ type: GFType.solid,
+ textColor: GFColor.white,
+ ),
+ GFButton(
+ onPressed: null,
+ child: Text(
+ "Outline",
+ style: TextStyle(fontSize: 12),
+ ),
+ type: GFType.outline,
+ ),
+ GFButton(
+ onPressed: null,
+ text: 'Outline 2x',
+ textStyle: TextStyle(fontSize: 12, color: getGFColor(GFColor.dark)),
+ type: GFType.outline2x,
+ ),
+ ],
+ tabBarView: GFTabBarView(
+ children: [
+ Container(
+// color: Colors.red,
+ child: ListView(
+ children: