Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – I need to create a card structure but I don't know how to do it

The card structure I want to make

enter image description here

I tried to do something as I specified in my code, but it was not exactly what I wanted.
For example, I get overflow errors etc. even though I specify horizontal.
Is using listTile the wrong decision here

SizedBox(
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: campSites.length,
        itemBuilder: (context, index) {
          Map<String, dynamic> campSite = campSites[index];
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                SizedBox(
                  height: 99,
                  width: 94,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(15),
                    child: CachedNetworkImage(
                      imageUrl: campSite['image'],
                      imageBuilder: (context, imageProvider) => Container(
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: imageProvider,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      placeholder: (context, url) =>
                          const CircularProgressIndicator(),
                      errorWidget: (context, url, error) =>
                          const Icon(Icons.error),
                    ),
                  ),
                ),
                ListTile(
                  title: Text(campSite['name'],
                      style: const TextStyle(fontWeight: FontWeight.bold)),
                  subtitle: Text('${campSite['location']} away'),
                ),
              ],
            ),
          );
        },
      ),
    );
Tags:

2

Answers


  1. 0

    Please try PageView + Row

    See the example for more information

    import 'package:collection/collection.dart';
import 'package:flutter/material.dart';

class PageViewExample extends StatelessWidget {
  const PageViewExample({super.key});

  @override
  Widget build(BuildContext context) {
    final items = [1, 2, 3, 4, 5, 6, 7];
    final chunkItems = items.slices(2).toList();
    const spacePerItem = 16.0;
    final itemWidth =
        (MediaQuery.of(context).size.width - spacePerItem * 3) / 2;
    return PageView.builder(
      itemCount: chunkItems.length,
      itemBuilder: (ctx, index) => Row(children: [
        const SizedBox(width: spacePerItem / 2),
        ...chunkItems[index].map(
          (e) => Container(
            width: itemWidth,
            margin: const EdgeInsets.symmetric(horizontal: spacePerItem / 2),
            color: Colors.red,
            child: Text('$e'),
          ),
        ),
        const SizedBox(width: spacePerItem / 2),
      ]),
    );
  }
}
    Login or Signup to reply.
  2. 0

    It seems like you are trying to create a card structure for displaying campsite information using Flutter. The code you provided is on the right track, but if you are facing overflow errors, you might need to adjust the sizing and layout of your widgets.

    ListView.builder(
  scrollDirection: Axis.vertical,
  physics: const NeverScrollableScrollPhysics(),
  shrinkWrap: true,
  itemCount: campSites.length,
  itemBuilder: (context, index) {
    Map<String, dynamic> campSite = campSites[index];
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 120, // Adjust the height as needed
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          color: Colors.grey[200], // Add background color if 
needed
        ),
        child: Row(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15),
            bottomLeft: Radius.circular(15),
          ),
          child: CachedNetworkImage(
            imageUrl: campSite['image'],
            width: 100, // Adjust the width of the image
            fit: BoxFit.cover,
            placeholder: (context, url) => const 
CircularProgressIndicator(),
            errorWidget: (context, url, error) => const Icon(Icons.error),
          ),
        ),
        Expanded(
          child: ListTile(
              title: Text(
                campSite['name'],
                  style: const TextStyle(fontWeight: FontWeight.bold),
               ),
                subtitle: Text('${campSite['location']} away'),
              ),
            ),
          ],
        ),
      ),
    );
  },
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search