How to implement colours dropdown in flutter? - 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(),
),
);
}
}