From c01f2be3dd5fc25b6e3a286676737500cb80b268 Mon Sep 17 00:00:00 2001 From: PedRaM Date: Tue, 13 Sep 2022 23:30:47 +0430 Subject: [PATCH 1/2] add animation on text style change. add opacity for default text style --- example/android/app/build.gradle | 4 +- .../android/app/src/main/AndroidManifest.xml | 1 + example/android/build.gradle | 4 +- .../gradle/wrapper/gradle-wrapper.properties | 2 +- example/lib/main.dart | 58 +++++-------------- lib/src/numberpicker.dart | 33 ++++++++--- 6 files changed, 45 insertions(+), 57 deletions(-) diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle index dd32595..9c97fbf 100644 --- a/example/android/app/build.gradle +++ b/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 } diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml index a4a045a..db48d0a 100644 --- a/example/android/app/src/main/AndroidManifest.xml +++ b/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"> diff --git a/example/android/build.gradle b/example/android/build.gradle index c505a86..e7894be 100644 --- a/example/android/build.gradle +++ b/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" } } diff --git a/example/android/gradle/wrapper/gradle-wrapper.properties b/example/android/gradle/wrapper/gradle-wrapper.properties index bc6a58a..b8793d3 100644 --- a/example/android/gradle/wrapper/gradle-wrapper.properties +++ b/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 diff --git a/example/lib/main.dart b/example/lib/main.dart index 7cc7a72..d1b3f29 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -61,15 +61,22 @@ class __IntegerExampleState extends State<_IntegerExample> { @override Widget build(BuildContext context) { return Column( + mainAxisSize: MainAxisSize.min, children: [ 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); }), ), ], diff --git a/lib/src/numberpicker.dart b/lib/src/numberpicker.dart index 63b97a1..6124faf 100644 --- a/lib/src/numberpicker.dart +++ b/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'; @@ -149,6 +148,8 @@ class _NumberPickerState extends State { @override Widget build(BuildContext context) { + print( + '----------------------------------start----------------------------------'); return SizedBox( width: widget.axis == Axis.vertical ? widget.itemWidth @@ -197,19 +198,35 @@ class _NumberPickerState extends State { 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 + : 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 +266,7 @@ class _NumberPickerState extends State { _scrollController.animateTo( index * itemExtent, duration: Duration(milliseconds: 300), - curve: Curves.easeOutCubic, + curve: Curves.ease, ); } } From b2cd69212a1aa4b204d8336a86ff429e7d158a07 Mon Sep 17 00:00:00 2001 From: PedRaM Date: Tue, 13 Sep 2022 23:35:31 +0430 Subject: [PATCH 2/2] make transparency optional --- lib/src/numberpicker.dart | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/lib/src/numberpicker.dart b/lib/src/numberpicker.dart index 6124faf..550a8d9 100644 --- a/lib/src/numberpicker.dart +++ b/lib/src/numberpicker.dart @@ -56,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, @@ -148,8 +151,6 @@ class _NumberPickerState extends State { @override Widget build(BuildContext context) { - print( - '----------------------------------start----------------------------------'); return SizedBox( width: widget.axis == Axis.vertical ? widget.itemWidth @@ -216,9 +217,11 @@ class _NumberPickerState extends State { final isOneBeforeOrAfter = isOneAfter || isOneBefore; final itemStyle = value == widget.value ? selectedStyle - : isOneBeforeOrAfter - ? oneBeforeOrAfterStyle - : otherTextStyle; + : !widget.makeNotSelectedValueTransparent + ? defaultStyle + : isOneBeforeOrAfter + ? oneBeforeOrAfterStyle + : otherTextStyle; final child = isExtra ? SizedBox.shrink() : AnimatedDefaultTextStyle(