Skip to content

Commit 837e71c

Browse files
committedFeb 27, 2024
Fix image display issue in README
1 parent 0af875a commit 837e71c

File tree

2 files changed

+9
-11
lines changed

2 files changed

+9
-11
lines changed
 

‎README.md

+9-11
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,17 @@ import 'package:web_color_picker/web_color_picker.dart';
2525

2626
### 2. Using The `WebColorPicker` Widget
2727

28-
#### To Display A Custom Color Picker Selector
28+
**To Display A Custom Color Picker Selector:**
2929

3030
Use the `WebColorPicker.builder` constructor to display a custom color picker selector provided by the `builder` parameter.
3131

3232
Tapping on the custom color picker will open the browser's color picker.
3333

3434

35-
An example showing how to use an `ElevatedButton` as the custom color picker selector:
35+
Here's an example showing how to use an `ElevatedButton` as the custom color picker selector:
36+
37+
<img src="https://github.com/victoreronmosele/flutter_web_color_picker/blob/main/screenshots/web_color_picker_dot_builder.gif?raw=true" alt="A gif showing how to use an `ElevatedButton` as the custom color picker selector">
3638

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%">
3839

3940
```dart
4041
WebColorPicker.builder(
@@ -74,13 +75,13 @@ WebColorPicker.builder(
7475
)
7576
```
7677

77-
#### To Display The Default Color Picker Selector
78+
**To Display The Default Color Picker Selector:**
7879

7980
Use the `WebColorPicker` constructor to display the browser's default color picker selector.
8081

81-
An example showing how to use the default color picker selector:
82+
Here's an example showing how to use the default color picker selector:
8283

83-
<img src="screenshots/web_color_picker.gif" alt="A gif showing how to use the default color picker selector" width="50%">
84+
<img src="https://github.com/victoreronmosele/flutter_web_color_picker/blob/main/screenshots/web_color_picker.gif?raw=true" alt="A gif showing how to use the default color picker selector">
8485

8586
```dart
8687
WebColorPicker(
@@ -89,8 +90,6 @@ WebColorPicker(
8990
height: 30.0,
9091
)
9192
```
92-
93-
9493
### 3. Handle Color Change Events
9594

9695
There are two main callbacks you can handle:
@@ -103,7 +102,7 @@ Each of these callbacks provides the selected `Color` and the corresponding HTML
103102
An example demonstrating the color picker events using the default color picker selector and
104103
a custom color picker selector:
105104

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%">
105+
<img src="https://github.com/victoreronmosele/flutter_web_color_picker/blob/main/screenshots/web_color_picker_events_hq.gif?raw=true" alt="A gif demonstrating the color picker events using the default color picker selector and a custom color picker selector">
107106

108107
```dart
109108
WebColorPicker(
@@ -137,5 +136,4 @@ For more understanding on how the HTML color input (which this package uses) wor
137136
### Apps Using This Library
138137

139138
- [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).
139+
Check it out on [GitHub](https://github.com/victoreronmosele/flutter_gradient_generator).

‎screenshots/web_color_picker_hq.gif

9.6 MB
Loading

0 commit comments

Comments
 (0)