feat: initial screen (#9)

lib/app/view/app.dart

@@ -1,5 +1,5 @@
 import 'package:api_client/api_client.dart';
-import 'package:dash_ai_search/counter/counter.dart';
+import 'package:dash_ai_search/home/home.dart';
 import 'package:dash_ai_search/l10n/l10n.dart';
 import 'package:flutter/material.dart';
 
@@ -22,7 +22,7 @@ class App extends StatelessWidget {
       ),
       localizationsDelegates: AppLocalizations.localizationsDelegates,
       supportedLocales: AppLocalizations.supportedLocales,
-      home: const CounterPage(),
+      home: const HomePage(),
     );
   }
 }

lib/home/home.dart

@@ -0,0 +1,2 @@
+export 'view/home_page.dart';
+export 'widgets/widgets.dart';

lib/home/view/home_page.dart

@@ -0,0 +1,61 @@
+import 'package:app_ui/app_ui.dart';
+import 'package:dash_ai_search/home/home.dart';
+import 'package:flutter/material.dart';
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Scaffold(
+      backgroundColor: Color(0xFFF8FAFF),
+      body: Stack(
+        children: [
+          Positioned(
+            top: 0,
+            bottom: 0,
+            child: Background(),
+          ),
+          Positioned(
+            top: 40,
+            left: 48,
+            child: Logo(),
+          ),
+          WelcomeView(),
+          Positioned(
+            bottom: 50,
+            left: 50,
+            child: DashAnimation(),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class DashAnimation extends StatelessWidget {
+  @visibleForTesting
+  const DashAnimation({super.key});
+
+  static const dashSize = Size(800, 800);
+
+  @override
+  Widget build(BuildContext context) {
+    final screenSize = MediaQuery.sizeOf(context);
+
+    return Container(
+      alignment: Alignment.center,
+      height: screenSize.height / 3,
+      width: screenSize.height / 3,
+      child: const AnimatedSprite(
+        showLoadingIndicator: false,
+        sprites: Sprites(
+          asset: 'dash_animation.png',
+          size: dashSize,
+          frames: 34,
+          stepTime: 0.07,
+        ),
+      ),
+    );
+  }
+}

lib/home/widgets/background.dart

@@ -0,0 +1,141 @@
+import 'package:flutter/material.dart';
+import 'package:path_drawing/path_drawing.dart';
+
+class Background extends StatelessWidget {
+  const Background({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    const leftOffset = -50.0;
+    const baseRadius = 303.0;
+    const baseMediumRadius = 255.0;
+    const baseSmallRadius = 185.0;
+    const horizontalOffset = baseRadius * 2;
+
+    return const SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        children: [
+          Circle(
+            offset: Offset(leftOffset, 0),
+          ),
+          Circle(
+            offset: Offset(horizontalOffset + leftOffset, 0),
+            child: Circle(
+              offset: Offset(horizontalOffset + leftOffset, 0),
+              radius: baseMediumRadius,
+              borderColor: Color(0xFFDDE2F6),
+              child: Circle(
+                offset: Offset(horizontalOffset + leftOffset, 0),
+                radius: baseSmallRadius,
+                borderColor: Color(0xFFDDE2F6),
+                dotted: true,
+              ),
+            ),
+          ),
+          Circle(
+            offset: Offset(horizontalOffset * 2 + leftOffset, 0),
+          ),
+          Circle(
+            offset: Offset(horizontalOffset * 3 + leftOffset, 0),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class Circle extends StatelessWidget {
+  @visibleForTesting
+  const Circle({
+    this.offset = Offset.zero,
+    this.radius = 303,
+    this.borderColor = Colors.white,
+    this.dotted = false,
+    this.child,
+    super.key,
+  });
+
+  final Offset offset;
+  final double radius;
+  final Color borderColor;
+  final bool dotted;
+  final Widget? child;
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: CirclePainter(
+        offset: offset,
+        radius: radius,
+        borderColor: borderColor,
+        dotted: dotted,
+      ),
+      child: child,
+    );
+  }
+}
+
+class CirclePainter extends CustomPainter {
+  CirclePainter({
+    required this.offset,
+    required this.radius,
+    required this.borderColor,
+    required this.dotted,
+  }) {
+    _paintCircle = Paint()
+      ..color = Colors.white
+      ..style = PaintingStyle.fill;
+    _paintBorder = Paint()
+      ..color = borderColor
+      ..strokeWidth = 2
+      ..strokeCap = StrokeCap.butt
+      ..style = PaintingStyle.stroke;
+  }
+
+  final Offset offset;
+  final double radius;
+  final Color borderColor;
+  final bool dotted;
+
+  late final Paint _paintCircle;
+  late final Paint _paintBorder;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.drawCircle(
+      offset,
+      radius,
+      _paintCircle,
+    );
+
+    if (dotted) {
+      const dashPattern = <double>[4, 4];
+      final s = radius * 2;
+
+      var path = Path()
+        ..addRRect(
+          RRect.fromRectAndRadius(
+            Rect.fromLTWH(
+              offset.dx - s / 2,
+              offset.dy / 2 - s / 2,
+              s,
+              s,
+            ),
+            Radius.circular(s / 2),
+          ),
+        );
+      path = dashPath(path, dashArray: CircularIntervalList(dashPattern));
+      canvas.drawPath(path, _paintBorder);
+    } else {
+      canvas.drawCircle(
+        offset,
+        radius,
+        _paintBorder,
+      );
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

lib/home/widgets/logo.dart

@@ -0,0 +1,36 @@
+import 'package:app_ui/app_ui.dart';
+import 'package:dash_ai_search/l10n/l10n.dart';
+import 'package:flutter/material.dart';
+
+class Logo extends StatelessWidget {
+  const Logo({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+
+    return Row(
+      children: [
+        Text(
+          l10n.vertexAI,
+          style: const TextStyle(
+            fontSize: 18,
+            fontWeight: FontWeight.w400,
+            color: Colors.black,
+          ),
+        ),
+        const SizedBox(width: 4),
+        vertexIcons.asterisk.image(),
+        const SizedBox(width: 4),
+        Text(
+          l10n.flutter,
+          style: const TextStyle(
+            fontSize: 18,
+            fontWeight: FontWeight.w400,
+            color: Colors.black,
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/home/widgets/welcome_view.dart

@@ -0,0 +1,36 @@
+import 'package:app_ui/app_ui.dart';
+import 'package:dash_ai_search/l10n/l10n.dart';
+import 'package:flutter/material.dart';
+
+class WelcomeView extends StatelessWidget {
+  const WelcomeView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+
+    return Center(
+      child: SingleChildScrollView(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              l10n.initialScreenTitle,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                fontSize: 72,
+                fontWeight: FontWeight.w700,
+                color: Color(0xFF020F30),
+              ),
+            ),
+            const SizedBox(height: 40),
+            CTAButton(
+              icon: vertexIcons.arrowForward.image(),
+              label: l10n.startAsking,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/home/widgets/widgets.dart

@@ -0,0 +1,3 @@
+export 'background.dart';
+export 'logo.dart';
+export 'welcome_view.dart';

lib/l10n/arb/app_en.arb

@@ -1,7 +1,19 @@
 {
     "@@locale": "en",
-    "counterAppBarTitle": "Counter",
-    "@counterAppBarTitle": {
-        "description": "Text shown in the AppBar of the Counter Page"
+    "vertexAI": "Vertex AI",
+    "@vertexAI": {
+        "description": "Vertex AI text on logo"
+    },
+    "flutter": "Flutter",
+    "@flutter": {
+        "description": "Flutter text on logo"
+    },
+    "initialScreenTitle": "Ask a question, get \nthe right answer, with \nGoogle Vertex AI",
+    "@initialScreenTitle": {
+        "description": "Title shown on Initial screen"
+    },
+    "startAsking": "Start asking",
+    "@startAsking": {
+        "description": "Button text for start asking"
     }
 }

packages/app_ui/lib/app_ui.dart

@@ -1 +1,6 @@
+import 'package:app_ui/src/generated/assets.gen.dart';
+
 export 'src/widgets/widgets.dart';
+
+/// Global reference to actual app_ui icons.
+const vertexIcons = Assets.icons;