# GF Accordion

GF Accordion Banner

# 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

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

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
Last Updated: 10/23/2020, 10:37:05 AM