Expandable Card - BottomSheet Widget Flutter
Last updated Jan 30, 2025How to create a Draggable Bottomsheet widget in a flutter, In this post we are going to implement Expandable bottom sheet Widget.
To implement this we are going to use ExpanddableCard dependency.
Expandable
Constructor
ExpandableCard({
@required this.children,
this.padding = const EdgeInsets.only(top: 5, left: 20, right: 20),
this.minHeight = 100,
this.maxHeight = 500,
this.hasShadow = true,
this.backgroundColor = Colors.blueGrey,
this.hasRoundedCorners = false,
this.hasHandle = true,
})
|
Lets' get started.
Step 1: Create a Flutter Application and remove the default code.
Step 2: Add Expandable Card dependency in pubspec.yaml file
dependencies:
expandable_card:
|
Step 3: Update main.dart file with below code
import 'package:flutter/material.dart';
import 'package:expandable_card/expandable_card.dart';
void main() {
runApp(MaterialApp(home: HomePage()));
}
class HomePage extends StatelessWidget {
Widget _page() => Scaffold(
appBar: AppBar(title: Text("Expandable Card"),backgroundColor: Colors.green,),
body: Padding(
padding: const EdgeInsets.only(bottom: 100,top: 10),
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,),
children: [
getMoview("https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_960_720.jpg","Gladiator"),
getMoview("https://images.pexels.com/photos/301599/pexels-photo-301599.jpeg?cs=srgb&dl=pexels-pixabay-301599.jpg&fm=jpg","OMG"),
getMoview("https://c1.wallpaperflare.com/preview/266/879/639/ganesh-underwater-photoshop-sea-images-a-line-between-under-and-out-of-the-water.jpg","The Big Lebowski "),
],
),
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: ExpandableCardPage(
page: _page(),
expandableCard: ExpandableCard(
hasHandle: false,
backgroundColor: Colors.blueGrey,
padding: EdgeInsets.only(top: 5, left: 20, right: 20),
maxHeight: MediaQuery.of(context).size.height - 100,
minHeight: 80,
hasRoundedCorners: true,
hasShadow: true,
children: [
SizedBox(height: 10),
Row(
children: [
Icon(Icons.filter_list,size: 50,color: Colors.white,),
SizedBox(width: 15),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hollywood",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.white,
),
),
],
),
],
),
SizedBox(height: 18),
Divider(
height: 30,
color: Colors.white,
),
ListTile(
leading: Icon(Icons.image,color: Colors.white,),
title: Text("Hollywood", style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.white,
)),
trailing: Icon(Icons.radio_button_unchecked,color: Colors.white,),
),Divider(
height: 30,
color: Colors.white,
),
ListTile(
leading: Icon(Icons.image,color: Colors.white,),
title: Text("Boolywood", style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.white,
)),
trailing: Icon(Icons.radio_button_unchecked,color: Colors.white,),
),Divider(
height: 30,
color: Colors.white,
),
ListTile(
leading: Icon(Icons.image,color: Colors.white,),
title: Text("Tollywood", style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.white,
)),
trailing: Icon(Icons.radio_button_unchecked,color: Colors.white,),
),Divider(
height: 30,
color: Colors.white,
),
],
),
),
);
}
getMoview(image,title) {
return
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Stack(
children: [
Positioned(
child: Image.network(
image,
fit: BoxFit.fill,)
, left: 0,
right: 0,
),
Positioned(child: Container(
color: Colors.white.withOpacity(0.9), child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text(title, style: TextStyle(
color: Colors.pink,
fontSize: 18,
fontWeight: FontWeight.bold),),
)), bottom: 0, right: 0, left: 0,)
],
),
);
}
}
|
Step 4: Run application.
![]() |
Tags: Expandable Listview, ExpansionTitle , Expndable Text
Article Contributed By :
|
|
|
|
4226 Views |