Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter : Image on ListTile leading too small

Tags:

I got a problem with image size when I put on ListTile's leading within ConstrainedBox, the images are too small and it can't fill to larger size, any idea to make this image size can follow Card's height?

Thank you.

Listview with Card

ListTile(
                        leading: ConstrainedBox(
                            constraints:
                                BoxConstraints(minWidth: 100, minHeight: 100),
                            child: Image.network(
                              'http://www.malmalioboro.co.id/$gambar',
                              width: 100,
                              height: 100,
                            )),
                        title: Text(
                          nama,
                          style: TextStyle(
                              fontSize: 20.0, fontWeight: FontWeight.bold),
                        ),
                        subtitle: Column(
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                Text(
                                  'Barcode : ',
                                  style: TextStyle(fontWeight: FontWeight.bold),
                                ),
                                Text(
                                  deskripsi,
                                  style: TextStyle(fontSize: 15.0),
                                ),
                              ],
                            ),
                            Row(
                              children: <Widget>[
                                Text(
                                  'Harga : ',
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 20),
                                ),
                                Text(
                                  harga,
                                  style: TextStyle(fontSize: 20),
                                )
                              ],
                            ),
                          ],
                        ),
                      ),
like image 791
dexdim Avatar asked Jun 05 '20 08:06

dexdim


1 Answers

Use a custom widget instead of ListTile.

Created your own ListTileCustom to do what you want ;)

Playing with Container, Column and Row, you can do something like this (i'ts just an example, dont use this quick bad code ;)):

enter image description here

    import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }

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

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

    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: ListView.builder(
              itemCount: 15,
              itemBuilder: (context, index) {
                return Card(
                  clipBehavior: Clip.antiAlias,
                  child: Container(
                    height: 120,
                    padding: const EdgeInsets.all(0),
                    child: Row(children: [
                      Expanded(
                        flex: 6,
                        child: Container(
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: NetworkImage(
                                      'https://live.staticflickr.com/3780/9134266649_3d2f1af95b_z.jpg'),
                                  fit: BoxFit.fill)),
                        ),
                      ),
                      Spacer(
                        flex: 1,
                      ),
                      Expanded(
                        flex: 14,
                        child: Container(
                          padding: const EdgeInsets.only(top: 5),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                              Text("Title",
                                  style: TextStyle(
                                      fontSize: 20.0, fontWeight: FontWeight.bold)),
                              Row(
                                children: <Widget>[
                                  Text(
                                    'Barcode : ',
                                    style: TextStyle(fontWeight: FontWeight.bold),
                                  ),
                                  Text(
                                    "barcode",
                                    style: TextStyle(fontSize: 15.0),
                                  ),
                                ],
                              ),
                              Row(
                                children: <Widget>[
                                  Text(
                                    'Harga : ',
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold, fontSize: 20),
                                  ),
                                  Text(
                                    'harga',
                                    style: TextStyle(fontSize: 20),
                                  )
                                ],
                              ),
                              Align(
                                alignment: Alignment.bottomRight,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: <Widget>[
                                    FlatButton(
                                        onPressed: null,
                                        child: Text("DETAIL ITEM")),
                                    FlatButton(
                                        onPressed: null, child: Text("BELI")),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ]),
                  ),
                );
              }),
        );
      }
    }
like image 136
Danaru Avatar answered Oct 02 '22 15:10

Danaru