How to implement colours dropdown in flutter?

Question

enter image description here

how to implement this dropdown in flutter?(please refer the image above)

when the dropdown is expanded it should show a list of colours in a circular container.

Answer 1

try this way

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MainApp());
}

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: MyApp(),
        ),
      ),
    );
  }
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Color pickColor = Colors.red;
  List colorsList = [
    Colors.red,
    Colors.yellow,
    Colors.black,
    Colors.pink,
    Colors.blue
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(8)),
      child: DropdownButton(
        style: const TextStyle(color: Colors.black),
        //Dropdown font color
        dropdownColor: Colors.white,
        //dropdown menu background color

        //dropdown indicator icon
        underline: Container(),
        //make underline empty
        value: pickColor,
        onChanged: (value) {
          pickColor = value! as Color;
          setState(() {});
        },
        items: colorsList.map((itemone) {
          return DropdownMenuItem(
              value: itemone,
              child: Row(
                children: [
                  const Text(
                    'Color: ',
                    style: TextStyle(
                        color: Colors.black, fontWeight: FontWeight.w700),
                  ),
                  Container(
                      height: 20,
                      width: 20,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          color: itemone))
                ],
              ));
        }).toList(),
      ),
    );
  }
}