feat: widget for customizing SVG colors (#1498)
* feat: widget for customizing SVG colors * feat: replace morph icons with customized morph SVGspull/1593/head
ggurdin
10 months ago
committed by
GitHub
parent
fd3f851995
commit
3d85d2ec9f
@ -0,0 +1,184 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:fluffychat/pangea/common/utils/error_handler.dart';
|
||||
|
||||
String? getMorphSvgLink({
|
||||
required String morphFeature,
|
||||
String? morphTag,
|
||||
required BuildContext context,
|
||||
}) {
|
||||
const baseURL =
|
||||
"https://pangea-chat-client-assets.s3.us-east-1.amazonaws.com";
|
||||
|
||||
if (morphTag == null) {
|
||||
final key = morphFeature.toLowerCase();
|
||||
String? filename;
|
||||
switch (key) {
|
||||
case "advtype":
|
||||
filename = "AdverbType.svg";
|
||||
case "aspect":
|
||||
filename = "Aspect.svg";
|
||||
case "conjtype":
|
||||
filename = "ConjunctionType.svg";
|
||||
case "definite":
|
||||
filename = "Definite.svg";
|
||||
case "degree":
|
||||
filename = "Degree.svg";
|
||||
case "mood":
|
||||
filename = "Mood.svg";
|
||||
case "number":
|
||||
filename = "Number.svg";
|
||||
case "pos":
|
||||
filename = "PartOfSpeech.svg";
|
||||
case "person":
|
||||
filename = "Person.svg";
|
||||
case "polarity":
|
||||
filename = "Polarity.svg";
|
||||
case "prontype":
|
||||
filename = "PronounType.svg";
|
||||
case "verbform":
|
||||
"VerbForm.svg";
|
||||
case "voice":
|
||||
filename = "Voice.svg";
|
||||
}
|
||||
|
||||
if (filename == null) {
|
||||
ErrorHandler.logError(
|
||||
e: "Missing morphFeature in getMorphSvgLink",
|
||||
data: {"morphFeature": morphFeature},
|
||||
);
|
||||
debugPrint("Missing morphFeature in getMorphSvgLink: $morphFeature");
|
||||
return null;
|
||||
}
|
||||
|
||||
return "$baseURL/$filename";
|
||||
}
|
||||
|
||||
final key = "${morphFeature.toLowerCase()}${morphTag.toLowerCase()}";
|
||||
String? filename;
|
||||
switch (key) {
|
||||
case "advtypeadverbial":
|
||||
filename = "AdverbType_Adverbial.svg";
|
||||
case "advtypetim":
|
||||
filename = "AdverbType_TemporalAdverb.svg";
|
||||
case "aspecthab":
|
||||
filename = "Aspect_Habitual.svg";
|
||||
case "aspectimp":
|
||||
filename = "Aspect_Imperfective.svg";
|
||||
case "aspectperf":
|
||||
filename = "Aspect_Perfective.svg";
|
||||
case "aspectprog":
|
||||
filename = "Aspect_Progressive.svg";
|
||||
case "conjtypecoord":
|
||||
filename = "ConjunctionType_Coordinating.svg";
|
||||
case "conjtypesub":
|
||||
filename = "ConjunctionType_Subordinating.svg";
|
||||
case "definitedef":
|
||||
filename = "Definite_Definite.svg";
|
||||
case "definiteind":
|
||||
filename = "Definite_Indefinite.svg";
|
||||
case "degreecmp":
|
||||
filename = "Degree_Comparative.svg";
|
||||
case "degreepos":
|
||||
filename = "Degree_Positive.svg";
|
||||
case "degreesup":
|
||||
filename = "Degree_Superlative.svg";
|
||||
case "moodcnd":
|
||||
filename = "Mood_Conditional.svg";
|
||||
case "moodimp":
|
||||
filename = "Mood_Imperative.svg";
|
||||
case "moodind":
|
||||
filename = "Mood_Indicative.svg";
|
||||
case "moodopt":
|
||||
filename = "Mood_Optative.svg";
|
||||
case "moodsub":
|
||||
filename = "Mood_Subjunctive.svg";
|
||||
case "numberplur":
|
||||
filename = "Number_Plural.svg";
|
||||
case "numbersing":
|
||||
filename = "Number_Singular.svg";
|
||||
case "posadv":
|
||||
filename = "PartOfSpeech_Adverb.svg";
|
||||
case "posadj":
|
||||
filename = "PartOfSpeech_Adjective.svg";
|
||||
case "posadp":
|
||||
filename = "PartOfSpeech_Adposition.svg";
|
||||
case "posaux":
|
||||
filename = "PartOfSpeech_Auxiliary.svg";
|
||||
case "posconj":
|
||||
filename = "PartOfSpeech_Conjunction.svg";
|
||||
case "posdet":
|
||||
filename = "PartOfSpeech_Determiner.svg";
|
||||
case "posnoun":
|
||||
filename = "PartOfSpeech_Noun.svg";
|
||||
case "posnum":
|
||||
filename = "PartOfSpeech_Numeral.svg";
|
||||
case "pospron":
|
||||
filename = "PartOfSpeech_Pronoun.svg";
|
||||
case "pospunct":
|
||||
filename = "PartOfSpeech_Punctuation.svg";
|
||||
case "possconj":
|
||||
filename = "PartOfSpeech_Subconjunction.svg";
|
||||
case "posverb":
|
||||
filename = "PartOfSpeech_Verb.svg";
|
||||
case "person1":
|
||||
filename = "Person_FirstPerson.svg";
|
||||
case "person2":
|
||||
filename = "Person_SecondPerson.svg";
|
||||
case "person3":
|
||||
filename = "Person_ThirdPerson.svg";
|
||||
case "polarityneg":
|
||||
filename = "Polarity_Negative.svg";
|
||||
case "polaritypos":
|
||||
filename = "Polarity_Positive.svg";
|
||||
case "prontypedem":
|
||||
filename = "PronounType_Demonstrative.svg";
|
||||
case "prontypeind":
|
||||
filename = "PronounType_Indefinite.svg";
|
||||
case "prontypeint":
|
||||
filename = "PronounType_Interrogative.svg";
|
||||
case "prontypeneg":
|
||||
filename = "PronounType_Negative.svg";
|
||||
case "prontypeprs":
|
||||
filename = "PronounType_Personal.svg";
|
||||
case "prontyperel":
|
||||
filename = "PronounType_Relative.svg";
|
||||
case "prontypetot":
|
||||
filename = "PronounType_Total.svg";
|
||||
case "tensefut":
|
||||
filename = "Tense_future.svg";
|
||||
case "tenseimp":
|
||||
filename = "Tense_imperfect.svg";
|
||||
case "tensepast":
|
||||
filename = "Tense_past.svg";
|
||||
case "tensepres":
|
||||
filename = "Tense_present.svg";
|
||||
case "verbformfin":
|
||||
filename = "VerbForm_Finite.svg";
|
||||
case "verbformger":
|
||||
filename = "VerbForm_Gerund.svg";
|
||||
case "verbforminf":
|
||||
filename = "VerbForm_Infinitive.svg";
|
||||
case "verbformpart":
|
||||
filename = "VerbForm_Participle.svg";
|
||||
case "voiceact":
|
||||
filename = "Voice_Active.svg";
|
||||
case "voicemid":
|
||||
filename = "Voice_Middle.svg";
|
||||
case "voicepass":
|
||||
filename = "Voice_Passive.svg";
|
||||
}
|
||||
|
||||
if (filename == null) {
|
||||
ErrorHandler.logError(
|
||||
e: "Missing morphFeature and morphTag in getMorphSvgLink",
|
||||
data: {"morphFeature": morphFeature, "morphTag": morphTag},
|
||||
);
|
||||
debugPrint(
|
||||
"Missing morphFeature and morphTag in getMorphSvgLink: $morphFeature, $morphTag",
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
return "$baseURL/$filename";
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:get_storage/get_storage.dart';
|
||||
import 'package:http/http.dart' as http;
|
||||
|
||||
class CustomizedSvg extends StatelessWidget {
|
||||
final String svgUrl;
|
||||
final String cacheKey;
|
||||
final Map<String, String> colorReplacements;
|
||||
final IconData? errorIcon;
|
||||
|
||||
const CustomizedSvg({
|
||||
super.key,
|
||||
required this.svgUrl,
|
||||
required this.cacheKey,
|
||||
required this.colorReplacements,
|
||||
this.errorIcon = Icons.error_outline,
|
||||
});
|
||||
|
||||
static final GetStorage _svgStorage = GetStorage('svg_cache');
|
||||
|
||||
Future<String> _fetchSvg() async {
|
||||
final cachedSvg = _svgStorage.read(cacheKey);
|
||||
if (cachedSvg != null) {
|
||||
return cachedSvg;
|
||||
}
|
||||
|
||||
final response = await http.get(Uri.parse(svgUrl));
|
||||
if (response.statusCode != 200) {
|
||||
throw Exception('Failed to load SVG: ${response.statusCode}');
|
||||
}
|
||||
|
||||
final String svgContent = response.body;
|
||||
await _svgStorage.write(cacheKey, svgContent);
|
||||
|
||||
return svgContent;
|
||||
}
|
||||
|
||||
Future<String> _getModifiedSvg() async {
|
||||
final svgContent = await _fetchSvg();
|
||||
String modifiedSvg = svgContent;
|
||||
modifiedSvg = modifiedSvg.replaceAll("fill=\"none\"", '');
|
||||
for (final entry in colorReplacements.entries) {
|
||||
modifiedSvg = modifiedSvg.replaceAll(entry.key, entry.value);
|
||||
}
|
||||
return modifiedSvg;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return FutureBuilder<String>(
|
||||
future: _getModifiedSvg(),
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.connectionState == ConnectionState.waiting) {
|
||||
return const CircularProgressIndicator();
|
||||
} else if (snapshot.hasError) {
|
||||
return Icon(errorIcon);
|
||||
} else if (snapshot.hasData) {
|
||||
return SvgPicture.string(snapshot.data!);
|
||||
} else {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue