ListView Expand or Collpsable In Flutter

ListView Expand or Collpsable In Flutter :

This flutter tutorial post is ListView Expand or Collpsable in flutter. Creates a single-line [ListTile] with a trailing button that expands or collapses the tile to reveal or hide the [children]. The [initiallyExpanded] property must be non-null.

Property :

title: Header title
children: Expands or collapses items
backgroundColor:
leading:
onExpansionChanged:
initiallyExpanded:

If item is expands then remove divider. Click ExpansionTile remove below this code.

 decoration: BoxDecoration(
         color: _backgroundColor.value ?? Colors.transparent,
         border: Border(
           top: BorderSide(color: borderSideColor),
           bottom: BorderSide(color: borderSideColor)))

Screenshot :

ListView Expand or Collpsable In Flutter

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: "List View Collapsable",
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageScreenState createState() => new _MyHomePageScreenState();
}

class _MyHomePageScreenState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new ListView.builder(
        itemCount: policies.length,
        itemBuilder: (context, i) {
          return new ExpansionTile(
            title: new Text(
              policies[i].title,
              style: new TextStyle(
                  fontSize: 15.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black),
            ),
            children: <Widget>[
              new Column(
                children: _buildExpandableContent(policies[i]),
              ),
            ],
          );
        },
      ),
    );
  }

  _buildExpandableContent(Websites policies) {
    List<Widget> columnContent = [];

    for (String content in policies.contents)
      columnContent.add(
        new ListTile(
            title: new Text(
              content,
              style: new TextStyle(fontSize: 15.0, color: Colors.black),
            ),
            onTap: () {
              print(Websites.endpoints[content] + " - " + content);
            }),
      );

    return columnContent;
  }
}

class Websites {
  final String title;
  List<String> contents = [];

  static final Map<String, String> endpoints = const {
    "Introduction": "https://github.com/",
    "Installation": "https://www.google.com/",
    "google": "https://flutter.dev/docs/get-started/install",
    "swift": "https://developer.apple.com/swift/"
  };

  Websites(this.title, this.contents);
}

final titles = [
  'Flutter',
  'Android',
];

List<Websites> policies = [
  new Websites('Flutter', [
    'Introduction',
    'Installation',
  ]),
  new Websites('Android', ['Activity Life Cycle', 'Fragment Life Cycle']),
];

RELATED ARTICLESMORE FROM AUTHOR