rxlabz / cyclop Goto Github PK
View Code? Open in Web Editor NEWA Flutter color palette with eyedropper, HSL, RGB and Material colors
Home Page: https://rxlabz.github.io/cyclop
License: MIT License
A Flutter color palette with eyedropper, HSL, RGB and Material colors
Home Page: https://rxlabz.github.io/cyclop
License: MIT License
In my drawing app, the user can tap on a field to change its color. This invokes an AlertDialog:
showDialog(
context: context,
builder: (context) {
return SingleChildScrollView(
child: AlertDialog(
title: const Text('Pick a color!'),
content: ColorPicker(
color: oldColor,
onChanged: (value){
chosenColor = value;
},
actions: <Widget>[
Row(
children: [
TextButton(
child: const Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
),
TextButton(
child: const Text('Save'),
onPressed: () {
artFields[fieldNo].fieldColor = chosenColor;
setState(() {});
Navigator.of(context).pop();
},
),
],
),
],
),
);
});
I cannot use ColorButton for this. I tried to use your version of ColorPicker but the results are strange (e.g. only some sliders react to taps and the rectangle at the bottom does not change color). I suppose using your ColorPicker directly this way is not supported? Should I give up on cyclop?
Hi @rxlabz , do you have any plans to migrate this package to null safety? Looking to migrate my app and this is a blocker atm.
I ran the example code, however, the Color picker/dropper is not working. I am on the current latest Flutter version 3.10.0
Hii there I have cloned your repo but eyedropper is not working it's not moving anywhere.
My Flutter Version is
Flutter 1.22.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 84f3d28555 (4 weeks ago) • 2020-10-15 16:26:19 -0700
Engine • revision b8752bbfff
Tools • Dart 2.10.2
I am getting this kind of error when I click on the eyedropper button
I/flutter ( 1694): repaintBoundaryToImage... 'package:flutter/src/rendering/proxy_box.dart': Failed assertion: line 2958 pos 12: '!debugNeedsPaint': is not true.
I/flutter ( 1694): repaintBoundaryToImage... 'package:flutter/src/rendering/proxy_box.dart': Failed assertion: line 2958 pos 12: '!debugNeedsPaint': is not true.
and eye picker from the dialog is not Moving and I can not even touch it.
I have also tried putting the Builder on the scaffold but it's not working.
Here is My Modified Code from your Code.
import 'package:cyclop/cyclop.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() async {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
home: EyeDrop(child: MainScreen()),
debugShowCheckedModeBanner: false,
);
}
class MainScreen extends StatefulWidget {
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
Color appbarColor = Colors.blueGrey;
Color backgroundColor = Colors.grey.shade200;
Set<Color> swatches = Colors.primaries.map((e) => Color(e.value)).toSet();
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
final bodyTextColor =
ThemeData.estimateBrightnessForColor(backgroundColor) == Brightness.dark
? Colors.white70
: Colors.black87;
final appbarTextColor =
ThemeData.estimateBrightnessForColor(appbarColor) == Brightness.dark
? Colors.white70
: Colors.black87;
return Builder(
builder: (context) => Scaffold(
backgroundColor: backgroundColor,
appBar: AppBar(
title: Text('Cyclop Demo',
style:
textTheme.headline6.copyWith(color: appbarTextColor)),
backgroundColor: appbarColor,
actions: [
Padding(
padding: const EdgeInsets.only(right: 12),
child: Center(
child: ColorButton(
darkMode: true,
key: Key('c2'),
color: appbarColor,
boxShape: BoxShape.rectangle,
swatches: swatches,
size: 32,
config: ColorPickerConfig(
enableOpacity: true,
enableLibrary: false,
enableEyePicker: true),
onColorChanged: (value) => setState(
() => appbarColor = value,
),
onSwatchesChanged: (newSwatches) =>
setState(() => swatches = newSwatches),
),
),
)
],
),
body: Container(
padding: const EdgeInsets.all(12),
child: Center(
child: Column(
children: [
Text(
'Select the background & appbar colors',
style:
textTheme.headline6.copyWith(color: bodyTextColor),
),
_buildButtons(),
if (!kIsWeb) Center(child: Image.asset('images/img.png')),
],
),
),
),
));
}
Expanded _buildButtons() {
return Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Center(
child: ColorButton(
key: Key('c1'),
color: backgroundColor,
swatches: swatches,
onColorChanged: (value) => setState(
() => backgroundColor = value,
),
onSwatchesChanged: (newSwatches) =>
setState(() => swatches = newSwatches),
),
),
Center(
child: ColorButton(
key: Key('c1'),
size: 32,
color: backgroundColor,
swatches: swatches,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: backgroundColor,
border: Border.all(width: 4, color: Colors.black),
),
onColorChanged: (value) => setState(
() => backgroundColor = value,
),
onSwatchesChanged: (newSwatches) =>
setState(() => swatches = newSwatches),
),
),
if (!kIsWeb)
EyedropperButton(
icon: Icons.colorize,
onColor: (value) => setState(() => backgroundColor = value),
),
],
),
);
}
}
In any case, Thanks for your help ...
Here's the message a I get when installing the plugin :)
/c:/Flutter/.pub-cache/hosted/pub.dartlang.org/cyclop-0.6.1/lib/src/widgets/color_button.dart:111:29: Error: Method 'insert' cannot be called on 'OverlayState?' because it is potentially null.
I hope it helps
waiting for flutter/flutter#42767
When the device rotates into landscape mode, the picker dialog gets too high and draws a bit off screen towards the top.
Also, because the entire height can't be displayed, scrolling kicks in. However, the color grid area absorbs all scrolling motions, so the user can't scroll up or down to the close button or the hex color entry button. Possible solution would be: when a user, for example, is scrolling up on the color grid selector, when they reach the top row, then it starts scrolling the entire frame up to the title & close button, and the same for the bottom. I've also noticed that the scroll position doesn't always default to the top in this case, which is a bit confusing.
Thanks, and let me know if you need more detail or a video of this happening.
Hello. I would like to use this flutter widget inside my own project but I don't know what license this project is filed under. Please update the license for this project on Github: https://github.com/rxlabz/cyclop/blob/master/LICENSE
Thank you.
What I did:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.