Add background and title

luandro · Oct 18, 2023 · 38264bf · 38264bf
1 parent ee2fd34
commit 38264bf
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 6 deletions.
diff --git a/packages/app/lib/ui/screens/sighting.dart b/packages/app/lib/ui/screens/sighting.dart
@@ -213,11 +213,6 @@ class _SeaWavesPainer extends BoxPainter {
     path.lineTo((bounds.width / 4) * 4, 0.0);
     path.lineTo(bounds.width, bounds.height);
     path.lineTo(0, bounds.height);
-    path.lineTo((bounds.width / 4) * 1, bounds.height + 50.0);
-    path.lineTo((bounds.width / 4) * 2, bounds.height);
-    path.lineTo((bounds.width / 4) * 3, bounds.height + 50.0);
-    path.lineTo((bounds.width / 4) * 4, bounds.height);
-    path.lineTo(0, bounds.height);
     path.close();
 
     canvas.drawPath(path.shift(offset).shift(Offset(0, 50.0)), paint);

diff --git a/packages/app/lib/ui/screens/species.dart b/packages/app/lib/ui/screens/species.dart
@@ -26,6 +26,7 @@ class _SpeciesScreenState extends State<SpeciesScreen> {
   Widget build(BuildContext context) {
     return MeliScaffold(
         title: AppLocalizations.of(context)!.speciesScreenTitle,
+        appBarColor: MeliColors.peach,
         body: Container(
           child: SingleChildScrollView(
             child: Query(
@@ -94,8 +95,12 @@ class _SpeciesProfileState extends State<SpeciesProfile> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(20.0),
+      padding: const EdgeInsets.only(
+          top: 10.0, right: 20.0, bottom: 20.0, left: 20.0),
+      decoration: const SeaWavesBackground(),
       child: Wrap(runSpacing: 20.0, children: [
+        SpeciesProfileTitle(species.species.name),
+        SizedBox(height: 100.0),
         SpeciesField(
           species.species,
           allowNull: false,
@@ -108,3 +113,56 @@ class _SpeciesProfileState extends State<SpeciesProfile> {
     );
   }
 }
+
+class SpeciesProfileTitle extends StatelessWidget {
+  final String title;
+
+  SpeciesProfileTitle(this.title, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+        child: Column(children: [
+      Text(title,
+          textAlign: TextAlign.center,
+          overflow: TextOverflow.ellipsis,
+          maxLines: 2,
+          style: const TextStyle(
+              height: 1.1, fontFamily: 'Staatliches', fontSize: 24.0)),
+    ]));
+  }
+}
+
+class SeaWavesBackground extends Decoration {
+  const SeaWavesBackground();
+
+  @override
+  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
+    return _SeaWavesPainer();
+  }
+}
+
+class _SeaWavesPainer extends BoxPainter {
+  @override
+  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
+    final Size? bounds = configuration.size;
+
+    final paint = Paint()
+      ..color = MeliColors.peach
+      ..style = PaintingStyle.fill;
+
+    final path = Path();
+    path.moveTo(0, 0);
+    path.lineTo(bounds!.width / 2, 100.0);
+    path.lineTo(bounds.width, 0.0);
+    path.moveTo(0, 0);
+    path.lineTo(bounds.width / 6, 70.0);
+    path.lineTo(bounds.width, 0.0);
+    path.moveTo(0, 0);
+    path.lineTo(bounds.width - (bounds.width / 6), 70.0);
+    path.lineTo(bounds.width, 0.0);
+    path.close();
+
+    canvas.drawPath(path.shift(offset), paint);
+  }
+}