Flutter Color picker app with many options - free source code

 

Package : 

flutter pub add flutter_colorpicker

Source code :

import 'package:flutter/material.dart'; import 'package:flutter_colorpicker/flutter_colorpicker.dart'; void main() { runApp(const MaterialApp( debugShowCheckedModeBanner: false, home: ColorPickerDemo())); } class ColorPickerDemo extends StatefulWidget { const ColorPickerDemo({Key? key}) : super(key: key); @override State<ColorPickerDemo> createState() => _ColorPickerDemoState(); } class _ColorPickerDemoState extends State<ColorPickerDemo> { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: currentColor, body: Center( child: ElevatedButton( child: Text( "Pick Color", style: TextStyle(color: Colors.white), ), onPressed: () => showPicker(), style: ElevatedButton.styleFrom(primary: Colors.blue), ), )); } // create some values Color pickerColor = Color(0xff443a49); Color currentColor = Color(0xff443a49); // ValueChanged<Color> callback void changeColor(Color color) { setState(() => pickerColor = color); } Future showPicker() { // raise the [showDialog] widget return showDialog( builder: (context) => AlertDialog( title: const Text('Pick a color!'), content: SingleChildScrollView( child: ColorPicker( pickerColor: pickerColor, onColorChanged: changeColor, ), // Use Material color picker: // // child: MaterialPicker( // pickerColor: pickerColor, // onColorChanged: changeColor, // ), // // Use Block color picker: // // child: BlockPicker( // pickerColor: currentColor, // onColorChanged: changeColor, // ), // // child: MultipleChoiceBlockPicker( // pickerColors: currentColor, // onColorsChanged: changeColors, // ), ), actions: <Widget>[ ElevatedButton( child: const Text('Got it'), onPressed: () { setState(() => currentColor = pickerColor); Navigator.of(context).pop(); }, ), ], ), context: context, ); } }

Video :