Flutter - ListView inside Card

Question

I want to create a ListView in a Card. I want to add/remoove items out of the ListView while the app is running. I tried this:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          AppLocalizations.of(context)!.devices,
          style: Theme.of(context).textTheme.headline1,
        ),
        leading: Image.asset(
            "assets/logos/logo_standalone.png"
        ),
      ),

      body: Card(
        margin: const EdgeInsets.all(10),
        color: Theme.of(context).colorScheme.onBackground,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(20))
        ),

        child: Expanded(
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return const ListTile(title: Text("Test"));
            },
            itemCount: 5,
            shrinkWrap: true,
          ),
        ),
      ),
    );
  }

When I run that there are many errors. Is there any possibillity to do that?

Answer 1

When working with ListView you need the define size of the child regarding the scroll direction. If you are using Axis.horizontal the child should have a width property. If you are using Axis.vertical , then the child should have a height property.

Also, Expanded is used inside a Column , Row , or Flex . You can use SizedBox.expand for an expanded container.

Read about that at here https://docs.flutter.dev/development/ui/widgets/layout

So instead of:

child: Expanded(
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemBuilder: (context, index) {
      return const ListTile(title: Text("Test"));
    },
    itemCount: 5,
    shrinkWrap: true,
  ),
),

You should do this:

child: SizedBox.expand(
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: 5,
    itemBuilder: (context, index) {
      return SizedBox(
        width: MediaQuery.of(context).size.width * .5,
        child: const ListTile(
          title: Text("Test"),
        ),
      );
    },
  ),
),