How to shrink images in ListTile but not expand it?

Question

I need to display images of several different sizes in a ListView.

When the image is larger than screen.width, I'd like it to shrink to fit width. But when the image is shorter, I'd like it to keep its original size.

How can I do it? Thanks in advance.

I tried putting Image inside Flex, but couldn't "stop" the small one to expand.

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:firebase_database/firebase_database.dart';

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

const _imagesDir = "images";

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Image List',
        theme: ThemeData(primarySwatch: Colors.blue,),
        home: MyListPage(title: 'Image List Page'),
    );
}
}

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

final String title;

@override
_MyListPageState createState() => _MyListPageState();
}

class _MyListPageState extends State<MyListPage> {

Widget build1(BuildContext context, AsyncSnapshot snapshot) {

    Widget _tileImagem(BuildContext context, String imageName) {
            imageName = _imagesDir + "/"+ imageName;
            return Padding(padding:EdgeInsets.all(2.0), 
                child: Flex(
                    direction: Axis.vertical,
                    children: <Widget>[
                        Image.asset(imageName),
                    ]
                ),
            );

    }

    return Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(40.0),
            child: AppBar(
                title: Row(
                    children: <Widget> [
                        Padding(padding: EdgeInsets.only(right: 20.0),),
                        Text( 'Duda'), 
                    ]),
            )
        ),
        body: ListView(
            shrinkWrap: true,
            children: <Widget>[
                Container(),
                _tileImagem(context, 'flutter_big_medium.png'),
                Container(), //My App have some different widgets 
                Container(),
                Container(), //I kept them here just as place holder
                Container(),
                Container(),
                Container(),
                Container(),
                Container(),
                Divider(),
                TileTexts(),
                Divider(),
            ],
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: () { },
            child: Icon(Icons.skip_next),
        ),
    ); 
}

@override
Widget build(BuildContext context) {
    return new FutureBuilder(
        future: 
            FirebaseDatabase.instance.reference()
                .child('Testing')
                .once(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
            switch (snapshot.connectionState){
                case ConnectionState.done: return build1(context, snapshot);
                case ConnectionState.waiting: return CircularProgressIndicator();
                default:
                    if (snapshot.hasError) {
                        return Text("hasError: ${snapshot.error}");
                    } else {
                        return Text("${snapshot.data}");
                    }
            }                                
        }
    );
}
}

class TileTexts extends StatefulWidget {

TileTexts() : super();

@override
_TileTextsState createState() => _TileTextsState();
}

class _TileTextsState extends State<TileTexts> {

@override
void initState() {
    super.initState();
}

    Widget text1(String title, String imageName, TextStyle style) {
        return Expanded(
            child:Container(
                margin: const EdgeInsets.only(left: 10.0),
                child: Column(
                    children: <Widget>[
                        Html(data: title, 
                            useRichText: true,
                            defaultTextStyle: style,
                        ),
                        ((imageName == null))
                            ? Container()
                            : Image.asset(_imagesDir + "/"+imageName),
                    ]
                ),
            ),
        );
    }

    Widget _tileDetail(BuildContext context, String imageName) {
        return Container(
            padding: EdgeInsets.fromLTRB(5.0,0.0,10.0,0.0),
            child: Row(
                children: <Widget>[ 
                    Material(
                        shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(22.0) ),
                        clipBehavior: Clip.antiAlias,
                        child: MaterialButton(
                            child: Text('X'),
                            color: Theme.of(context).accentColor,
                            elevation: 8.0,
                            height: 36.0,
                            minWidth: 36.0,
                            onPressed: () {
                                //
                            },
                        ),
                    ),
                    text1('<body>veja a imagem</body>', imageName, Theme.of(context).textTheme.caption),
                ],
            ),
        );
    }

//_TileTexts
@override
Widget build(BuildContext context) {
    print('_TileTexts build');
    return Column(
        children: <Widget>[
            _tileDetail(context, 'flutter_med_medium.png'),
            Divider(),
            _tileDetail(context, 'flutter_med_medium.png'),
            Divider(),
            _tileDetail(context, 'flutter_med_medium.png'),
        ],
    );
}
}

Answer 1

Please check the doc, it says:

The heights of the leading and trailing widgets are constrained according to the Material spec. An exception is made for one-line ListTiles for accessibility. Please see the example below to see how to adhere to both Material spec and accessibility requirements.

after reading docs, you should achieve what you want :)

Answer 2

Create an method,getTitleImage(imageName), that returns Flex if image is bigger then screen-with, else return the image inside an container or in other widget of choice.

....

return Padding(padding:EdgeInsets.all(2.0), 
       child: getTitleImage(imageName)
      ),
);
....

Here is some other tips and tricks using Flex