How to add cloth size selector on my flutter app?

Question

How do I add size selector for my clothing ecommerce app, im creating a multi vendor clothing ecommerce app. I dont know how to implement size selector for customers and then send the selected size into the add to cart . I also want the vendor who posts the products to be able to input the sizes he has. Please help with an example code?

score 1 · Accepted Answer · answered May 22 '20 at 18:47

1

This is maybe a duplicate answer, but the answer Use a dropdown list, just search flutter dropdown list, check this answer with examples How to implement drop down list in flutter?

answered May 22 '20 at 18:47

Ridha Rezzag

3,672
1
34
39

Yes I read this but this has item written in the code. I have a upload page where I let the vendor post type the sizes he want and display it on the product. I'm using firebase to save data. How do let the user select the size he wants and set the state to the size he selected and then send the selected size to next page ,like cart page or checkout page. The vendor should know which size was selected while adding to the cart. – Marc May 22 '20 at 18:56
In this case you need to create a logic and save each seize defined by the vendor in your database, then from the app call your database and get the list of the seizes entered by the vendor, populate that list for the user in a dropdown list, get the seize id selected by the user, then pass it with other data to the next page check this example how to pass data to the next screen https://flutter.dev/docs/cookbook/navigation/passing-data – Ridha Rezzag May 22 '20 at 19:06
Do I populate the dropdown list like this '$size'.how do i get the id?can it be done with todo? – Marc May 22 '20 at 19:18
Thats why i said you need to come up with a logic,dont repeat your self, i wont allow every vendor to create sizes for his products, i would create one table list of seizes, managed only by the admin, then ill set a logic allowing every vendor to add seizes he want from the list of seizes i created, and in each product details you can add a columns size1 size2 size3 and if vendor selected the size available for a product set clomun size to true if not available he didnt select it set it to false – Ridha Rezzag May 22 '20 at 19:33
Yes thankyou. Every region has a different size chart, so large size will be different for Asian and different for American. So I wanted to the vendor to type an initial before every size to show the size is made from a specific region chart. – Marc May 22 '20 at 20:10
Its better to create a compleet table that has all kind of sizes and manage that by the admin, dont allow every vendor to create his own list of seizes thats will be an extra load on your database when your website grows, its a repetitive values – Ridha Rezzag May 22 '20 at 20:14
Hi I've used this flutter package to select size but the vendor but I'm not understanding how to save the selected data can you please help? Here's the link for the package. – Marc May 24 '20 at 08:41
its better to create a new question about that problem – Ridha Rezzag May 24 '20 at 08:53
I did sir all I got was a down vote, here's the link for the question. – Marc May 24 '20 at 09:01

score 1 · Answer 2 · answered Nov 22 '20 at 13:09

Try this widget

import 'package:flutter/material.dart';

class SizeSelector extends StatelessWidget {
  final List<String> sizes;
  final String selectedSize;
  final void Function(String) onSizeSelected;

  const SizeSelector(
      {Key key, this.sizes, this.selectedSize, this.onSizeSelected})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(
          sizes.length,
          (index) => Padding(
                padding: const EdgeInsets.all(5.0),
                child: Material(
                  child: InkWell(
                    borderRadius: BorderRadius.circular(3),
                    onTap: () => onSizeSelected(sizes[index]),
                    child: Ink(
                      height: 50,
                      width: 50,
                      decoration: BoxDecoration(
                          color: selectedSize == sizes[index]
                              ? Color(0xFF667EEA)
                              : Color(0xFFF3F3F3),
                          borderRadius: BorderRadius.circular(3)),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text(
                          sizes[index],
                          style: Theme.of(context).textTheme.headline6.copyWith(
                              color: selectedSize == sizes[index]
                                  ? Colors.white
                                  : Colors.black87),
                        ),
                      ),
                    ),
                  ),
                ),
              )),
    );
  }
}

How to add cloth size selector on my flutter app?

2 Answers2