Polish final animation

Changelist:

- Add initial slider value feature

- Add Averta font

- Add 'Done' and keyboard buttons

lib/amount_badge.dart

@@ -34,7 +34,11 @@ class AmountBadge extends StatelessWidget {
           ),
           child: Text(
             '\$ $value',
-            style: TextStyle(color: Colors.white, fontSize: 34),
+            style: TextStyle(
+              fontFamily: 'Averta',
+              color: Colors.white,
+              fontSize: 34,
+            ),
           ),
         ),
       ],

lib/amount_slider.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-const divisionsCount = 16;
+const divisionsCount = 51;
 const divisionWidth = 3.0;
 const mainDivisionWidth = 4.0;
 const spaceBetweenDivisions = 40.0;
@@ -12,12 +12,14 @@ class AmountSlider extends StatefulWidget {
   final ValueChanged<double>? onChanged;
   final double min;
   final double max;
+  final double? initialValue;
 
   const AmountSlider({
     Key? key,
     required this.onChanged,
     required this.min,
     required this.max,
+    this.initialValue,
   }) : super(key: key);
 
   @override
@@ -36,6 +38,7 @@ class _AmountSliderState extends State<AmountSlider> {
   @override
   void initState() {
     super.initState();
+    WidgetsBinding.instance!.addPostFrameCallback((_) => setInitialValue());
     scrollController.addListener(() {
       setState(() {
         if (widget.onChanged != null) {
@@ -61,6 +64,14 @@ class _AmountSliderState extends State<AmountSlider> {
     super.dispose();
   }
 
+  void setInitialValue() {
+    if (widget.initialValue != null) {
+      final initialValueToScrollOffset =
+          widget.initialValue! / widget.max * scrollWidth;
+      scrollController.jumpTo(initialValueToScrollOffset);
+    }
+  }
+
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
@@ -99,7 +110,7 @@ class _AmountSliderState extends State<AmountSlider> {
                       borderRadius: BorderRadius.circular(2),
                       color: const Color(0x80FFFFFF),
                     ),
-                    duration: const Duration(microseconds: 100),
+                    duration: const Duration(microseconds: 0),
                   );
                 },
               ),
@@ -146,10 +157,10 @@ class _AmountSliderState extends State<AmountSlider> {
 
   double calculateDivisionWidth(int itemIndex) {
     final itemDistanceToCenter = calculateDistanceToCenter(itemIndex);
-    if (itemDistanceToCenter >= -40 - mainDivisionWidth / 2 &&
+    if (itemDistanceToCenter >= -40 - mainDivisionWidth &&
         itemDistanceToCenter < 0) {
       return mainDivisionWidth;
-    } else if (itemDistanceToCenter <= 40 + mainDivisionWidth / 2 &&
+    } else if (itemDistanceToCenter <= 40 + mainDivisionWidth &&
         itemDistanceToCenter > 0) {
       return mainDivisionWidth;
     }

lib/digits_keyboard_buttom.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+
+class DigitsKeyboardButton extends StatelessWidget {
+  const DigitsKeyboardButton({
+    Key? key,
+    required this.onPressed,
+  }) : super(key: key);
+
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return OutlinedButton(
+      onPressed: onPressed,
+      style: ButtonStyle(
+        backgroundColor: MaterialStateProperty.all<Color>(
+          const Color(0xFF856EE1),
+        ),
+        padding: MaterialStateProperty.all<EdgeInsets>(
+          EdgeInsets.all(23),
+        ),
+        shape: MaterialStateProperty.all<OutlinedBorder>(
+          RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(20),
+            side: BorderSide(width: 2, color: const Color(0xFF9A88E6))
+          ),
+        ),
+      ),
+      child: GridView.builder(
+        shrinkWrap: true,
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 3,
+          crossAxisSpacing: 4.5,
+          mainAxisSpacing: 4.5,
+          mainAxisExtent: 5,
+          childAspectRatio: 1
+        ),
+        itemCount: 9,
+        itemBuilder: (context, index) {
+          if (index == 6 || index == 8) {
+            return Container(
+              width: 5,
+              height: 5,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(2),
+                color: const Color(0x4DFFFFFF),
+              ),
+            );
+          }
+          return Container(
+            width: 5,
+            height: 5,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(2),
+              color: Colors.white,
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

lib/done_button.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+class DoneButton extends StatelessWidget {
+  const DoneButton({Key? key, required this.onPressed}) : super(key: key);
+
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.maxFinite,
+      child: OutlinedButton(
+        onPressed: onPressed,
+        style: ButtonStyle(
+          backgroundColor: MaterialStateProperty.all<Color>(Colors.white),
+          foregroundColor: MaterialStateProperty.all<Color>(
+            const Color(0xFF856EE1),
+          ),
+          padding: MaterialStateProperty.all<EdgeInsets>(
+            EdgeInsets.all(27),
+          ),
+          shape: MaterialStateProperty.all<OutlinedBorder>(
+            RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(20),
+            ),
+          ),
+        ),
+        child: Text(
+          'Done',
+          style: const TextStyle(
+            fontFamily: 'Averta',
+            fontSize: 16,
+            fontWeight: FontWeight.w600,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/main.dart

@@ -5,6 +5,8 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_sequence_animation/amount_slider.dart';
+import 'package:flutter_sequence_animation/digits_keyboard_buttom.dart';
+import 'package:flutter_sequence_animation/done_button.dart';
 
 import 'amount_badge.dart';
 
@@ -20,7 +22,7 @@ const int startRotationPiDivider = 360;
 const int endRotationPiDivider = 48;
 
 const sliderMin = 0.0;
-const sliderMax = 600.0;
+const sliderMax = 500.0;
 
 void main() {
   runApp(MyApp());
@@ -31,7 +33,9 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       theme: ThemeData(
-        appBarTheme: AppBarTheme(systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.white)),
+        appBarTheme: AppBarTheme(
+            systemOverlayStyle:
+                SystemUiOverlayStyle(statusBarColor: Colors.white)),
         scaffoldBackgroundColor: const Color(0xFF856EE1),
         brightness: Brightness.dark,
       ),
@@ -113,11 +117,15 @@ class _HomePageState extends State<HomePage> {
               ),
               Text(
                 'Set amount',
-                style: TextStyle(fontSize: 18, color: Colors.white),
+                style: TextStyle(
+                  fontFamily: 'Averta',
+                  color: Colors.white,
+                  fontSize: 18,
+                ),
               ),
               const Expanded(
                 child: SizedBox(),
-                flex: 3,
+                flex: 2,
               ),
               SizedBox(
                 height: endImageHeight,
@@ -155,10 +163,30 @@ class _HomePageState extends State<HomePage> {
                 onChanged: onSliderValueChanged,
                 min: sliderMin,
                 max: sliderMax,
+                initialValue: 100,
               ),
               const Expanded(
                 child: SizedBox(),
-                flex: 4,
+                flex: 2,
+              ),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 30),
+                child: Row(
+                  children: [
+                    SizedBox(
+                      width: 70,
+                      child: DigitsKeyboardButton(
+                        onPressed: () => print('Keyboard opened'),
+                      ),
+                    ),
+                    SizedBox(width: 10),
+                    Flexible(child: DoneButton(onPressed: () => print('Done'))),
+                  ],
+                ),
+              ),
+              const Expanded(
+                child: SizedBox(),
+                flex: 2,
               ),
             ],
           ),

pubspec.yaml

@@ -59,12 +59,12 @@ flutter:
   # "family" key with the font family name, and a "fonts" key with a
   # list giving the asset and other descriptors for the font. For
   # example:
-  # fonts:
-  #   - family: Schyler
-  #     fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
-  #         style: italic
+  fonts:
+    - family: Averta
+      fonts:
+        - asset: fonts/Averta/AvertaCyrillicRegular.otf
+        - asset: fonts/Averta/AvertaCyrillicSemiBold.otf
+          weight: 600
   #   - family: Trajan Pro
   #     fonts:
   #       - asset: fonts/TrajanPro.ttf