flutter_gg 0.0.3
flutter_gg: ^0.0.3 copied to clipboard
Flutter gg project was designed to make styling easier and moduler in Flutter. That way, you won't need to create multiple widget files to manage styling
flutter_gg #
Null-Safety, Dart 3, with zero external dependencies #
IOS, Android, Linux, Mac, Web, Windows ready #
An widget manager package which makes adding properties easy.
Getting Started #
The package will provide easier and modular styling experience in Flutter. Each param can be sent using Style property.
To install the package
flutter pub add flutter_gg ( https://pub.dev/packages/flutter_gg )
To import the package within your dart file
import 'package:flutter_gg/gg.dart';
Access to the example project
https://github.com/karahanharunn/flutter_gg_card
Properties Style class have: #
Property | Type | Description |
---|---|---|
px | double? | Sets the horizontal padding |
py | double? | Sets the vertical padding |
pb | double? | Sets the bottom padding |
pt | double? | Sets the top padding |
pl | double? | Sets the left padding |
pr | double? | Sets the right padding |
p | double? | Sets the padding on all sides |
mx | double? | Sets the horizontal margin |
my | double? | Sets the vertical margin |
mr | double? | Sets the right margin |
ml | double? | Sets the left margin |
mt | double? | Sets the top margin |
mb | double? | Sets the bottom margin |
m | double? | Sets the margin on all sides |
bg | Color? | Sets the background color |
left | double? | Sets the left position |
right | double? | Sets the right position |
top | double? | Sets the top position |
bottom | double? | Sets the bottom position |
boxShadow | BoxShadow? | Sets the box shadow |
gradient | Gradient? | Sets the gradient |
border | Border? | Sets the border |
borderRadius | double? | Sets the border radius for all corners |
borderRadiusTopLeft | double? | Sets the border radius for the top left corner |
borderRadiusTopRight | double? | Sets the border radius for the top right corner |
borderRadiusBottomLeft | double? | Sets the border radius for the bottom left corner |
borderRadiusBottomRight | double? | Sets the border radius for the bottom right corner |
height | double? | Sets the height |
width | double? | Sets the width |
mainAxisAlignment | MainAxisAlignment? | Sets the main axis alignment |
crossAxisAlignment | CrossAxisAlignment? | Sets the cross axis alignment |
direction | EDirection? | Sets the flex direction |
isRounded | bool? | Sets whether the widget should have rounded corners |
isCenter | bool? | Sets whether the widget should be centered |
isExpanded | bool? | Sets whether the widget should expand to fill the available space |
alignment | Align? | Sets the alignment |
textStyle | TextStyle? | Sets the text style |
pressEffect | bool? | Sets whether the widget should have a press effect |
hoverColor | Color? | Sets the color when the widget is hovered |
activeColor | Color? | Sets the color when the widget is active |
minWidth | double? | Sets the minimum width |
maxWidth | double? | Sets the maximum width |
minHeight | double? | Sets the minimum height |
maxHeight | double? | Sets the maximum height |
color | Color? | Sets the color |
fontSize | double? | Sets the font size |
fontWeight | FontWeight? | Sets the font weight |
fontStyle | FontStyle? | Sets the font style |
letterSpacing | double? | Sets the letter spacing |
opacity | double? | Sets the opacity |
Available GG Widgets #
gg #
home: Scaffold(
body: gg(
style: css.card(),
children: [_card("Favourite", Icons.favorite,Favourites())]),
)
ggtext #
home: Scaffold(
body: ggtext(
text: settingsGroupTitle!,
style: css.cardtext(),
),
)
ggbutton #
home: Scaffold(
body: ggbutton(
text: "test",
rightChild: Icon(Icons.keyboard_arrow_right_outlined,
size: 24, color: Colors.white),
onTap: () {
print("button pressed");
},
style: Style(
textStyle: TextStyle(color: Colors.white),
pressEffect: true,
hoverColor: Colors.blue,
bg: Colors.blue)),
)
ggicon #
home: Scaffold(
body: ggicon(
Icons.search,
style: Style(alignment: Alignment.topRight, m: 12),
color: Colors.white,
size: 24,
),
)
What if you are using different widget #
There is two different solutions. You can either wrap your widget with gg widget or you can use styles function. ( Be sure you imported flutter_gg package in your dart file.)
home: Scaffold(
body: TextField().styles(css.input()),
)
Using Multiple Styles #
home: Scaffold(
body: gg(
style: mixStyles([css.card(), css.bgred()]),
children: [_card("Favourite", Icons.favorite,Favourites())]),
)
Available Properties with examples #
Padding #
- p
- px
- py
- pl
- pr
- pb
- pt
Example: Padding #
home: Scaffold(
body: gg(children: [
Icon(
Icons.abc,
size: 24,
color: Colors.red,
)
], style: Style(px: 5, py: 10)),
)
Margin #
- mx
- my
- ml
- mr
- mt
- mb
- m
home: Scaffold(
body: gg(children: [
Icon(
Icons.abc,
size: 24,
color: Colors.red,
)
], style: Style(mt: 5, mb: 10)),
)
Button #
- pressEffect
- hoverColor
- activeColor
- textStyle
home: Scaffold(
body: ggbutton(
text: "test",
leftChild:
Icon(Icons.arrow_back_ios, size: 24, color: Colors.white),
onTap: () {
print("button pressed");
},
style: Style(
textStyle: TextStyle(color: Colors.white),
pressEffect: true,
hoverColor: Colors.blue,
bg: Colors.blue)),
)
Position #
- left
- right
- top
- bottom
home: Scaffold(
body: gg(children: [
Icon(
Icons.abc,
size: 24,
color: Colors.red,
)
], style: Style(left: 5, top: 10)),
)
Flex #
- direction
- crossAxisAlignment
- mainAxisAlignment
home: Scaffold(
body: gg(children: [
Icon(
Icons.abc,
size: 24,
color: Colors.red,
)
], style: style: Style(
direction: FlexDirection.column,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween)),
)
Border #
- border
- borderRadiusTopLeft
- borderRadiusTopRight
- borderRadiusBottomLeft
- borderRadiusBottomRight
home: Scaffold(
body: gg(children: [
Icon(
Icons.abc,
size: 24,
color: Colors.red,
)
], style: style: Style(p: 15, border: Border.all(width: 1, color: Colors.red)),
)
TextStyle #
- color
- fontSize
- fontWeight
- fontStyle
- letterSpacing
home: Scaffold(
body: ggbutton(
onTap: (){print("discover");},
style: Style(color: Colors.white, fontSize: 14, fontWeight: FontWeight.bold), text:"Discover"),
)
Size #
- width
- height
- minWidth
- minHeight
- maxWidth
- maxHeight
home: Scaffold(
body: gg(style: Style(bg: Colors.red, width: 150, height: 150, maxHeight: 120)),
)