Skip to content

Commit

Permalink
Updated Code
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zujaj
Zujaj committed Mar 29, 2021
1 parent 1e16e68 commit bfb13d1
Show file tree
Hide file tree
Showing 5 changed files with 219 additions and 14 deletions.
101 changes: 87 additions & 14 deletions lib/main.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import 'package:flutter/material.dart';
import 'package:image_color_switcher/widgets/blending_slider.dart';
import 'package:image_color_switcher/widgets/bike_painter.dart';
import 'package:image_color_switcher/widgets/color_slider.dart';
import 'package:image_color_switcher/widgets/image_color_switcher.dart';
import 'package:image_color_switcher/widgets/svg_color_slider.dart';

void main() {
runApp(MyApp());
Expand All @@ -15,25 +18,95 @@ class MyApp extends StatefulWidget {
}

class _MyAppState extends State<MyApp> {
// Holds the BlendMode returned from [BlendingSlider]
BlendMode blendMode;

// Holds the encoded color string value returned from [SVGColorSlider]
String svgColorCode = '';

// Holds the Color value returned from [ColorSlider]
Color colorCode;

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Color Switcher',
home: Scaffold(
body: SafeArea(
child: Column(children: [
Expanded(
child: ImageColorSwitcher(
imagePath: 'assets/bike.png',
color: colorCode ?? Colors.red,
)),
Expanded(
child: ColorSlider(
onColorSelected: (color) => setState(() => colorCode = color),
)),
]))));
title: 'Image Color Switcher',
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(
text: 'Blending Slider',
),
Tab(
text: 'Raster',
),
Tab(
text: 'Vector',
),
],
),
title: Text('Image Color Switcher Demo'),
),
body: TabBarView(
children: [
// BLENDING SLIDER
Column(children: [
Expanded(
child: ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.red, blendMode ?? BlendMode.clear),
child: Image.asset('assets/bike.png'),
),
),
Expanded(
child: BlendingSlider(
onBlendModeSelected: (value) =>
setState(() => blendMode = value),
),
)
]),
// RASTER TAB
Column(children: [
Expanded(
child: ImageColorSwitcher(
imagePath: 'assets/bike.png',
color: colorCode ?? Colors.red,
)),
Expanded(
child: ColorSlider(
onColorSelected: (color) => setState(() => colorCode = color),
))
]),
// VECTOR TAB
Column(children: [
Expanded(
child: Transform.scale(
scale: 25,
alignment: Alignment.center,
child: Container(
width: 10,
height: 10,
child: BikePainter(
color: svgColorCode.isNotEmpty
? svgColorCode.split('.')[1].split(':')[0]
: '#bdd4de',
shade: svgColorCode.isNotEmpty
? svgColorCode.split('.')[1].split(':')[1]
: '#3f5765'),
))),
Expanded(
child: SVGColorSlider(
onColorSelected: (color) =>
setState(() => svgColorCode = color),
)),
])
],
),
),
),
);
}
}
16 changes: 16 additions & 0 deletions lib/widgets/bike_painter.dart
View file

Large diffs are not rendered by default.

91 changes: 91 additions & 0 deletions lib/widgets/svg_color_slider.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import 'package:flutter/material.dart';

