Flutter Accordion Widget:
A flutter Accordion is a widget which collapses and expands upon tapping. It shows it children when expanded and hides them when it is collapsed. Basically Accordion is used when a given information is hidden and only shown whenever a user wants to read them out. Accordion saves a lot of space indeed by hiding its children inside them and only shows the content or its children when and only it is tapped over. Accordion can be used to show up a single list or a multi level list as its children. It is widely used in any applications wherein hiding the information of certain things is required and this widget does that required job with ease.
So, are you ready to make use of this widget where ever needed in your application? If so, then let's quickly jump into the usage and the ways a accordion can be modified and used to make use friendly apps. Here i am going to use an open-source UI Library known as GetWidget to build this widget.
GetWidget Flutter Accordion Widget:
GetWidget Accordion Component is a simple component which basically hides or reveals its children upon tapping the accordion. The children can be any kind of other component, single level list or multi level lists. It is widely used in many applications in faq's sections where in the children or the content is hidden under the title or the heading and the children can be viewed only uopn tapping the title or the heading given. So in almost all real time applications accordion is in wide use because of its simple and yet useful functionality.
GetWidget Accordion is not only a basic one but has different ways to make the accordion look more user friendly and attractive to the user. So, let's drive deep into the types of accordion and make the most use of it.
Basic Fluter Accordion Widget:
Basic Accordion is just a title with a trailing up and down arrow and its children hidden and its revealed when needed.
Flutter Accordion Widget with trailing icon:
Accordion can be used with icons which can be replaced in the trailing part which gives flexibility to the user to use any icon of his/her choice.
Flutter Accordion Widget with trailing text:
Accordion can also be used with text in the trailing part which gives flexibility to the user to choose his.her kind of words based on the application and use them in their accordion.
How to Start:
Now, here is the guide about how we should you can start developing Flutter Toast Widget with the help of GetWidget UI Library.
First, Let go with Getting started, It will guide you how to start building a beautiful flutter application UI with GetWidget UI library. Now, we have to install the GetWidget package from pub.dev, To import the package in your Flutter project follow the below guide.
Install Package from pub.dev :
https://pub.dev/packages/getwidget - Check the detaila about GetWidget Package.
Import full package:
Note: dependencies: getwidget: ^1.1.0
Keep playing with the pre-built UI components.
Example of a simple accordion:
import 'package:getwidget/getwidget.dart'; GFAccordion( title: 'GF Accordion', content: 'GetWidget is an open source library that comes with pre-build 1000+ UI components.' )
Example of accordion with trailing icons:
import 'package:getwidget/getwidget.dart'; GFAccordion( title: 'GF Accordion', content: 'GetWidget is an open source library that comes with pre-build 1000+ UI components.', collapsedIcon: Icon(Icons.add), expandedIcon: Icon(Icons.minimize) ),
Example of accordion with trailing text:
import 'package:getwidget/getwidget.dart'; GFAccordion( title: 'GF Accordion', content: 'GetWidget is an open source library that comes with pre-build 1000+ UI components.', collapsedIcon: Text('Show'), expandedIcon: Text('Hide') ),
Alaas!! That was simple and great! Now let's see all three of them in one code as shown below:
Check out the more details on our Flutter Accordion:
Here we discussed, what Flutter Accordion Widget is? And how it is easy and powerful to use in any applications through GetWidget Accordion component. Here, there are options to customise and use other types of aAccordion and make the application a eye catchy one.
Q: Is Accordion supported by web?
Ans: Yes, web also supports the accordion and its type.
Q. Can we change the background color of the accordion ?
Ans: Yes, the background color of the accordion and its children can be changed. For the custom options go through the documentation