Expandable Card - BottomSheet Widget Flutter

Last updated Aug 06, 2021

How 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.

 

 

Expandable List Flutter Expandabel card

 

 

Tags: Expandable Listview, ExpansionTitle , Expndable Text

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

3943 Views