CODEWITHSUNDEEP
flutterflutter-layout
Arsh Shaikh
Arsh Shaikh

Reputation: 1231

Dropdown to select Color

Does flutter DropDown only support Text?

If not then how do I create a drop down that somewhat resembles this image.

a dropdown

P.s.: I do not wish to implement the scroll bar in the image, this was the closest that i could find to what I imagine to make.

Upvotes: 3

Views: 2577

Answers (3)

sean.boyer
sean.boyer

Reputation: 1237

Here's what I've been using for myself. We create a dropdown, and like the answer above, just populate the dropdown item with a colour filled container. Just add or remove whatever colours you would like to the List.

import 'package:flutter/material.dart';

class ColorDropDown extends StatefulWidget {
  final String label;
  final Function(Color) onChanged;
  final double height;
  final double width;

  ColorDropDown({
    Key key,
    this.onChanged,
    this.height = 25,
    this.width = 150,
    this.label,
  }) : super(key: key);

  @override
  _ColorDropDownState createState() => _ColorDropDownState();
}

class _ColorDropDownState extends State<ColorDropDown> {
  Color value;
  final List<Color> colors = [
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.yellow,
    Colors.pink,
    Colors.purple,
    Colors.brown,
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
        child: DropdownButton<Color>(
      value: value,
      hint: Text(widget.label ?? ''),
      onChanged: (color) {
        setState(() => value = color);
        widget.onChanged(color);
      },
      items: colors
          .map(
            (e) => DropdownMenuItem(
              value: e,
              child: Container(
                width: widget.width,
                height: widget.height,
                color: e,
              ),
            ),
          )
          .toList(),
    ));
  }
}

Upvotes: 1

Mithun Nath
Mithun Nath

Reputation: 523

You could do something like this:

   DropdownButton(
        onChanged: (value) {
          print(value);
        },
        items: [
          DropdownMenuItem(
           value: x, 
             child: Container(
                child: Text("Menu Item One"), 
                color: Colors.red, 
                height: 15,
                width: MediaQuery.of(context).size.width),
             ),
           ),
          DropdownMenuItem(
           value: y, 
             child: Container(
                child: Text("Menu Item Two"), 
                color: Colors.blue, 
                height: 15,
                width: MediaQuery.of(context).size.width),
             ),
           ),
          DropdownMenuItem(
           value: z, 
             child: Container(
                child: Text("Menu Item Three"), 
                color: Colors.green, 
                height: 15,
                width: MediaQuery.of(context).size.width),
             ),
           ),
        ],
  ),

Hope that helps!

Upvotes: 1

Ahmed Khattab
Ahmed Khattab

Reputation: 2799

you can use an empty container with a full width and give a background color;

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart' as image_picker;
import 'package:provider/provider.dart';
import 'package:simple_flutter_i18n/simple_flutter_i18n.dart';

// import '../i18n/i18n.dart';

class DropDown extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    final language = Provider.of<I18n>(context).lang;

    return Container(
      child: DropdownButton(
        onChanged: (d) {},
        items: [
          DropdownMenuItem(
            child: Container(
              width: 100,
              height: 10,
              color: Colors.red,
            ),
          ),
          DropdownMenuItem(
            child: Container(
              width: 100,
              height: 10,
              color: Colors.blue,
            ),
          )
        ],
      ),
    );
  }
}

Upvotes: 2

Related Questions