Image in Listtile - Flutter

Asked

Viewed 1,029 times

0

I’m not able to leave my image in my Listtile, when I try to scale it only goes horizontal and never vertical, example:

inserir a descrição da imagem aqui

Following code, I’m trying to scale with the property Radius:

ListView.separated(
    separatorBuilder: (context,index) => Divider(
      color: Colors.black),
  itemCount: _professionals.length,
  itemBuilder: (context,index){
    return 
    ListTile(
      contentPadding: EdgeInsets.all(15.0),
      leading:  
      CircleAvatar(
        backgroundImage: AssetImage("images/perfil_anhan.jpg"),
        radius: 70,
      ),
      title: (Text(getName(_professionals[index]))),

      ...

How could I make her proportional?

list listview flutter
  • 2

    Try to use the attribute child of CircleAvatar instead of backgroundImage. Within the child use the Image.asset() and fill in the property fit which is used to adjust the images inside your containers. Example: CircleAvatar(child: Image.asset("name", fit: BoxFit.contain,),);

  • 1

    Hello Matheus, I could not solve this way, but gave me a light and I managed to solve otherwise. I’ll put down, thank you!

  • Alian, has no answer met your need? If not, explain better what you need so we can solve.

2 answers

1

The ideal would be the CircleAvatar, in view of the image that has passed, and as already commented.

Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListTile(
          leading: CircleAvatar(
            backgroundColor: Colors.brown.shade800,
            child: Text('AH'),
          ),
          title: Text('Fulano'),
          subtitle: Text('da Silva'),
        ),
        ListTile(
          leading: CircleAvatar(
            backgroundImage: NetworkImage('https://imagens.canaltech.com.br/empresas/690.400.jpg'),
          ),
          title: Text('Ciclano'),
          subtitle: Text('de Jesus'),
        ),
      ],
    );
  }
}

1º using background color and text.

2º using image.

Upshot

img

Official documentation: Circleavatar

0


Guys, I decided using the Child property, and inside it a Container with borderRadius to set the size.

Follows below solution:

                child: Container(
                    width: 100.0,
                    height: 100.0,
                    decoration: BoxDecoration(
                        color: Colors.red,
                        image: DecorationImage(
                            image: AssetImage('images/hacker.jpeg'),
                            fit: BoxFit.cover),
                        borderRadius:
                            BorderRadius.all(Radius.circular(75.0)),
                        boxShadow: [
                          BoxShadow(blurRadius: 7.0, color: Colors.black)
                        ]),
                  ),

Browser other questions tagged list listview flutter

You are not signed in. Login or sign up in order to post.