Skip to content

Commit 8474f2d

Browse files
victoreronmoselevictoreronmosele
authored
Release v1.0.0
Implement WebColorPicker and WebColorPicker.builder widgets.
2 parents 1d89ce9 + 215c1a8 commit 8474f2d

35 files changed

+1850
-0
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
title: ''
5+
labels: ''
6+
assignees: ''
7+
8+
---
9+
10+
**Describe the bug**
11+
A clear and concise description of what the bug is.
12+
13+
**To Reproduce**
14+
Steps to reproduce the behavior:
15+
1. Go to '...'
16+
2. Click on '....'
17+
3. Scroll down to '....'
18+
4. See error
19+
20+
**Expected behavior**
21+
A clear and concise description of what you expected to happen.
22+
23+
**Screenshots**
24+
If applicable, add screenshots to help explain your problem.
25+
26+
**Desktop (please complete the following information):**
27+
- OS: [e.g. iOS]
28+
- Browser [e.g. chrome, safari]
29+
- Version [e.g. 22]
30+
31+
**Smartphone (please complete the following information):**
32+
- Device: [e.g. iPhone6]
33+
- OS: [e.g. iOS8.1]
34+
- Browser [e.g. stock browser, safari]
35+
- Version [e.g. 22]
36+
37+
**Additional context**
38+
Add any other context about the problem here.

‎.github/ISSUE_TEMPLATE/feature_request.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: Feature request
3+
about: Suggest an idea for this project
4+
title: ''
5+
labels: ''
6+
assignees: ''
7+
8+
---
9+
10+
**Is your feature request related to a problem? Please describe.**
11+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12+
13+
**Describe the solution you'd like**
14+
A clear and concise description of what you want to happen.
15+
16+
**Describe alternatives you've considered**
17+
A clear and concise description of any alternative solutions or features you've considered.
18+
19+
**Additional context**
20+
Add any other context or screenshots about the feature request here.

‎.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Miscellaneous
2+
*.class
3+
*.log
4+
*.pyc
5+
*.swp
6+
.DS_Store
7+
.atom/
8+
.buildlog/
9+
.history
10+
.svn/
11+
migrate_working_dir/
12+
13+
# IntelliJ related
14+
*.iml
15+
*.ipr
16+
*.iws
17+
.idea/
18+
19+
# The .vscode folder contains launch configuration and tasks you configure in
20+
# VS Code which you may wish to be included in version control, so this line
21+
# is commented out by default.
22+
#.vscode/
23+
24+
# Flutter/Dart/Pub related
25+
# Libraries should not include pubspec.lock, per https://dart.dev/guides/libraries/private-files#pubspeclock.
26+
/pubspec.lock
27+
**/doc/api/
28+
.dart_tool/
29+
.packages
30+
build/
31+
.fvm/flutter_sdk
32+
.fvm/fvm_config.json
33+
.vscode/settings.json
34+
.vscode/launch.json
35+
.flutter-plugins
36+
.flutter-plugins-dependencies

‎.metadata

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# This file tracks properties of this Flutter project.
2+
# Used by Flutter tool to assess capabilities and perform upgrades etc.
3+
#
4+
# This file should be version controlled and should not be manually edited.
5+
6+
version:
7+
revision: "e1e47221e86272429674bec4f1bd36acc4fc7b77"
8+
channel: "stable"
9+
10+
project_type: package

‎.run_test.sh

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
#!/usr/bin/env bash
2+
3+
# All tests except for non web tests run on chrome
4+
#
5+
# Non web tests are tagged with "non_web"
6+
7+
# Running VM tests
8+
echo -e "\n🚀 Starting VM tests (non_web)...\n"
9+
flutter test --tags non_web
10+
if [ $? -eq 0 ]; then
11+
echo -e "\n✅ VM tests completed successfully!\n"
12+
else
13+
echo -e "\n❌ VM tests failed.\n"
14+
fi
15+
16+
# Running Chrome tests
17+
echo -e "🚀 Starting tests on Chrome (web)...\n"
18+
flutter test --platform chrome
19+
if [ $? -eq 0 ]; then
20+
echo -e "\n✅ Chrome tests completed successfully!\n"
21+
else
22+
echo -e "\n❌ Chrome tests failed.\n"
23+
fi
24+
25+
# Running Integration tests
26+
echo -e "\n🚀 Starting integration tests (web)...\n"
27+
flutter run integration_test/web_color_picker_test.dart -d chrome --web-renderer html
28+
if [ $? -eq 0 ]; then
29+
echo -e "\n✅ Integration tests completed successfully!\n"
30+
else
31+
echo -e "\n❌ Integration tests failed.\n"
32+
fi

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
## 1.0.0
2+
3+
* Implement WebColorPicker and WebColorPicker.builder widgets.
4+

