# GF Accordion
# Usage
The simple code of a basic Accordion is as shown below
import 'package:getwidget/getwidget.dart';
GFAccordion(
title: 'GF Accordion',
content: 'GetFlutter is an open source library that comes with pre-build 1000+ UI components.'
)
# Accordion with Icon
Icons are mostly used in Accordion to show whether the content is expanded or collapsed. The most commonly used icons are the up and down arrow icons. But we can use different icons to represent the hide and show event by using collapsedIcon and expandedIcon. The below code shows the usage:
import 'package:getwidget/getwidget.dart';
GFAccordion(
title: 'GF Accordion',
content: 'GetFlutter is an open source library that comes with pre-build 1000+ UI components.',
collapsedIcon: Icon(Icons.add),
expandedIcon: Icon(Icons.minimize)
),
# Accordion with trailing Text
The trailing part takes any widget like text, icon etc. The below code shows the accordion with the text.
import 'package:getwidget/getwidget.dart';
GFAccordion(
title: 'GF Accordion',
content: 'GetFlutter is an open source library that comes with pre-build 1000+ UI components.',
collapsedIcon: Text('Show'),
expandedIcon: Text('Hide')
),
# Custom Properties
showAccordion | controls if the accordion should be collapsed or not making it possible to be controlled from outside |
titleChild | child of type [Widget]is alternative to title key. title will get priority over titleChild |
content | content of type[String] which shows the messages after the [GFAccordion] is expanded |
contentChild | contentChild of type [Widget]is alternative to content key. content will get priority over contentChild |
collapsedTitleBackgroundColor | type of [Color] or [GFColors] which is used to change the background color of the [GFAccordion] title when it is collapsed |
expandedTitleBackgroundColor | type of [Color] or [GFColors] which is used to change the background color of the [GFAccordion] title when it is expanded |
collapsedIcon | collapsedIcon of type [Widget] which is used to show when the [GFAccordion] is collapsed |
expandedIcon | expandedIcon of type[Widget] which is used when the [GFAccordion] is expanded |
title | text of type [String] is alternative to child. text will get priority over titleChild |
textStyle | textStyle of type [textStyle] will be applicable to text only and not for the child |
titlePadding | titlePadding of type [EdgeInsets] which is used to set the padding of the [GFAccordion] title |
contentPadding | descriptionPadding of type [EdgeInsets] which is used to set the padding of the [GFAccordion] description |
contentBackgroundColor | type of [Color] or [GFColors] which is used to change the background color of the [GFAccordion] description |
margin | margin of type [EdgeInsets] which is used to set the margin of the [GFAccordion] |
titleBorder | titleBorderColor of type [Color] or [GFColors] which is used to change the border color of title |
contentBorder | contentBorderColor of type [Color] or [GFColors] which is used to change the border color of content |
titleBorderRadius | titleBorderRadius of type [Radius] which is used to change the border radius of title |
contentBorderRadius | contentBorderRadius of type [Radius] which is used to change the border radius of content |
onToggleCollapsed | function called when the content body collapsed |