flutterdartpackagedropdowncode-snippets
Drop down widget with detail showing on pressing this dropdown in flutter
How can i make a drop down widget like showing in picture.
On pressing the drop down button, we have to show details related to that button only. Can any one share some repository/dart package or code snippet to achieve that in flutter
Solution
You can copy paste run full code below
You can use package https://pub.dev/packages/expandable
With controller, you can manually set expanded to false or true
So you can achieve collapse others
code snippet
List<ExpandableController> controllerList = [
ExpandableController(),
ExpandableController(),
ExpandableController()
];
ExpandablePanel(
controller: controllerList[2],
for (int i = 0; i < controllerList.length; i++) {
if (i == currentIndex) {
controllerList[i].expanded = true;
} else {
controllerList[i].expanded = false;
}
}
ScrollOnExpand(
scrollOnExpand: true,
scrollOnCollapse: false,
child: ExpandablePanel(
theme: const ExpandableThemeData(
...
header: Container(
color: Colors.blue,
...
collapsed: Container(),
expanded: Container(
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
working demo
full code
import 'package:expandable/expandable.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Expandable Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State createState() {
return MyHomePageState();
}
}
class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Expandable Demo"),
),
body: ExpandableTheme(
data: const ExpandableThemeData(
iconColor: Colors.blue,
useInkWell: true,
),
child: ListView(
physics: const BouncingScrollPhysics(),
children: <Widget>[
Card1(),
Card2(),
Card3(),
],
),
),
);
}
}
const loremIpsum =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
List<ExpandableController> controllerList = [
ExpandableController(),
ExpandableController(),
ExpandableController()
];
int currentIndex = -1;
class Card1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ExpandableNotifier(
child: Padding(
padding: const EdgeInsets.all(10),
child: Card(
color: Colors.blue,
clipBehavior: Clip.antiAlias,
child: Column(
children: <Widget>[
ScrollOnExpand(
scrollOnExpand: true,
scrollOnCollapse: false,
child: ExpandablePanel(
controller: controllerList[0],
theme: const ExpandableThemeData(
iconColor: Colors.white,
headerAlignment: ExpandablePanelHeaderAlignment.center,
tapBodyToCollapse: true,
),
header: InkWell(
onTap: () {
currentIndex = 0;
for (int i = 0; i < controllerList.length; i++) {
if (i == currentIndex) {
controllerList[i].expanded = true;
} else {
controllerList[i].expanded = false;
}
}
},
child: Container(
color: Colors.blue,
child: Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Icon(
Icons.calendar_today,
color: Colors.white,
)),
Expanded(flex: 1, child: Container()),
Expanded(
flex: 4,
child: Text(
"15/06/2020",
style: TextStyle(color: Colors.white),
),
),
],
)),
),
),
collapsed: Container(),
expanded: Container(
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Bill Date",
style: TextStyle(color: Colors.blue)),
Text("15/05/2020",
style: TextStyle(color: Colors.blue)),
],
),
Divider(
color: Colors.blue,
thickness: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Adjustment",
style: TextStyle(color: Colors.blue),
),
Text(".00", style: TextStyle(color: Colors.blue)),
],
),
Divider(
color: Colors.blue,
thickness: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Total due",
style: TextStyle(color: Colors.blue)),
Text("413.27",
style: TextStyle(color: Colors.blue)),
],
),
],
),
),
),
builder: (_, collapsed, expanded) {
return Expandable(
collapsed: collapsed,
expanded: expanded,
theme: const ExpandableThemeData(crossFadePoint: 0),
);
},
),
),
],
),
),
));
}
}
class Card2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ExpandableNotifier(
child: Padding(
padding: const EdgeInsets.all(10),
child: Card(
color: Colors.blue,
clipBehavior: Clip.antiAlias,
child: Column(
children: <Widget>[
ScrollOnExpand(
scrollOnExpand: true,
scrollOnCollapse: false,
child: ExpandablePanel(
controller: controllerList[1],
theme: const ExpandableThemeData(
iconColor: Colors.white,
headerAlignment: ExpandablePanelHeaderAlignment.center,
tapBodyToCollapse: true,
),
header: InkWell(
onTap: () {
currentIndex = 1;
for (int i = 0; i < controllerList.length; i++) {
if (i == currentIndex) {
controllerList[i].expanded = true;
} else {
controllerList[i].expanded = false;
}
}
},
child: Container(
color: Colors.blue,
child: Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Icon(
Icons.calendar_today,
color: Colors.white,
)),
Expanded(flex: 1, child: Container()),
Expanded(
flex: 4,
child: Text(
"15/05/2020",
style: TextStyle(color: Colors.white),
),
),
],
)),
),
),
collapsed: Container(),
expanded: Container(
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Bill Date",
style: TextStyle(color: Colors.blue)),
Text("15/06/2020",
style: TextStyle(color: Colors.blue)),
],
),
Divider(
color: Colors.blue,
thickness: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Adjustment",
style: TextStyle(color: Colors.blue),
),
Text(".00", style: TextStyle(color: Colors.blue)),
],
),
Divider(
color: Colors.blue,
thickness: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Total due",
style: TextStyle(color: Colors.blue)),
Text("413.27",
style: TextStyle(color: Colors.blue)),
],
),
],
),
),
),
builder: (_, collapsed, expanded) {
return Expandable(
collapsed: collapsed,
expanded: expanded,
theme: const ExpandableThemeData(crossFadePoint: 0),
);
},
),
),
],
),
),
));
}
}
class Card3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ExpandableNotifier(
child: Padding(
padding: const EdgeInsets.all(10),
child: Card(
color: Colors.blue,
clipBehavior: Clip.antiAlias,
child: Column(
children: <Widget>[
ScrollOnExpand(
scrollOnExpand: true,
scrollOnCollapse: false,
child: ExpandablePanel(
controller: controllerList[2],
theme: const ExpandableThemeData(
iconColor: Colors.white,
headerAlignment: ExpandablePanelHeaderAlignment.center,
tapBodyToCollapse: true,
),
header: InkWell(
onTap: () {
currentIndex = 2;
for (int i = 0; i < controllerList.length; i++) {
if(i == currentIndex) {
controllerList[i].expanded = true;
} else {
controllerList[i].expanded = false;
}
}
},
child: Container(
color: Colors.blue,
child: Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Icon(
Icons.calendar_today,
color: Colors.white,
)),
Expanded(flex: 1, child: Container()),
Expanded(
flex: 4,
child: Text(
"14/04/2020",
style: TextStyle(color: Colors.white),
),
),
],
)),
),
),
collapsed: Container(),
expanded: Container(
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Bill Date",
style: TextStyle(color: Colors.blue)),
Text("15/05/2020",
style: TextStyle(color: Colors.blue)),
],
),
Divider(
color: Colors.blue,
thickness: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Adjustment",
style: TextStyle(color: Colors.blue),
),
Text(".00", style: TextStyle(color: Colors.blue)),
],
),
Divider(
color: Colors.blue,
thickness: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Total due",
style: TextStyle(color: Colors.blue)),
Text("413.27",
style: TextStyle(color: Colors.blue)),
],
),
],
),
),
),
builder: (_, collapsed, expanded) {
return Expandable(
collapsed: collapsed,
expanded: expanded,
theme: const ExpandableThemeData(crossFadePoint: 0),
);
},
),
),
],
),
),
));
}
}
- How to prevent the clipped content inside a container with borderRadius to not overlap the border on each corner
- How do I bold (or format) a piece of text within a paragraph?
- Enumerate or map through a list with index and value in Dart
- Flutter Web: Cash Not Clearing After Release and Causing Old Content to Persist
- How to solve ListView.builder bottom overflow issue?
- Why webview_flutter not working in case of add to app (iOS)?
- Version code 1 has already been used. Try another version code
- How to draw and Horizontal list of circle avatars that are on top of each other
- Background notifications not working in release mode - _firebaseMessagingBackgroundHandler is being triggered
- How to get the File Extension from a string Path
- Can I develop a Flutter mail app for Microsoft Exchange using only SMTP?
- Android Studio Evaluate Expression issue
- pub get failed : A package may not list itself as a dependency
- Is there a way to directly callback from C/C++ to Dart on the Android platform?
- Display two pictures in carousel at a time
- How can I read the last change even if the program is closed and opened in the differences in the flutter program?
- Flutter - Can Google Sign in be used without firebase?
- How to handle the error type 'Null' is not a subtype of type 'bool' in type cast?
- Flutter:Do an operation if await takes more then 2 seconds
- flutter - create stack from a list
- Flutter path_provider Error - Could not resolve project :path_provider_linux
- How to remove the divider lines of an ExpansionTile when expanded in Flutter
- Flutter :- This AdWidget is already in the Widget tree. How to disable this exception. And what does it mean?
- How to add rounded borders to a bar chart in Flutter using fl_chart?
- Error: A problem occurred configuring project ':app'
- Express JS API query variable with parameters for EXEC stored procedure
- Why do i get "Exception:" when i receive the exception message in dart?
- Joystick & HudButtonComponents are hidden by game scene. Priority doesn't work
- flutter Camera initialize implementation
- Issue with file_picker_cross package in Flutter web