ExpansionTile Widget Flutter example

Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will learn how to make a Expandable Card in Flutter using ExpansionTile Widget.

What is Expansion Tile Widget in Flutter ?

Expansion is Similar to Expandable CardView in android,Using this Expansion Tile Widget one can Tap on the card to Expands or just collapses the view of the children inside it.

In other words, Expansion Tile is a simple ListTile with a traling icon or image that works some thing like expands or collapses the tile to open the hidden children widget in it.

Video Tutorial

 

Snippet Code of ExpansionTile widget Flutter

ExpansionTile(
            leading: Icon(FontAwesomeIcons.sign),
            title: Text("Expansion Title"),
            subtitle: Text("  Sub Title's"),
            children: <Widget>[
              Text(
                "In Children use can use any flutter Widget",
                style: TextStyle(fontSize: 20),
              ),
              SizedBox(
                height: 20,
              ),
              Center(
                child: Text(
                    "Children Widgets are expanded/ visible when Expansion Tile Widget is Clicked"),
              )
            ],
          ),

In above, snippet code of ExpansionTile i have included ExpansionTile properties such as title,subtitle,children, and a leading icon.

leading: Leading is the first properties of this widget, here you may include any widgets of your choice, In my case i have added an Icon

title: giving a title to the Expansion tile.

subtitle : giving a subtitle to Expansion tile.

children: <Widget>[] : define  widgets inside the Expansion Tile, this children widget will be visiable when user clicks on the expansion tile card.

When user click on the Tile, it expands(open) or collopses(closes).

Result of above snippet code.

after expanding expansiontile widget

Complete Source Code with Example of using Expansion Tile Widget

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterexpandablelibrary/ExpandableCardViewFlutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expandable Card View Widget"),
      ),
      body: SingleChildScrollView(
          child:
              MyExpanableCardViewFlutter()), //Wrapped into SingleChildScrollView because when click on TextField  keyboard will open and you may get error on screen "bottom overflowed by pixels flutter"
    );
  }
}

Create a new dart file in lib directory and name it as “MyExpanableCardViewFlutter”

MyExpandableCardviewFlutter.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MyExpanableCardViewFlutter extends StatefulWidget {
  @override
  _MyExpanableCardViewFlutterState createState() =>
      _MyExpanableCardViewFlutterState();
}

class _MyExpanableCardViewFlutterState
    extends State<MyExpanableCardViewFlutter> {
  //controller for TextField
  final username_controller = TextEditingController();
  final password_controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Card(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: MediaQuery.of(context)
                  .size
                  .width, // container width depending on user device screen width
              height: 260.0,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage(
                          "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"))),
            ),
          ),
          ExpansionTile(
            title: Text("Harley-Davidson"),
            subtitle: Text("  Explore the world of H-D"),
            children: <Widget>[
              IconTheme(
                data: IconThemeData(
                  color: Colors.amber,
                  size: 32,
                ),
                child: StarDisplay(value: 3),
              ),
              Text("This image has 3 star rating ")
            ],
          ),
          ExpansionTile(
            title: Text("LOGIN FORM"),
            trailing: Icon(FontAwesomeIcons.signInAlt),
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(15.0),
                child: TextField(
                  controller: username_controller,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'username',
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(15.0),
                child: TextField(
                  controller: password_controller,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Password',
                  ),
                ),
              ),
              RaisedButton(
                textColor: Colors.white,
                color: Colors.blue,
                onPressed: () {
                  String username = username_controller.text;
                  String password = password_controller.text;

                  if (username != '' && password != '') {
                    print('Successfull');

                    print(" Value Entered in USERNAME " + username);
                    print("Password entered is : " + password);
                  }
                },
                child: Text("Log-In"),
              )
            ],
          ),
        ],
      ),
    ));
  }
}

class StarDisplay extends StatelessWidget {
  final int value;
  const StarDisplay({Key key, this.value = 0})
      : assert(value != null),
        super(key: key);
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: List.generate(5, (index) {
        return Icon(
          index < value ? Icons.star : Icons.star_border,
        );
      }),
    );
  }
}

Note : I have made use of FontAwesomeIcon flutter library, So make sure you add it’s dependencies in pubspec.yaml file

dependencies:
  font_awesome_flutter: ^8.8.1   // this line

Result of above futter expension Tile Flutter Example

expension tile widget example