Skip to content

Commit

Permalink
feat(ui): added custom diagonal painter (#192)
Browse files Browse the repository at this point in the history 
* feat(ui): added custom diagonal painter

* feat(ui): added a bunch of simplified elements to existing flags

* feat(model): added decorated flag interface

* feat(ui): added world flags build context extension

* refactor(ui): refactoring of the country flag class

* fix(ui): make flag theme data work in extensions

* refactor: small improvements

* refactor: small refactoring
  • Loading branch information
@tsinis
tsinis authored Jun 29, 2024
1 parent cd7c2b3 commit 96b1bbc
Show file tree
Hide file tree
Showing 17 changed files with 528 additions and 117 deletions.
102 changes: 47 additions & 55 deletions packages/world_flags/example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@ import "package:world_flags/world_flags.dart";
void main() => runApp(
MaterialApp(
home: const Main(),
theme: ThemeData.light(useMaterial3: true),
darkTheme: ThemeData.dark(useMaterial3: true),
theme: ThemeData(
extensions: const [
// FlagThemeData(decoration: BoxDecoration(shape: BoxShape.circle)),
],
),
),
);

Expand All @@ -17,72 +20,61 @@ class Main extends StatefulWidget {
}

class _MainState extends State<Main> {
int _index = 0;
double _opacity = 1 / 2;
int index = 0;
double opacity = 1 / 2;

void _incrementIndex() {
_index = _index >= smallSimplifiedFlagsMap.length ? 0 : _index + 1;
setState(() => _opacity = 1 / 2);
void incrementIndex() {
index = index >= smallSimplifiedFlagsMap.length ? 0 : index + 1;
setState(() => opacity = 1 / 2);
}

@optionalTypeArgs
MapEntry<WorldCountry, BasicFlag> _flagData<T extends BasicFlag>() =>
smallSimplifiedFlagsMap.entries
.where((f) => f.value is T)
.elementAt(_index);
WorldCountry get country => WorldCountry.list.elementAt(index);

String _labelBuilder() => switch (_opacity) {
String labelBuilder() => switch (opacity) {
1 => "Original flag",
0 => "Flag from the package",
_ => " ${(_opacity * 100).round()}% opacity ",
_ => " ${(opacity * 100).round()}% opacity ",
};

@override
Widget build(BuildContext context) {
final flag = _flagData<BasicFlag>();

return ColoredBox(
color: Theme.of(context).scaffoldBackgroundColor,
child: SafeArea(
minimum: const EdgeInsets.all(40),
child: Scaffold(
appBar: AppBar(
title: SelectableText(
"${flag.key.internationalName} (${flag.key.code}): ${_index + 1}",
textAlign: TextAlign.center,
Widget build(BuildContext context) => ColoredBox(
color: Theme.of(context).scaffoldBackgroundColor,
child: SafeArea(
minimum: const EdgeInsets.all(40),
child: Scaffold(
appBar: AppBar(
title: SelectableText(
"${country.internationalName} (${country.code}): ${index + 1}",
textAlign: TextAlign.center,
),
),
),
body: GestureDetector(
onTap: _incrementIndex,
child: Center(
child: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
/// + decoration: const BoxDecoration(shape: BoxShape.circle),
flag.value.copyWith(
aspectRatio: 3 / 2,
),
Opacity(
opacity: _opacity,
child: Image.network(flag.key.flagPngUrl(), scale: 0.1),
),
],
body: GestureDetector(
onTap: incrementIndex,
child: Center(
child: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
CountryFlag.simplified(country),
Opacity(
opacity: opacity,
child: Image.network(country.flagPngUrl(), scale: 0.1),
),
],
),
),
),
),
bottomNavigationBar: SizedBox(
height: 40,
child: Slider(
value: _opacity,
onChanged: (newOpacity) => setState(() => _opacity = newOpacity),
divisions: 10,
label: _labelBuilder(),
autofocus: true,
bottomNavigationBar: SizedBox(
height: 40,
child: Slider(
value: opacity,
onChanged: (newOpacity) => setState(() => opacity = newOpacity),
divisions: 10,
label: labelBuilder(),
autofocus: true,
),
),
),
),
),
);
}
);
}
44 changes: 38 additions & 6 deletions packages/world_flags/lib/src/data/flags_map_part_1.data.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -710,6 +710,29 @@ const flagGtmProperties = FlagProperties(
aspectRatio: 8 / 5,
stripeOrientation: StripeOrientation.vertical,
elementsProperties: [
ElementsProperties(
Color(0xff406325),
shape: Ellipse(),
heightFactor: 0.35,
child: ElementsProperties(
Color(0xffffffff),
shape: Ellipse(),
offset: Offset(0, -0.25),
heightFactor: 0.8,
child: ElementsProperties(
Color(0xff6c301e),
shape: Star(points: 4, radiusFactor: 0.1),
offset: Offset(0, 0.35),
heightFactor: 1.1,
child: ElementsProperties(
Color(0xfff9f0aa),
shape: Rectangle(aspectRatio: 0.6),
offset: Offset(0, -0.35),
heightFactor: 0.6,
),
),
),
),
CustomElementsProperties(
Color(0xff406325),
otherColors: [
Expand Down Expand Up @@ -841,11 +864,7 @@ const flagDnkProperties = FlagProperties(

/// Flag properties of country Solomon Islands (SB).
const flagSlbProperties = FlagProperties(
[
ColorsProperties(Color(0xff0000d6), ratio: 25),
ColorsProperties(Color(0xffffcc00)),
ColorsProperties(Color(0xff006000), ratio: 25),
],
[ColorsProperties(Color(0xff0000d6)), ColorsProperties(Color(0xff006000))],
aspectRatio: 2,
stripeOrientation: StripeOrientation.diagonalBottomLeftToTopRight,
elementsProperties: [
Expand Down Expand Up @@ -879,6 +898,11 @@ const flagSlbProperties = FlagProperties(
),
),
),
ElementsProperties(
Color(0xffffcc00),
shape: DiagonalLine(isTopRightToBottomLeft: false),
heightFactor: 0.1,
),
],
url:
"https://www.vexilla-mundi.com/solomon_islands/solomon_islands_sheet.png",
Expand Down Expand Up @@ -1141,7 +1165,12 @@ const flagKgzProperties = FlagProperties(
shape: Ellipse(),
offset: Offset(0, -0.05),
heightFactor: 0.88,
child: CustomElementsProperties(Color(0xffff0000)),
child: ElementsProperties(
Color(0xffff0000),
shape: Star(points: 4, radiusFactor: 0.1),
offset: Offset(0, -0.3),
heightFactor: 0.9,
),
),
),
),
Expand Down Expand Up @@ -1591,6 +1620,7 @@ const flagBlrProperties = FlagProperties(
ElementsProperties(
Color(0xffffffff),
shape: Rectangle(),
offset: Offset(-0.99, 0),
widthFactor: 2 / 18,
child: CustomElementsProperties(
Color(0xffD22730),
Expand All @@ -1610,6 +1640,8 @@ const flagTtoProperties = FlagProperties(
CustomElementsProperties(
Color(0xffffffff),
otherColors: [Color(0xff000000)],
heightFactor: 0.3,
widthFactor: 0.05,
),
],
url:
Expand Down
120 changes: 107 additions & 13 deletions packages/world_flags/lib/src/data/flags_map_part_2.data.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,33 @@ const flagMnpProperties = FlagProperties(
Color(0xffef8a10),
],
),
ElementsProperties(
Color(0xffffffff),
shape: Ellipse(),
offset: Offset(0, 0.03),
heightFactor: 0.75,
child: ElementsProperties(
Color(0xffef8a10),
shape: Ellipse(),
heightFactor: 0.85,
child: ElementsProperties(
Color(0xffffffff),
shape: Ellipse(),
heightFactor: 0.85,
child: ElementsProperties(
Color(0xff0033A1),
shape: Ellipse(),
heightFactor: 0.85,
),
),
),
),
ElementsProperties(
Color(0xff8c8a8c),
shape: Rectangle(aspectRatio: 0.36),
offset: Offset(-0.02, 0.5),
heightFactor: 0.55,
),
ElementsProperties(
Color(0xff000000),
shape: Star(),
Expand Down Expand Up @@ -771,10 +798,7 @@ const flagCypProperties = FlagProperties(

/// Flag properties of country Afghanistan (AF).
const flagAfgProperties = FlagProperties(
[
ColorsProperties(Color(0xffffffff)),
ColorsProperties(Color(0xff000000)),
],
[ColorsProperties(Color(0xffffffff))],
aspectRatio: 2,
elementsProperties: [
CustomElementsProperties(Color(0xff000000), heightFactor: 1 / 2),
Expand Down Expand Up @@ -808,10 +832,16 @@ const flagOmnProperties = FlagProperties(
shape: Rectangle(),
offset: Offset(-1, 0),
widthFactor: 20 / 60,
child: CustomElementsProperties(
child: ElementsProperties(
Color(0xffffffff),
offset: Offset(0, -0.97),
heightFactor: 9 / 30,
shape: Star(points: 4, radiusFactor: 0.1),
offset: Offset(0, -0.58),
heightFactor: 0.38,
child: ElementsProperties(
Color(0xffffffff),
shape: Star(points: 3, radiusFactor: 0.15),
offset: Offset(0, -0.3),
),
),
),
],
Expand Down Expand Up @@ -1256,10 +1286,12 @@ const flagZweProperties = FlagProperties(
shape: Star(),
offset: Offset(-0.225, -0.05),
heightFactor: 29 / 64,
child: CustomElementsProperties(
child: ElementsProperties(
Color(0xffffcc00),
otherColors: [Color(0xff000000)],
heightFactor: 0.8,
shape: Star(points: 4),
offset: Offset(0, 0.1),
heightFactor: 0.6,
angle: 30,
),
),
),
Expand Down Expand Up @@ -1973,10 +2005,72 @@ const flagMngProperties = FlagProperties(
aspectRatio: 2,
stripeOrientation: StripeOrientation.vertical,
elementsProperties: [
CustomElementsProperties(
ElementsProperties(
Color(0xffffd900),
offset: Offset(-0.667, 0.1),
heightFactor: 45 / 60,
shape: Rectangle(aspectRatio: 0.92),
offset: Offset(-0.82, 0.5),
heightFactor: 24 / 60,
child: ElementsProperties(
Color(0xffda2032),
shape: Rectangle(aspectRatio: 0.5),
child: ElementsProperties(
Color(0xffffd900),
shape: Ellipse(),
offset: Offset(0, -2.3),
heightFactor: 0.2,
child: ElementsProperties(
Color(0xffffd900),
shape: Ellipse(),
offset: Offset(0, 3.2),
heightFactor: 1.6,
child: ElementsProperties(
Color(0xffffd900),
shape: Moon(radius: 1.0, offset: Offset(0, -0.3)),
offset: Offset(0, 0.4),
heightFactor: 1.4,
child: ElementsProperties(
Color(0xffffd900),
shape: Triangle(),
offset: Offset(0.06, 1.75),
heightFactor: 0.45,
widthFactor: 0.9,
angle: 90,
child: ElementsProperties(
Color(0xffffd900),
shape: Triangle(),
offset: Offset(0, 15.1),
angle: 90,
),
),
),
),
),
),
),
ElementsProperties(
Color.fromARGB(0, 255, 217, 0),
shape: Rectangle(aspectRatio: 0.92),
offset: Offset(-0.82, 0.5),
heightFactor: 24 / 60,
child: ElementsProperties(
Color.fromARGB(0, 255, 217, 0),
shape: Rectangle(aspectRatio: 0.5),
child: ElementsProperties(
Color(0xffffd900),
shape: Rectangle(aspectRatio: 0.6),
heightFactor: 0.666,
child: ElementsProperties(
Color(0xffda2032),
shape: Rectangle(),
heightFactor: 0.75,
child: ElementsProperties(
Color(0xffffd900),
shape: Ellipse(),
heightFactor: 0.85,
),
),
),
),
),
],
url:
Expand Down
Loading

0 comments on commit 96b1bbc

Please sign in to comment.