Is it possible to fill ExpansionTile title with image in Flutter?

Question

I want to create an expandable gallery, which has one image as a main image and upon clicking on it, I want to expand the gallery and show few images below the main image. So, I have created a ListView, which has a builder that returns ListTileTheme, which I used for removing the contentPadding, with child - ExpansionTile, but I still have some padding left in the container. Any idea how to completely fill the ExpansionTile? I've tried different approaches that I saw on the web, but no solution so far.

Here is my code:

Container _getGallery() {
    Container container = new Container(
      height: 500.0,
      child: new ListView.builder(itemCount: 1, itemBuilder: (context, i)
      {
        ListTileTheme tileTheme = new ListTileTheme(
          contentPadding: EdgeInsets.all(0.0),
          child: ExpansionTile(
            trailing: Container(
              height: 0.0,
              width: 0.0,
            ),
            backgroundColor: Colors.transparent,
            title: Image.asset("assets/images/onboarding2.png",
                height: 200.0,
                width: double.infinity,
                alignment: Alignment.center,
                fit: BoxFit.cover,
            ),
            children: <Widget>[
              new Column(
                children: _buildExpandableContent(),
              ),
            ],
          ),
        );
        return tileTheme;
      }),
    );
    return container;
  }

Here you can see what I've achieved so far (1- not expanded, 2- expanded). I want to remove this white lines around the first image.

Solution

No, it's not possible. This widget uses ListTile, which adds 16px gap (_horizontalTitleGap constant) if there's trailing widget. The problem is that there's always a trailing widget in ExpansionTile, even if you pass null:

trailing: widget.trailing ?? RotationTransition(
  turns: _iconTurns,
  child: const Icon(Icons.expand_more),
),

The only dirty workaround I can suggest is to use scale transform to compensate this 16px gap:

title: LayoutBuilder(
  builder: (context, constraints) {
    final newScale = 1.0 + 16.0 / constraints.maxWidth;

    return Container(
      transform: Matrix4.identity()..scale(newScale),
      child: Image.asset("assets/images/onboarding2.png",
          height: 200.0,
          width: double.infinity,
          alignment: Alignment.center,
          fit: BoxFit.cover,
      ),
    );
  }
),

Comments

[AskNilesh]

Have you tried fit: BoxFit.fill ?

[scourGINHO]

Yes, I have tried, unfortunately, nothing changes. I have edited my code (removed the Padding widget, which I am not using anymore).

[scourGINHO]

Thanks, mate. I guess it's not the best solution, but the only one, so many thanks. Works like expected. Do you know if this approach could slow down the app somehow?

[Eslam Sameh Ahmed]

Good answer but it did not work with RTL layout