Add transparency and animation

example/android/app/build.gradle

@@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion 30
+    compileSdkVersion 31
 
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'
@@ -36,7 +36,7 @@ android {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.yourcompany.example"
         minSdkVersion 16
-        targetSdkVersion 30
+        targetSdkVersion 31
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }

example/android/app/src/main/AndroidManifest.xml

@@ -7,6 +7,7 @@
             android:name=".MainActivity"
             android:launchMode="singleTop"
             android:theme="@style/LaunchTheme"
+            android:exported="true"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:hardwareAccelerated="true"
             android:windowSoftInputMode="adjustResize">

example/android/build.gradle

@@ -1,12 +1,12 @@
 buildscript {
-    ext.kotlin_version = '1.3.50'
+    ext.kotlin_version = '1.5.31'
     repositories {
         google()
         jcenter()
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.1.0'
+        classpath 'com.android.tools.build:gradle:7.0.3'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-all.zip

example/lib/main.dart

@@ -61,15 +61,22 @@ class __IntegerExampleState extends State<_IntegerExample> {
   @override
   Widget build(BuildContext context) {
     return Column(
+      mainAxisSize: MainAxisSize.min,
       children: <Widget>[
         SizedBox(height: 16),
         Text('Default', style: Theme.of(context).textTheme.headline6),
         NumberPicker(
           value: _currentIntValue,
-          minValue: 0,
-          maxValue: 100,
-          step: 10,
+          minValue: 1,
+          maxValue: 10,
+          step: 1,
           haptics: true,
+          itemCount: 10,
+          infiniteLoop: true,
+          itemHeight: 40,
+          itemWidth: 56,
+          selectedTextStyle: TextStyle(color: Color(0xFF3B5B6A), fontSize: 18),
+          textStyle: TextStyle(color: Color(0xFF7A909F), fontSize: 14),
           onChanged: (value) => setState(() => _currentIntValue = value),
         ),
         SizedBox(height: 32),
@@ -79,53 +86,16 @@ class __IntegerExampleState extends State<_IntegerExample> {
             IconButton(
               icon: Icon(Icons.remove),
               onPressed: () => setState(() {
-                final newValue = _currentIntValue - 10;
-                _currentIntValue = newValue.clamp(0, 100);
+                final newValue = _currentIntValue - 1;
+                _currentIntValue = newValue.clamp(1, 10);
               }),
             ),
             Text('Current int value: $_currentIntValue'),
             IconButton(
               icon: Icon(Icons.add),
               onPressed: () => setState(() {
-                final newValue = _currentIntValue + 20;
-                _currentIntValue = newValue.clamp(0, 100);
-              }),
-            ),
-          ],
-        ),
-        Divider(color: Colors.grey, height: 32),
-        SizedBox(height: 16),
-        Text('Horizontal', style: Theme.of(context).textTheme.headline6),
-        NumberPicker(
-          value: _currentHorizontalIntValue,
-          minValue: 0,
-          maxValue: 100,
-          step: 10,
-          itemHeight: 100,
-          axis: Axis.horizontal,
-          onChanged: (value) =>
-              setState(() => _currentHorizontalIntValue = value),
-          decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(16),
-            border: Border.all(color: Colors.black26),
-          ),
-        ),
-        Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            IconButton(
-              icon: Icon(Icons.remove),
-              onPressed: () => setState(() {
-                final newValue = _currentHorizontalIntValue - 10;
-                _currentHorizontalIntValue = newValue.clamp(0, 100);
-              }),
-            ),
-            Text('Current horizontal int value: $_currentHorizontalIntValue'),
-            IconButton(
-              icon: Icon(Icons.add),
-              onPressed: () => setState(() {
-                final newValue = _currentHorizontalIntValue + 20;
-                _currentHorizontalIntValue = newValue.clamp(0, 100);
+                final newValue = _currentIntValue + 1;
+                _currentIntValue = newValue.clamp(1, 10);
               }),
             ),
           ],

lib/src/numberpicker.dart

@@ -1,4 +1,3 @@
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:infinite_listview/infinite_listview.dart';
@@ -57,12 +56,15 @@ class NumberPicker extends StatefulWidget {
 
   final bool infiniteLoop;
 
+  final bool makeNotSelectedValueTransparent;
+
   const NumberPicker({
     Key? key,
     required this.minValue,
     required this.maxValue,
     required this.value,
     required this.onChanged,
+    this.makeNotSelectedValueTransparent = false,
     this.itemCount = 3,
     this.step = 1,
     this.itemHeight = 50,
@@ -197,19 +199,37 @@ class _NumberPickerState extends State<NumberPicker> {
     final themeData = Theme.of(context);
     final defaultStyle = widget.textStyle ?? themeData.textTheme.bodyText2;
     final selectedStyle = widget.selectedTextStyle ??
-        themeData.textTheme.headline5?.copyWith(color: themeData.accentColor);
+        themeData.textTheme.headline5
+            ?.copyWith(color: themeData.colorScheme.secondary);
+    final oneBeforeOrAfterStyle =
+        defaultStyle?.copyWith(color: defaultStyle.color?.withOpacity(.6));
+    final otherTextStyle =
+        defaultStyle?.copyWith(color: defaultStyle.color?.withOpacity(.2));
 
     final value = _intValueFromIndex(index % itemCount);
     final isExtra = !widget.infiniteLoop &&
         (index < additionalItemsOnEachSide ||
             index >= listItemsCount - additionalItemsOnEachSide);
-    final itemStyle = value == widget.value ? selectedStyle : defaultStyle;
-
+    final isOneBefore = widget.value - widget.step == value ||
+        (widget.value == widget.minValue && value == widget.maxValue);
+    final isOneAfter = widget.value + widget.step == value ||
+        (widget.value == widget.maxValue && value == widget.minValue);
+    final isOneBeforeOrAfter = isOneAfter || isOneBefore;
+    final itemStyle = value == widget.value
+        ? selectedStyle
+        : !widget.makeNotSelectedValueTransparent
+            ? defaultStyle
+            : isOneBeforeOrAfter
+                ? oneBeforeOrAfterStyle
+                : otherTextStyle;
     final child = isExtra
         ? SizedBox.shrink()
-        : Text(
-            _getDisplayedValue(value),
-            style: itemStyle,
+        : AnimatedDefaultTextStyle(
+            duration: Duration(milliseconds: 300),
+            curve: Curves.ease,
+            style: itemStyle?.copyWith(fontFamily: selectedStyle?.fontFamily) ??
+                TextStyle(),
+            child: Text(_getDisplayedValue(value)),
           );
 
     return Container(
@@ -249,7 +269,7 @@ class _NumberPickerState extends State<NumberPicker> {
       _scrollController.animateTo(
         index * itemExtent,
         duration: Duration(milliseconds: 300),
-        curve: Curves.easeOutCubic,
+        curve: Curves.ease,
       );
     }
   }