How can I show a list of Texts in only one widget

Question

I'm receiving from DB a list of 'Sizes' object with two fields 'name' and 'quantity'. Each item can receive one or more Sizes and I would like to show this information like this:

// Supposing this item has the size one size with name = Large and quantity = 3 
// and the size two with name = Medium and quantity = 34

Large: 3 / Medium: 34 // RETURN I WANT

The code I have now is this:

Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Text("${item.sizes.map}"), 
                              // I was thinking about do a forEach in sizes
                              // to get all but this doesn't work
                              SizedBox(width: 12.0),
                              Text(item.price),
                              SizedBox(width: 8.0),
                            ],
                          ),

So how can I handle this, showing all the sizes in one widget?

Answer 1

You will need to use the Wrap widget.
Minimal example below (does exactly what you want, adjust to your needs).

import 'package:flutter/material.dart';
import 'dart:math' show Random;

class Sizes {
  final String name;
  final int quantity;

  Sizes({
    required this.name,
    required this.quantity,
  });
}

class MyCoolSizes extends StatelessWidget {
  const MyCoolSizes({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Generate data for this example
    final random = Random();
    final sizes = <Sizes>[];
    for (var i = 0; i < 100; i++) {
      sizes.add(Sizes(
        name: ['Small', 'Medium', 'Big boy'][random.nextInt(3)],
        quantity: random.nextInt(100),
      ));
    }

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(
          'My Cool Sizes',
          style: TextStyle(
            color: Colors.black,
          ),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: SingleChildScrollView(
          child: Wrap(
            spacing: 10.0, // Horizontal spacing
            runSpacing: 10.0, // Vertical spacing
            children: sizes.map((size) => SizeDisplay(size: size)).toList(),
          ),
        ),
      ),
    );
  }
}

class SizeDisplay extends StatelessWidget {
  final Sizes size;

  const SizeDisplay({
    Key? key,
    required this.size,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(5.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5.0),
        color: Colors.blue,
      ),
      child: Text(
        '${size.name}: ${size.quantity}',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    );
  }
}

Answer 2

You should try this :

Card(
              shape: RoundedRectangleBorder(
                side: BorderSide(
                  color: Colors.green.shade300,
                ),
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: Column(
                children: [
                  ListTile(
                    title: Text('xfgvdsffg'),
                    trailing: Text(
                      '₹ 77.0',
                    ),
                  ),
                  ListTile(
                    title: Text('xfgvdsffg'),
                    trailing: Text(
                      '₹ 77.0',
                    ),
                  ),
                ],
              ),
            );

your output like this

Answer 3

如果您只想显示文本，请补充@Thepeanut 答案，您可以：

   Text("${item.sizes.map.map((it) => '${it.name}: ${it.quantity} ').join('/ ')}"),

Answer 4

you can do as below , considering items as the list from db

return ListView.builder(
     itemCount:items.length,
     itemBuilder: (BuildContextcontext, int index) {    
         return Text(getTextData(items[index);
     });

 String getTextData(Map<String,int> map){
     String dataToReturn="";
     map.keys.forEach((key){
     dataToReturn +="$key - ${map[key]} ";
  });

 return dataToReturn;
}