What the Flutter? ExpansionPanel

A common pattern in apps is to have a list of items that you can expand to show more details. Sometimes these details don’t justify an entirely separate view, and you just need them to show up inline in the list. For that, check out ExpansionPanel, a widget that when tapped on will expand a panel.

Start with the headerBuilder, which returns what the first line of this panel will be. It takes a context and a boolean, so you can change what it looks like when the panel is open vs closed and returns a widget. Next up is the body, which contains the contents of the opened panel. And finally is the boolean isExpanded to indicate whether or not this panel is currently open. But what to do with this flag?

Well, ExpansionPanels almost exclusively appear as children of ExpansionPanelLists. Here, we can maintain a list of which panels are open and use ExpansionPanelList’s expansionCallback parameter to update them. This callback takes an index of the panel that’s just been tapped and whether it’s currently open or not.

Assuming your ExpansionPanelList is in a stateful widget, you can setState to toggle the flag and use this value in each ExpansionPanel’s isExpanded. And that’s pretty much it! But you’re also able to customize how the panel looks with the list animationDuration, dividerColor, elevation, and expandedHeaderPadding, or use the panel’s canTapOnHeader flag to say whether or not the whole header is tappable for expansion.

Let’s see the example:

For more on ExpansionPanel and all the other widgets, head on over to flutter.dev

Comments

How to build FAQ Chatbot on Dialogflow?

After Google I/O I’m inspired and excited to try new APIs and learn new stuff from Google. This time I decided to try Dialogflow and build a Flutter Chatbot app that will answer some frequently asked questions about Dialogflow. This time I want to be focused more on Dialogflow rather than Flutter. Firstly, go to Dialogflow ES console , create a new Agent, specify the agent’s name, choose English as a language and click “Create”. As you created a new agent go to setting and enable beta features and APIs and Save. Now let’s model our Dialogflow agent When you create a new Dialogflow agent, two default intents will be created automatically. The Default Welcome Intent is the first flow you get to when you start a conversation with the agent. The Default Fallback Intent is the flow you’ll get once the agent can’t understand you or can not match intent with what you just said. Click Intents > Default Welcome Intent Scroll down to Responses ....

Vertex AI – One AI platform, every ML tool you need

This year on Google I/O (Google’s Developer conference) Google presented a new platform that unites all ML tools. Vertex AI brings together the Google Cloud services for building ML under one, unified UI and API. There are many benefits to using Vertex AI. You can train models without code, with minimal expertise required, and take advantage of AutoML to build models in less time. Also, Vertex AI’s custom model tooling supports advanced ML coding, with nearly 80% fewer lines of code required to train a model with custom libraries than competitive platforms. Google Vertex AI logo You can use Vertex AI to manage the following stages in the ML workflow: Define and upload a dataset. Train an ML model on your data: Train model Evaluate model accuracy Tune hyperparameters (custom training only) Upload and store your model in Vertex AI. Deploy your trained model and get an endpoint for serving predictions. Send prediction requests to your endpoint. Specify a prediction traffic...

Flutter 2 is here! What’s new?

Flutter 2 is finally released. And it has a bunch of new stuff! As my core tech for this year is Flutter and automation (wait for it) I will write about it a lot! Here I want just to start the journey and show you the coolest news in Flutter 2 Web support Flutter’s web support has transitioned from beta to the stable channel. With this initial stable release, Flutter pushes the reusability of code to another level with the support of the web platform. So now when you create a Flutter app that is stable, the web is just another device target for your app. Find more details about this stable release in Flutter’s web support blog post . Desktop The ReorderableListView now has grab handles for easy drag ’n’ drop with a mouse In this release, It was announced that Flutter’s desktop support is available in the stable channel under an early release flag. What this means is that we’re ready for you to give it a try as a deployment target for your Flutter apps: you can think of it a...

Damiks

Search This Blog