flutterlistviewtrailing

Flutter list view builder flexible configuration


I ve started to teach myself the Flutter dart language. I have a list view builder widget established which I want to use multiple times in the app. The list view consists of a checkbox, a Text in the middle and an information button at the trailing. Now I would like to configure my list view, so that Pictures can be displayed individually by pressing the info Icon. For example if I press the Infobutton on "wood" a picture of wood is displayed. But if I press the button of "iron" a picture of iron should be displayed and so on.... I m looking forward to your answers. Kind regards

This is what I ve tried so far and the code itself is working, except for the problem I described above.

`class ToDo extends StatelessWidget {

final List products = ['wood', 'iron' ];

ToDo({super.key});

@OverRide
Widget build(BuildContext context) {
return Scaffold(

body:
ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, i) {
    return ToDoItem( products[i] );
  },
)
);
}
}

class ToDoItem extends StatefulWidget {
final String title;
const ToDoItem(this.title, {super.key});

@OverRide
State createState() => _ToDoItemState();
}

class _ToDoItemState extends State {
@OverRide
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 5,vertical: 2),
child: ListTile(
tileColor: const Color(0xFF5D6D7E),
shape: RoundedRectangleBorder(
side: const BorderSide (color:Colors.white,width: 2),
borderRadius: BorderRadius.circular(10),
),

contentPadding: const EdgeInsets.symmetric(vertical: 10.0),
leading: Checkbox(
  value: timeDilation !=1.0,
  onChanged: (bool? value) {
    setState(() {
      timeDilation = value! ? 3.0 : 1.0;
    });
  },

),
  title: Text(
  widget.title,
  style: const TextStyle(
      fontSize: 25.0,
      fontWeight: FontWeight.w600,
      color: Colors.white),
   ),
   trailing: IconButton(icon: const Icon(Icons.info_outlined,size: 40,color: Colors.orange,), 
   onPressed: () { print('Test1'); },),
  ),
 );
}
}

`


Solution

  • You can follow the below steps:

    1. Create an asset folder with images named "wood.jpg" and "iron.jpg"
    2. When calling the ToDoItem() widget, you can render the images in Container as:
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
                'assets/${widget.title}'),
            fit: BoxFit.fill,
          )
        ),
      )
      
    
    
    I hope this helps :)
    Let me know if you come across any errors.