class SVGColorSlider extends StatelessWidget {
/// Map holding the Theme.color:shade with its value
final _colorMap = {
'Red.indianred:darkred': Color.fromARGB(255, 255, 0, 0),
'Green.#22b14c:#004000': Colors.green,
'Blue.lightskyblue:darkblue': Color.fromARGB(255, 0, 0, 255),
'Navy.#0000CD:#000080': Color.fromARGB(255, 0, 0, 128),
'Magenta.#FF00FF:#8B008B': Color.fromARGB(255, 255, 0, 255),
'Indigo.#9370DB:#4B0082': Color.fromARGB(255, 75, 0, 130),
'Orange.#FFA500:#FF8C00': Color.fromARGB(255, 255, 165, 0),
'Turquoise.#40E0D0:#00CED1': Color.fromARGB(255, 64, 224, 208),
'Purple.#9370DB:#6A0DAD': Colors.purple,
'Bronze.#CD7F32:#524741': Color.fromARGB(255, 82, 71, 65),
'Yellow.#FFFF19:#E0E200': Color.fromARGB(255, 255, 255, 0),
'Burgundy.#9D2735:#800020': Color.fromARGB(255, 128, 0, 32),
'Brown.chocolate:brown': Color.fromARGB(255, 165, 42, 42),
'Beige.beige:#d9b382': Color.fromARGB(255, 245, 245, 220),
'Maroon.#800000:#450000': Color.fromARGB(255, 128, 0, 0),
'Gold.goldenrod:darkgoldenrod': Color.fromARGB(255, 255, 215, 0),
'Grey.grey:darkgrey': Color.fromARGB(255, 128, 128, 128),
'Black.black:#1B1B1B:': Color.fromARGB(255, 0, 0, 0),
'Silver.#8B8B8B:silver': Color.fromARGB(255, 192, 192, 192),
// Multiple Options: antiquewhite,floralwhite,ghostwite
'White.ghostwhite:black': Color.fromARGB(255, 255, 255, 255),
'Slate.#708090:#284646': Color.fromARGB(255, 47, 79, 79),
};

/// Triggers when tapped on a color
final Function(String) onColorSelected;

SVGColorSlider({@required this.onColorSelected});

@override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.horizontal,
children: [
..._colorMap.entries.map((MapEntry<String, Color> mapEntry) {
return InkWell(
borderRadius: BorderRadius.circular(50.0),
onTap: () => onColorSelected(mapEntry.key),
child: Container(
height: 80,
width: 80,
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: mapEntry.value,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: mapEntry.value,
offset: Offset(1.0, 2.0),
),
],
),
child: Center(
child:

/// Change The Font To Black For These Colors
mapEntry.key.contains('White') ||
mapEntry.key.contains('Beige') ||
mapEntry.key.contains('Yellow')
? Text(
mapEntry.key
.split(':')[0]
.split('.')[0]
.toUpperCase(),
style: TextStyle(
fontSize: 8.75,
fontWeight: FontWeight.bold,
))
:

/// Else Let The Font Be white
Text(
mapEntry.key
.split(':')[0]
.split('.')[0]
.toUpperCase(),
style: TextStyle(
fontSize: 8.75,
fontWeight: FontWeight.bold,
color: Colors.white)))),
);
})
],
);
}
}
22 changes: 22 additions & 0 deletions pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,13 @@ packages:
description: flutter
source: sdk
version: "0.0.0"
flutter_svg:
dependency: "direct main"
description:
name: flutter_svg
url: "https://pub.dartlang.org"
source: hosted
version: "0.19.3"
flutter_test:
dependency: "direct dev"
description: flutter
Expand Down Expand Up @@ -123,6 +130,20 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
path_drawing:
dependency: transitive
description:
name: path_drawing
url: "https://pub.dartlang.org"
source: hosted
version: "0.4.1+1"
path_parsing:
dependency: transitive
description:
name: path_parsing
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.4"
petitparser:
dependency: transitive
description:
Expand Down Expand Up @@ -200,3 +221,4 @@ packages:
version: "4.5.1"
sdks:
dart: ">=2.12.0-0.0 <3.0.0"
flutter: ">=1.24.0-10.1.pre"
3 changes: 3 additions & 0 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ dependencies:
# with various image file formats PNG, JPEG, GIF, BMP, WebP, TIFF, TGA, PSD, PVR, and OpenEXR
image: ^2.1.19

# Allows painting & displaying Scalable Vector Graphics 1.1 files
flutter_svg: ^0.19.3

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
Expand Down

0 comments on commit bfb13d1

Please sign in to comment.