Flutter list view builder flexible configuration

Question

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'); },),
  ),
 );
}
}

`

score 1 · Accepted Answer · answered Dec 02 '22 at 11:42

1

You can follow the below steps:

Create an asset folder with images named "wood.jpg" and "iron.jpg"

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.

answered Dec 02 '22 at 11:42

Aditi Singh

34
2
6

Thank yout very much for your answer. I've created the asset as described and implemented the code in the {} brackets of the trailing and no errors are shown. When I do a hot reload, another sized box below my original widged appears, which is bigger than the size of the screen. Clicking on the info icon doesnt open the images. Does anyone have a clue how to fix that? – datavinnie Dec 08 '22 at 10:55
I found the mistake why the second sized box appeared. I made a widget, which I called on another part of the program containing the sized box. Unfortunately the container still can`t be opened. When I click on the Icon button nothing happens. can the container be opened with an on Tap function? Would a Details page funtion also work for this? Thank you very much and kind regards – datavinnie Dec 14 '22 at 07:12

Flutter list view builder flexible configuration

1 Answers1