Step 1
We cannot directly remove the time stamp from Flutter Color Picker but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code .
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter_colorpicker: ^0.3.4
flutter pub get
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(
)));
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool lightTheme = true;
Color currentColor = Colors.limeAccent;
void changeColor(Color color) => setState(() => currentColor = color);
@override
Widget build(BuildContext context) {
return Theme(
data: lightTheme ? ThemeData.light() : ThemeData.dark(),
child: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.orangeAccent,
title: GestureDetector(
child: Text('Color Picker'),
onDoubleTap: () => setState(() => lightTheme = !lightTheme),
),
bottom: TabBar(
tabs: <Widget>[
const Tab(text: 'HSV'),
const Tab(text: 'Material'),
const Tab(text: 'Block'),
],
),
),
body: TabBarView(
physics: const NeverScrollableScrollPhysics(),
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
elevation: 3.0,
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(0.0),
contentPadding: const EdgeInsets.all(0.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
content: SingleChildScrollView(
child: SlidePicker(
pickerColor: currentColor,
onColorChanged: changeColor,
paletteType: PaletteType.rgb,
enableAlpha: false,
displayThumbColor: true,
showLabel: false,
showIndicator: true,
indicatorBorderRadius:
const BorderRadius.vertical(
top: const Radius.circular(25.0),
),
),
),
);
},
);
},
child: const Text('Change Button Color'),
color: currentColor,
textColor: useWhiteForeground(currentColor)
? const Color(0xffffffff)
: const Color(0xff000000),
),
],
),
Center(
child: RaisedButton(
elevation: 3.0,
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(0.0),
contentPadding: const EdgeInsets.all(0.0),
content: SingleChildScrollView(
child: MaterialPicker(
pickerColor: currentColor,
onColorChanged: changeColor,
enableLabel: true,
),
),
);
},
);
},
child: const Text('Change Button Color'),
color: currentColor,
textColor: useWhiteForeground(currentColor)
? const Color(0xffffffff)
: const Color(0xff000000),
),
),
Center(
child: RaisedButton(
elevation: 3.0,
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Select Color'),
content: SingleChildScrollView(
child: BlockPicker(
pickerColor: currentColor,
onColorChanged: changeColor,
),
),
);
},
);
},
child: const Text('Change me'),
color: currentColor,
textColor: useWhiteForeground(currentColor)
? const Color(0xffffffff)
: const Color(0xff000000),
),
),
],
),
),
),
);
}
}