cupertino text button
a button that looks like a cupertino text button!
text button
a simple text button can be created like this:
cupertinotextbutton(
text: 'apply',
style: const textstyle(fontsize: 20),
ontap: () {
// do your text stuff here.
},
),
for text buttons you can configure the following properties:
| property | type | description |
|---|---|---|
| text | string | title of the button |
| style | textstyle | text style of the title |
| textalign | textalign | text alignment of the button |
| textdirection | textdirection | the text direction to use for rendering the text |
| textoverflow | textoverflow | the text direction to use for rendering the text |
| softwrap | bool | whether the text should break at soft line breaks |
material icon button
a simple material icon button can be created like this:
cupertinotextbutton.materialicon(
icon: icons.chevron_left,
size: 30,
ontap: () {
// do your icon stuff here.
},
),
for material icon buttons you can configure the following properties:
| property | type | description |
|---|---|---|
| icon | icondata | icon to display |
| size | double | size of the icon |
| textdirection | textdirection | the text direction to use for rendering the icon |
common properties
either you creating a text or an icon button, you can specify these properties:
| property | type | description |
|---|---|---|
| ontap | function | on tap handler of the button |
| onlongpress | function | on long press handler of the button |
| normalcolor | color | foreground color of the button in normal state, e.g. not pressed |
| pressedcolor | color | foreground color of the button in pressed state |
| forwardduration | duration | duration of the animation from normalcolor to pressedcolor |
| backwardduration | duration | duration of the animation back from pressedcolor to normalcolor |
| curve | curve | the animation curve. |
theme
all these shared properties, except for the ontap and onlongpress ones, can be configured via the cupertinotextbuttontheme. just wrap it around your app or any other parent widget above cupertinotextbuttons in the tree like this:
cupertinotextbuttontheme(
normalcolor: colors.white,
pressedcolor: colors.orange,
/* forwardduration, backwardduration and curve can also be configured here. */
child: row(
children: [
cupertinotextbutton(
text: 'first option',
style: const textstyle(fontsize: 20),
ontap: () {
// do your first stuff here.
},
),
cupertinotextbutton(
text: 'second option',
style: const textstyle(fontsize: 20),
ontap: () {
// do your second stuff here.
},
),
],
),
)
and both of these text button will have the same colors!
if these properties are not specified in the button and no theme is provided, fallback values are used:
| property | fallback value |
|---|---|
| normalcolor | colors.black |
| pressedcolor | theme*.primarycolor |
| forwardduration | const duration(milliseconds: 20) |
| backwardduration | const duration(milliseconds: 200) |
| curve | curves.fastoutslowin |
* theme — the default flutter theme.
Comments are closed.