Table of Contents

Expansion Tile

Expansion Tile widget lets your content collapsable, it is very useful widget when your screen doesn’t have space to show some extra data then expansion title widget is very come handy.

Flutter

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

ExpansionTile properties

title: it is used as a title for your expansion tile widget. it is always visible to user.
initiallyExpanded: this is a boolean state for expansion title to hide and show children widgets , by default it’s false.
subtitle: it is used for subtitle for expansiontitle.
children: children property holds multiple widget inside expansion title.
leading: to set expansion title leading icon just like List tile.
backgroundColor : this property gives you ability to set background color , show only when widget is expanded.
trailing: to set expansion title trailing icon just like List tile.

Simple ExpansionTile Widget

  ExpansionTile(
                title: Text(
                  "Simple expansion tile",
                  style: TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold
                  ),
                ),
                children: [
                  
                  ListTile(
                    title: Text(
                      'body'
                    ),
                  )
                ],
              ),

Advance ExpansionTile Widget

 ExpansionTile(
                backgroundColor: Colors.grey[100],
                initiallyExpanded: true,
                leading:Icon(Icons.image) ,
                trailing: Icon(Icons.info_sharp),
                subtitle: Text(
                  "subtitle",
                  style: TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.normal
                  ),
                ),
                title: Text(
                  "Simple expansion tile",
                  style: TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold
                  ),
                ),
                children: [
                  
                  ListTile(
                    title: Text(
                      'body',
                       style: TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.normal
                  ),
                    ),
                  )
                ],
              ),

ExpansionTile with dynamic data

import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:http/http.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(title: 'ExpansionTile'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({Key key, this.title}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
 Future _responseFuture = http.get(Uri.parse("https://jsonplaceholder.typicode.com/photos"));
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child:  FutureBuilder(
  future: _responseFuture,
  builder: (BuildContext context, AsyncSnapshot response) {
    if (!response.hasData) {
      return const Center(
        child: const Text('Loading...'),
      );
    } else if (response.data.statusCode != 200) {
      return const Center(
        child: const Text('Error loading data'),
      );
    } else {
      List json=jsonDecode(response.data.body);

      return ExpansionListView(list: json,);
    }
  },
)
      ),
    );
  }
}
class ExpansionListView extends StatelessWidget {
  final List list;

  const ExpansionListView({Key key, this.list}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,
      itemBuilder: (context,index)=> ExpansionTitleCard(title: list[index]['title'],image: list[index]['url'],),
    );
  }
}

class ExpansionTitleCard extends StatelessWidget {
  final String title;
  final String image;

  const ExpansionTitleCard({Key key, @required this.title,@required this.image}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return  Card(
          child: ExpansionTile(
                  
                  trailing: Icon(Icons.info_sharp),
                 
                  title: Text(
                    "$title",
                    style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.bold
                    ),
                  ),
                  children: [
                    
                   Image.network("https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",width: MediaQuery.of(context).size.width,height:150.0,fit: BoxFit.cover,)
                     
                    
                  ],
                ),
    );
  }
}

Conclusion

now we are done with multiple example fo ExpansionTile, created one with dynamic data also.

Follow Resources:

https://api.flutter.dev/flutter/material/ExpansionTile-class.html

How to use ExpansionTile in Flutter