Expansion Tile In Flutter

Hello friends, I will talk about my new blog on Expansion Tile Widget In Flutter. We will also implement a demo of the Expansion Tile Widget, and describes its properties, and how to use them in your flutter applications. So let’s get started.

Table of Contents :

Flutter

Expansion Tile Widget

Code Implementation

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ,Flutter offers great developer tools, with amazing hot reload”

Expansions Tile Widget :

The expansion tile widget is a very useful widget. This widget lets you create a detailed tile that can be used as part of a list view. We need to show some detailed information on the list for many applications, but for this, we do not have enough space to expand and collapse the list. Then we can create it with the extension tile widget.

Following Some Properties of the Expansions Tile :

• title — The Title property allows you to choose the title for the expansion tile widget. This will be an item that will always be visible to the user.
• children — The children’s property holds any number of widgets. It can be a card for a simple text. And the extension tiles will know this only by clicking on the title of the widget.
• leading — The leading property is used on the first left side of the title, just as the leading list tile widget uses leading, similarly this feature works here.
• trailing — Use the trailing property to the right after the title, you can use text and icons in this property.
• backgroundColor — Using the background property gives color to the background of the expanded tile. Note, it assigns a color to the extended tile, not the title.

Demo Module :

In this screen, we will create a list with the help of a list view builder in which the expansion tile widget will be used and initialize the list data into the

Code Implementation :

You need to implement it in your code respectively:

Create a new dart file called expansion_title_demo.dart inside the libfolder.

In this screen, we will create a list with the help of a list view builder in which the expansion tile widget will be used and initialize the list data into the expansion tile widget. Let’s understand it with the help of a reference.

ExpansionTile(
  title: Text(
    items.playerName,
    style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
  ),
  children: <Widget>[
    ListTile(
      title: Text(
        items.description,
        style: TextStyle(fontWeight: FontWeight.w700),
      ),
    )
  ],
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_expansion_tile_demo/Constants/Constants.dart';
import 'package:flutter_expansion_tile_demo/model/month_model.dart';

class ExpansionTileDemo extends StatefulWidget {
  @override
  _ExpansionTileDemoState createState() => _ExpansionTileDemoState();
}

class _ExpansionTileDemoState extends State<ExpansionTileDemo> {
  List<MonthModel> monthModel;

  @override
  void initState() {
    monthModel = Constants.getMonthModel();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Expansion Tile Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 0.0),
        child: ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          physics: BouncingScrollPhysics(),
          itemCount: monthModel.length,
          itemBuilder: (BuildContext context, int index) {
            return _buildPlayerModelList(monthModel[index]);
          },
        ),
      ),
    );
  }

  Widget _buildPlayerModelList(MonthModel items) {
    return Card(
      child: ExpansionTile(
        title: Text(
          items.playerName,
          style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
        ),
        children: <Widget>[
          ListTile(
            title: Text(
              items.description,
              style: TextStyle(fontWeight: FontWeight.w700),
            ),
          )
        ],
      ),
    );
  }
}

Conclusion:

In this article, I have explained an Expansion Tile in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Expansion Tile demo from our side.

I hope this blog will provide you with sufficient information in Trying up the Expansion Tile in your flutter project. We showed you what the Expansion Tile is and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.