‎README.md

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
2+
A Flutter widget that displays the native web color picker for browsers for use in Flutter Web apps.
3+
4+
> [!NOTE]
5+
> This package supports only Flutter web.
6+
7+
8+
## Features
9+
10+
- **Default Browser Color Picker**: Uses the built-in color picker of web browsers.
11+
- **Callbacks for Color Change Events**: Notifies you when a color is selected or confirmed.
12+
- **Customizable Selector Appearance**: Allows you to display a custom widget as the color picker selector.
13+
14+
## Usage
15+
16+
To use the `web_color_picker` package in your Flutter Web application, follow these steps:
17+
18+
### 1. Import the Package
19+
20+
First, make sure to add `web_color_picker` to your `pubspec.yaml` dependencies. Then, import it in your Dart code:
21+
22+
```dart
23+
import 'package:web_color_picker/web_color_picker.dart';
24+
```
25+
26+
### 2. Using The `WebColorPicker` Widget
27+
28+
#### To Display A Custom Color Picker Selector
29+
30+
Use the `WebColorPicker.builder` constructor to display a custom color picker selector provided by the `builder` parameter.
31+
32+
Tapping on the custom color picker will open the browser's color picker.
33+
34+
35+
An example showing how to use an `ElevatedButton` as the custom color picker selector:
36+
37+
<img src="screenshots/web_color_picker_dot_builder.gif" alt="A gif showing how to use an `ElevatedButton` as the custom color picker selector" width="50%">
38+
39+
```dart
40+
WebColorPicker.builder(
41+
initialColor: textColor,
42+
builder: (context, selectedColor) {
43+
return ElevatedButton(
44+
onPressed: () {
45+
print('ElevatedButton pressed');
46+
},
47+
style: ElevatedButton.styleFrom(
48+
padding: const EdgeInsets.symmetric(
49+
horizontal: 8,
50+
vertical: 12,
51+
),
52+
),
53+
child: Row(
54+
mainAxisSize: MainAxisSize.min,
55+
children: [
56+
Container(
57+
width: 20,
58+
height: 20,
59+
decoration: BoxDecoration(
60+
borderRadius: BorderRadius.circular(8),
61+
color: selectedColor,
62+
),
63+
),
64+
const SizedBox(
65+
width: 8,
66+
),
67+
Text(
68+
'Select color',
69+
),
70+
],
71+
),
72+
);
73+
},
74+
)
75+
```
76+
77+
#### To Display The Default Color Picker Selector
78+
79+
Use the `WebColorPicker` constructor to display the browser's default color picker selector.
80+
81+
An example showing how to use the default color picker selector:
82+
83+
<img src="screenshots/web_color_picker.gif" alt="A gif showing how to use the default color picker selector" width="50%">
84+
85+
```dart
86+
WebColorPicker(
87+
initialColor: Colors.red,
88+
width: 60.0,
89+
height: 30.0,
90+
)
91+
```
92+
93+
94+
### 3. Handle Color Change Events
95+
96+
There are two main callbacks you can handle:
97+
98+
- **onInput**: Triggered whenever a color is selected in the picker.
99+
- **onChange**: Triggered whenever the picker is dismissed and a color is confirmed.
100+
101+
Each of these callbacks provides the selected `Color` and the corresponding HTML event:
102+
103+
An example demonstrating the color picker events using the default color picker selector and
104+
a custom color picker selector:
105+
106+
<img src="screenshots/web_color_picker_events_hq.gif" alt="A gif demonstrating the color picker events using the default color picker selector and a custom color picker selector" width="50%">
107+
108+
```dart
109+
WebColorPicker(
110+
initialColor: textColor,
111+
onInput: (color, event) {
112+
setState(() {
113+
previewTextColor = color;
114+
});
115+
},
116+
onChange: (color, event) {
117+
setState(() {
118+
textColor = color;
119+
});
120+
},
121+
// ... other properties
122+
),
123+
```
124+
125+
See the [example](example) directory for a complete example.
126+
127+
## Resources
128+
129+
For more understanding on how the HTML color input (which this package uses) works, check out the following:
130+
131+
- [MDN Documentation: `<input type="color">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color): An in-depth overview of the HTML color input element.
132+
133+
- [Using Color Inputs on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#using_color_inputs): A guide that explains the user interactions and behavior of the color input.
134+
135+
- [Color Inputs: A Deep Dive into Cross-Browser Differences | CSS-Tricks](https://css-tricks.com/color-inputs-a-deep-dive-into-cross-browser-differences/): An article that delves into the cross-browser differences of color inputs.
136+
137+
### Apps Using This Library
138+
139+
- [Flutter Gradient Generator](https://fluttergradientgenerator.com) - An online tool for creating and customizing gradients for use in Flutter applications.
140+
141+
Check it out on [GitHub](https://github.com/victoreronmosele/flutter_gradient_generator).

‎analysis_options.yaml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
include: package:flutter_lints/flutter.yaml
2+
3+
# Additional information about this file can be found at
4+
# https://dart.dev/guides/language/analysis-options

‎dart_test.yaml

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
tags:
2+
non_web: { test_on: "!browser" }

‎example/.gitignore

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Miscellaneous
2+
*.class
3+
*.log
4+
*.pyc
5+
*.swp
6+
.DS_Store
7+
.atom/
8+
.buildlog/
9+
.history
10+
.svn/
11+
migrate_working_dir/
12+
13+
# IntelliJ related
14+
*.iml
15+
*.ipr
16+
*.iws
17+
.idea/
18+
19+
# The .vscode folder contains launch configuration and tasks you configure in
20+
# VS Code which you may wish to be included in version control, so this line
21+
# is commented out by default.
22+
#.vscode/
23+
24+
# Flutter/Dart/Pub related
25+
**/doc/api/
26+
**/ios/Flutter/.last_build_id
27+
.dart_tool/
28+
.flutter-plugins
29+
.flutter-plugins-dependencies
30+
.packages
31+
.pub-cache/
32+
.pub/
33+
/build/
34+
35+
# Symbolication related
36+
app.*.symbols
37+
38+
# Obfuscation related
39+
app.*.map.json
40+
41+
# Android Studio will place build artifacts here
42+
/android/app/debug
43+
/android/app/profile
44+
/android/app/release

‎example/.metadata

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# This file tracks properties of this Flutter project.
2+
# Used by Flutter tool to assess capabilities and perform upgrades etc.
3+
#
4+
# This file should be version controlled and should not be manually edited.
5+
6+
version:
7+
revision: "ead455963c12b453cdb2358cad34969c76daf180"
8+
channel: "stable"
9+
10+
project_type: app
11+
12+
# Tracks metadata for the flutter migrate command
13+
migration:
14+
platforms:
15+
- platform: root
16+
create_revision: ead455963c12b453cdb2358cad34969c76daf180
17+
base_revision: ead455963c12b453cdb2358cad34969c76daf180
18+
- platform: android
19+
create_revision: ead455963c12b453cdb2358cad34969c76daf180
20+
base_revision: ead455963c12b453cdb2358cad34969c76daf180
21+
22+
# User provided section
23+
24+
# List of Local paths (relative to this file) that should be
25+
# ignored by the migrate tool.
26+
#
27+
# Files that are not part of the templates will be ignored by default.
28+
unmanaged_files:
29+
- 'lib/main.dart'
30+
- 'ios/Runner.xcodeproj/project.pbxproj'

‎example/README.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# example
2+
3+
A new Flutter project.
4+
5+
## Getting Started
6+
7+
This project is a starting point for a Flutter application.
8+
9+
A few resources to get you started if this is your first Flutter project:
10+
11+
- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
12+
- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
13+
14+
For help getting started with Flutter development, view the
15+
[online documentation](https://docs.flutter.dev/), which offers tutorials,
16+
samples, guidance on mobile development, and a full API reference.

0 commit comments

Comments
 (0)