import 'package:mdl/mdl.dart';

main() {
    registerMdl();
    componentFactory().run().then((_) {
    });
}
To use any MDL component, you must include the minified CSS file in the <head> section of the page:
More about theming...
<div class="demo-preview-block">
    <h5>Multiple sections can be open at the same time</h5>
    <div class="mdl-accordion-group">
        <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
            <label class="mdl-accordion__label">Panel 1<i class="material-icons indicator right">chevron_right</i></label>
            <div class="mdl-accordion--content">
                <h5 class="mdl-accordion--header">Header</h5>
                <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
                    at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
                    quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
            <label class="mdl-accordion__label">Panel 2<i class="material-icons indicator right">chevron_right</i></label>
            <div class="mdl-accordion--content">
                <h5 class="mdl-accordion--header">Header</h5>
                <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
                    at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
                    quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in
                    at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut
                    cupiditate delectus.</p>
            </div>
        </div>
        <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
            <label class="mdl-accordion__label">Panel 3<i
                    class="material-icons indicator right">chevron_right</i></label>
            <div class="mdl-accordion--content">
                <h5 class="mdl-accordion--header">Header</h5>
                <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
                    at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
                    quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit.</p>
            </div>
        </div>
</div>
<div class="demo-preview-block sample">
    <h5>Only one section is open</h5>
    <div class="mdl-accordion-group mdl-accordion--radio-type mdl-js-ripple-effect">
        <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
            <label class="mdl-accordion__label"><i class="material-icons indicator">chevron_right</i>Panel 1</label>
            <div class="mdl-accordion--content">
                <h5 class="mdl-accordion--header">Header</h5>
                <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
                    at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
                    quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
            <label class="mdl-accordion__label"><i class="material-icons indicator">chevron_right</i>Panel 2</label>
            <div class="mdl-accordion--content">
                <h5 class="mdl-accordion--header">Header</h5>
                <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
                    at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
                    quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in
                    at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut
                    cupiditate delectus.</p>
            </div>
        </div>
        <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
            <label class="mdl-accordion__label"><i class="material-icons indicator">chevron_right</i>Panel 37</label>
            <div class="mdl-accordion--content">
                <h5 class="mdl-accordion--header">Header</h5>
                <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
                    at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
                    quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit.</p>
            </div>
        </div>
</div>
<div class="demo-preview-block">
    <h5>Advanced Panel-Header</h5>
    <div class="mdl-accordion-group">
        <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
            <label class="mdl-accordion__label with-toolbar">Panel 1
                <span class="mdl-accordion__label--stretch">
                    <i class="mdl-icon material-icons mdl-color-text--accent">3d_rotation</i>
                    <i class="mdl-icon material-icons mdl-color-text--accent">accessibility</i>
                    <i class="mdl-icon material-icons mdl-color-text--accent">account_balance</i>
                </span>
                <i class="material-icons indicator">chevron_right</i></label>
            <div class="mdl-accordion--content">
                <h5 class="mdl-accordion--header">Header</h5>
                <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
                    at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
                    quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
            <label class="mdl-accordion__label">Panel 2<span class="sample">Text in span</span>
                <i class="material-icons indicator">chevron_right</i>
            </label>
            <div class="mdl-accordion--content">
                <h5 class="mdl-accordion--header">Header</h5>
                <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
                    at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
                    quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in
                    at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut
                    cupiditate delectus.</p>
            </div>
        </div>
        <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect">
            <label class="mdl-accordion__label">
                <i class="material-icons indicator">loop</i>
                Panel 3
            </label>
            <div class="mdl-accordion--content">
                <h5 class="mdl-accordion--header">Header</h5>
                <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus
                    at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error
                    quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit.</p>
            </div>
        </div>
</div>

accordion

...will be here soon