├── .gitignore ├── .metadata ├── CHANGELOG.md ├── LICENSE ├── README.md ├── example └── main.dart ├── lib ├── flutter_scale.dart └── model │ └── measurement_line.dart ├── preview ├── height_weight_sclae.gif ├── horizontal.gif └── vertical.gif ├── pubspec.lock └── pubspec.yaml /.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | 12 | # IntelliJ related 13 | *.iml 14 | *.ipr 15 | *.iws 16 | .idea/ 17 | 18 | # The .vscode folder contains launch configuration and tasks you configure in 19 | # VS Code which you may wish to be included in version control, so this line 20 | # is commented out by default. 21 | #.vscode/ 22 | 23 | # Flutter/Dart/Pub related 24 | **/doc/api/ 25 | .dart_tool/ 26 | .flutter-plugins 27 | .packages 28 | .pub-cache/ 29 | .pub/ 30 | build/ 31 | 32 | # Android related 33 | **/android/**/gradle-wrapper.jar 34 | **/android/.gradle 35 | **/android/captures/ 36 | **/android/gradlew 37 | **/android/gradlew.bat 38 | **/android/local.properties 39 | **/android/**/GeneratedPluginRegistrant.java 40 | 41 | # iOS/XCode related 42 | **/ios/**/*.mode1v3 43 | **/ios/**/*.mode2v3 44 | **/ios/**/*.moved-aside 45 | **/ios/**/*.pbxuser 46 | **/ios/**/*.perspectivev3 47 | **/ios/**/*sync/ 48 | **/ios/**/.sconsign.dblite 49 | **/ios/**/.tags* 50 | **/ios/**/.vagrant/ 51 | **/ios/**/DerivedData/ 52 | **/ios/**/Icon? 53 | **/ios/**/Pods/ 54 | **/ios/**/.symlinks/ 55 | **/ios/**/profile 56 | **/ios/**/xcuserdata 57 | **/ios/.generated/ 58 | **/ios/Flutter/App.framework 59 | **/ios/Flutter/Flutter.framework 60 | **/ios/Flutter/Generated.xcconfig 61 | **/ios/Flutter/app.flx 62 | **/ios/Flutter/app.zip 63 | **/ios/Flutter/flutter_assets/ 64 | **/ios/ServiceDefinitions.json 65 | **/ios/Runner/GeneratedPluginRegistrant.* 66 | 67 | # Exceptions to above rules. 68 | !**/ios/**/default.mode1v3 69 | !**/ios/**/default.mode2v3 70 | !**/ios/**/default.pbxuser 71 | !**/ios/**/default.perspectivev3 72 | !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages 73 | -------------------------------------------------------------------------------- /.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled and should not be manually edited. 5 | 6 | version: 7 | revision: b712a172f9694745f50505c93340883493b505e5 8 | channel: stable 9 | 10 | project_type: package 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [0.1.2] 2 | * Example added. 3 | 4 | ## [0.1.1] 5 | * Preview added. 6 | 7 | ## [0.0.1] 8 | * Release 9 | 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flutter Scale 2 | 3 | A Flutter package allows you to easily integrate Scale widget. 4 | 5 | ## Preview 6 | ![The example app running in Android](https://github.com/AubergineDevelopers/flutter_scale/blob/master/preview/vertical.gif) 7 | ![The example app running in Android](https://github.com/AubergineDevelopers/flutter_scale/blob/master/preview/horizontal.gif) 8 | ![The example app running in Android](https://github.com/AubergineDevelopers/flutter_scale/blob/master/preview/height_weight_sclae.gif) 9 | 10 | 11 | ## Installing 12 | 13 | 1. Add dependency to `pubspec.yaml` 14 | 15 | *Get the latest version in the 'Installing' tab on pub.dartlang.org* 16 | 17 | ```dart 18 | dependencies: 19 | flutter_scale: 0.1.2 20 | ``` 21 | 22 | 2. Import the package 23 | ```dart 24 | import 'package:flutter_scale/flutter_scale.dart'; 25 | ``` 26 | 27 | 3. Adding Vertical Scale 28 | 29 | ```dart 30 | class _Example1State extends State { 31 | @override 32 | Widget build(BuildContext context) { 33 | return Scaffold( 34 | body: VerticalScale( 35 | maxValue: 13, 36 | scaleController: ScrollController(), 37 | )); 38 | } 39 | } 40 | ``` 41 | 42 | 4. Adding Horizontal Scale 43 | 44 | ```dart 45 | class _Example1State extends State { 46 | @override 47 | Widget build(BuildContext context) { 48 | return Scaffold( 49 | body: HorizontalScale( 50 | maxValue: 25, 51 | scaleController: ScrollController(), 52 | )); 53 | } 54 | } 55 | ``` 56 | 57 | *With optional parameters* 58 | 59 | ```dart 60 | class _Example1State extends State { 61 | @override 62 | Widget build(BuildContext context) { 63 | return Scaffold( 64 | body: VerticalScale( 65 | maxValue: 7, 66 | scaleController: ScrollController(initialScrollOffset: 200), 67 | scaleColor: Colors.redAccent, 68 | lineColor: Colors.amber, 69 | linesBetweenTwoPoints: 5, 70 | middleLineAt: 3, 71 | pointer: RotatedBox( 72 | quarterTurns: 1, child: Image.asset('assets/images/tooltip.png')), 73 | textStyle: TextStyle( 74 | fontSize: 35, 75 | color: Colors.amber, 76 | fontWeight: FontWeight.bold, 77 | fontStyle: FontStyle.italic, 78 | ), 79 | )); 80 | } 81 | } 82 | ``` 83 | 84 | ## How to use 85 | Check out the **example** app in the [example](example) directory or the 'Example' tab on pub.dartlang.org for a more complete example. 86 | -------------------------------------------------------------------------------- /example/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_scale/flutter_scale.dart'; 3 | 4 | void main() => runApp(MyApp()); 5 | 6 | class MyApp extends StatelessWidget { 7 | @override 8 | Widget build(BuildContext context) { 9 | return MaterialApp( 10 | title: 'Flutter Demo', 11 | theme: ThemeData( 12 | primarySwatch: Colors.blue, 13 | ), 14 | home: Example(), 15 | ); 16 | } 17 | } 18 | 19 | class Example extends StatefulWidget { 20 | @override 21 | _ExampleState createState() => _ExampleState(); 22 | } 23 | 24 | class _ExampleState extends State { 25 | ScrollController _weightController; 26 | ScrollController _heightController; 27 | 28 | final feetController = TextEditingController(); 29 | final inchController = TextEditingController(); 30 | final kilogramController = TextEditingController(); 31 | 32 | @override 33 | void initState() { 34 | super.initState(); 35 | _weightController = ScrollController(initialScrollOffset: 0); 36 | _heightController = ScrollController(initialScrollOffset: 0); 37 | } 38 | 39 | @override 40 | void dispose() { 41 | feetController.dispose(); 42 | inchController.dispose(); 43 | kilogramController.dispose(); 44 | super.dispose(); 45 | } 46 | 47 | @override 48 | Widget build(BuildContext context) { 49 | return Scaffold( 50 | body: Container( 51 | child: Row( 52 | children: [ 53 | Expanded( 54 | child: Column( 55 | children: [ 56 | Expanded( 57 | child: SingleChildScrollView( 58 | child: Column( 59 | children: [ 60 | SizedBox( 61 | height: 50, 62 | ), 63 | Text( 64 | 'Height', 65 | style: TextStyle(fontSize: 30), 66 | ), 67 | SizedBox( 68 | height: 30, 69 | ), 70 | Row( 71 | mainAxisAlignment: MainAxisAlignment.center, 72 | children: [ 73 | Container( 74 | width: 100, 75 | child: TextField( 76 | controller: feetController, 77 | style: TextStyle(fontSize: 22), 78 | keyboardType: TextInputType.number, 79 | decoration: InputDecoration( 80 | hintText: '0', 81 | suffixText: 'ft', 82 | border: OutlineInputBorder()), 83 | //onSubmitted: _heightChangeScale(), 84 | ), 85 | ), 86 | SizedBox( 87 | width: 20, 88 | ), 89 | Container( 90 | width: 100, 91 | child: TextField( 92 | controller: inchController, 93 | style: TextStyle(fontSize: 22), 94 | keyboardType: TextInputType.number, 95 | decoration: InputDecoration( 96 | hintText: '0', 97 | suffixText: 'in', 98 | border: OutlineInputBorder()), 99 | //onSubmitted: _heightChangeScale(), 100 | ), 101 | ), 102 | ], 103 | ), 104 | RaisedButton( 105 | onPressed: _heightChangeScale, 106 | child: Text('set height'), 107 | ), 108 | SizedBox( 109 | height: 50, 110 | ), 111 | Text( 112 | 'Weight', 113 | style: TextStyle(fontSize: 30), 114 | ), 115 | SizedBox( 116 | height: 30, 117 | ), 118 | Column( 119 | mainAxisAlignment: MainAxisAlignment.center, 120 | children: [ 121 | Container( 122 | width: 120, 123 | child: TextField( 124 | controller: kilogramController, 125 | style: TextStyle(fontSize: 22), 126 | keyboardType: TextInputType.number, 127 | decoration: InputDecoration( 128 | hintText: '0', 129 | suffixText: 'kg', 130 | border: OutlineInputBorder()), 131 | ), 132 | ), 133 | RaisedButton( 134 | onPressed: _setWeight, 135 | child: Text('set weight'), 136 | ), 137 | ], 138 | ), 139 | SizedBox( 140 | height: 30, 141 | ), 142 | ], 143 | ), 144 | )), 145 | HorizontalScale( 146 | maxValue: 200, 147 | scaleController: _weightController, 148 | onChanged: _handleWeightScaleChanged, 149 | ), 150 | ], 151 | ), 152 | ), 153 | VerticalScale( 154 | maxValue: 13, 155 | scaleController: _heightController, 156 | scaleColor: Colors.amberAccent, 157 | lineColor: Colors.purple, 158 | linesBetweenTwoPoints: 11, 159 | middleLineAt: 6, 160 | textStyle: TextStyle( 161 | fontSize: 22, 162 | color: Colors.purple, 163 | fontWeight: FontWeight.bold), 164 | onChanged: _handleHeightScaleChanged, 165 | ), 166 | ], 167 | ), 168 | ), 169 | ); 170 | } 171 | 172 | ///Height related methods 173 | _heightChangeScale() { 174 | double feet = double.tryParse(feetController.text) ?? 0; 175 | double inch = double.tryParse(inchController.text) ?? 0; 176 | 177 | // feet * 12 to get inches. 178 | double feetToInch = feet * 12; 179 | 180 | /// scale only understands scale points. 181 | /// So we need to convert our measurement into scale points by multiplying our measurement unit with 20 182 | /// i.e scale points = measurement unit * 20. 183 | /// inches * 20 to get actual scale point. NOTE: 20 is the actual distance between two lines. 184 | double inchToScalePoints = feetToInch * 20 + inch * 20; 185 | 186 | if (_heightController.hasClients) { 187 | _heightController.animateTo(inchToScalePoints, 188 | duration: Duration(milliseconds: 1000), curve: Curves.fastOutSlowIn); 189 | } 190 | } 191 | 192 | void _handleHeightScaleChanged(int scalePoints) { 193 | /// scale only understands scale points. 194 | /// So we need to convert scale points into our measurement unit by dividing scale point with 20. 195 | /// i.e measurement unit = scale point / 20. 196 | int inchOffest = scalePoints ~/ 20; 197 | int feet = inchOffest ~/ 12; 198 | int inch = inchOffest % 12; 199 | 200 | feetController.text = feet.toString(); 201 | inchController.text = inch.toString(); 202 | } 203 | 204 | ///Weight related methods 205 | _setWeight() { 206 | double moveToFeet = double.tryParse(kilogramController.text) ?? 0; 207 | double moveToPixel = 208 | moveToFeet / 0.1 * 20; //scale points = measurement unit * 20. 209 | 210 | if (_weightController.hasClients) { 211 | _weightController.animateTo(moveToPixel, 212 | duration: Duration(milliseconds: 1000), curve: Curves.fastOutSlowIn); 213 | } 214 | } 215 | 216 | void _handleWeightScaleChanged(int scalePoints) { 217 | int gram = scalePoints ~/ 20; //measurement unit = scale point / 20. 218 | double kg = ((gram * 100) / 1000); 219 | kilogramController.text = kg.toString(); 220 | } 221 | } 222 | -------------------------------------------------------------------------------- /lib/flutter_scale.dart: -------------------------------------------------------------------------------- 1 | library flutter_scale; 2 | 3 | import 'package:flutter/material.dart'; 4 | 5 | import 'model/measurement_line.dart'; 6 | 7 | typedef void ScaleChangedCallback(int scalePoints); 8 | 9 | class HorizontalScale extends StatefulWidget { 10 | final int maxValue; 11 | final ScrollController scaleController; 12 | final ScaleChangedCallback onChanged; 13 | final Color scaleColor; 14 | final Color lineColor; 15 | final TextStyle textStyle; 16 | final int linesBetweenTwoPoints; 17 | final int middleLineAt; 18 | final Widget pointer; 19 | 20 | const HorizontalScale( 21 | {Key key, 22 | @required this.maxValue, 23 | @required this.scaleController, 24 | this.onChanged, 25 | this.scaleColor = Colors.tealAccent, 26 | this.lineColor = Colors.black54, 27 | this.textStyle = const TextStyle(fontSize: 25, color: Colors.black54), 28 | this.linesBetweenTwoPoints = 9, 29 | this.middleLineAt = 5, 30 | this.pointer}) 31 | : assert(maxValue != null, 32 | "maxValue cannot be null. This is used to set scale limit. i.e maxValue=10"), 33 | assert(scaleController != null, 34 | "scaleController cannot be null. This is used to control the behaviour of scale like reading current scale point, move to particular point in scale etc. Try giving value like scaleController: ScrollController(initialScrollOffset: 0)"), 35 | super(key: key); 36 | 37 | @override 38 | _HorizontalScaleState createState() => _HorizontalScaleState(); 39 | } 40 | 41 | class _HorizontalScaleState extends State { 42 | List measurementLineList = List(); 43 | 44 | @override 45 | void initState() { 46 | super.initState(); 47 | _createListOfLinesToDraw(); 48 | widget.scaleController.addListener(_scaleScrollListener); 49 | } 50 | 51 | @override 52 | void dispose() { 53 | widget.scaleController.removeListener(_scaleScrollListener); 54 | widget.scaleController.dispose(); 55 | super.dispose(); 56 | } 57 | 58 | @override 59 | Widget build(BuildContext context) { 60 | return Container( 61 | height: 90, 62 | decoration: BoxDecoration(color: widget.scaleColor), 63 | child: Stack( 64 | children: [ 65 | Container( 66 | margin: EdgeInsets.only( 67 | left: MediaQuery.of(context).size.width * 0.5 + 17), 68 | child: widget.pointer ?? 69 | Container( 70 | height: 90, 71 | width: 3, 72 | decoration: 73 | BoxDecoration(color: Colors.redAccent.withOpacity(0.7)), 74 | ), 75 | ), 76 | ListView.builder( 77 | physics: BouncingScrollPhysics(), 78 | scrollDirection: Axis.horizontal, 79 | controller: widget.scaleController, 80 | itemCount: measurementLineList.length, 81 | padding: EdgeInsets.only( 82 | left: MediaQuery.of(context).size.width * 0.5, top: 5), 83 | itemBuilder: (context, index) { 84 | final mLine = measurementLineList[index]; 85 | if (mLine.type == Line.big) { 86 | return Stack( 87 | alignment: AlignmentDirectional.bottomEnd, 88 | overflow: Overflow.visible, 89 | children: [ 90 | Positioned( 91 | left: 12, 92 | top: 15, 93 | child: Text( 94 | '${mLine.value}', 95 | style: widget.textStyle, 96 | ), 97 | ), 98 | Row( 99 | crossAxisAlignment: CrossAxisAlignment.end, 100 | children: [ 101 | SizedBox( 102 | width: 17, 103 | ), 104 | Container( 105 | height: 40, 106 | width: 3, 107 | decoration: BoxDecoration(color: widget.lineColor), 108 | ), 109 | ], 110 | ) 111 | ], 112 | ); 113 | } else if (measurementLineList[index].type == Line.small) { 114 | return Row( 115 | crossAxisAlignment: CrossAxisAlignment.end, 116 | children: [ 117 | SizedBox( 118 | width: 19, 119 | ), 120 | Container( 121 | height: 20, 122 | width: 1, 123 | decoration: BoxDecoration(color: widget.lineColor), 124 | ), 125 | ], 126 | ); 127 | } else { 128 | return Row( 129 | crossAxisAlignment: CrossAxisAlignment.end, 130 | children: [ 131 | SizedBox( 132 | width: 18, 133 | ), 134 | Container( 135 | height: 27, 136 | width: 2, 137 | decoration: BoxDecoration(color: widget.lineColor), 138 | ), 139 | ], 140 | ); 141 | } 142 | }, 143 | ) 144 | ], 145 | ), 146 | ); 147 | } 148 | 149 | void _createListOfLinesToDraw() { 150 | for (int i = 0; i <= widget.maxValue; i++) { 151 | measurementLineList.add(MeasurementLine(type: Line.big, value: i)); 152 | for (int j = 1; j <= widget.linesBetweenTwoPoints; j++) { 153 | measurementLineList.add(j != widget.middleLineAt 154 | ? MeasurementLine(type: Line.small, value: i) 155 | : MeasurementLine(type: Line.medium, value: i)); 156 | } 157 | } 158 | } 159 | 160 | _scaleScrollListener() { 161 | widget.onChanged(widget.scaleController.offset.toInt()); 162 | } 163 | } 164 | 165 | class VerticalScale extends StatefulWidget { 166 | final int maxValue; 167 | final ScrollController scaleController; 168 | final ScaleChangedCallback onChanged; 169 | final Color scaleColor; 170 | final Color lineColor; 171 | final TextStyle textStyle; 172 | final int linesBetweenTwoPoints; 173 | final int middleLineAt; 174 | final Widget pointer; 175 | 176 | const VerticalScale( 177 | {Key key, 178 | @required this.maxValue, 179 | @required this.scaleController, 180 | this.onChanged, 181 | this.scaleColor = Colors.tealAccent, 182 | this.lineColor = Colors.black54, 183 | this.textStyle = const TextStyle(fontSize: 25, color: Colors.black54), 184 | this.linesBetweenTwoPoints = 9, 185 | this.middleLineAt = 5, 186 | this.pointer}) 187 | : assert(maxValue != null, 188 | "maxValue cannot be null. This is used to set scale limit. i.e maxValue=10"), 189 | assert(scaleController != null, 190 | "scaleController cannot be null. This is used to control the behaviour of scale like reading current scale point, move to particular point in scale etc. Try giving value like scaleController: ScrollController(initialScrollOffset: 0)"), 191 | super(key: key); 192 | 193 | @override 194 | _VerticalScaleState createState() => _VerticalScaleState(); 195 | } 196 | 197 | class _VerticalScaleState extends State { 198 | List measurementLineList = List(); 199 | 200 | @override 201 | void initState() { 202 | super.initState(); 203 | _createListOfLinesToDraw(); 204 | widget.scaleController.addListener(_scaleScrollListener); 205 | } 206 | 207 | @override 208 | void dispose() { 209 | widget.scaleController.removeListener(_scaleScrollListener); 210 | widget.scaleController.dispose(); 211 | super.dispose(); 212 | } 213 | 214 | @override 215 | Widget build(BuildContext context) { 216 | return Container( 217 | width: 90, 218 | decoration: BoxDecoration(color: widget.scaleColor), 219 | child: Stack( 220 | children: [ 221 | Container( 222 | margin: EdgeInsets.only( 223 | top: MediaQuery.of(context).size.height * 0.46 + 17), 224 | child: widget.pointer ?? 225 | Container( 226 | height: 3, 227 | width: 90, 228 | decoration: 229 | BoxDecoration(color: Colors.redAccent.withOpacity(0.7)), 230 | ), 231 | ), 232 | ListView.builder( 233 | physics: BouncingScrollPhysics(), 234 | controller: widget.scaleController, 235 | itemCount: measurementLineList.length, 236 | padding: EdgeInsets.only( 237 | left: 5, top: MediaQuery.of(context).size.height * 0.46), 238 | itemBuilder: (context, index) { 239 | final mLine = measurementLineList[index]; 240 | if (mLine.type == Line.big) { 241 | return Stack( 242 | alignment: AlignmentDirectional.bottomEnd, 243 | overflow: Overflow.visible, 244 | children: [ 245 | Positioned( 246 | top: 5, 247 | left: 15, 248 | child: Text( 249 | '${mLine.value}', 250 | style: widget.textStyle, 251 | ), 252 | ), 253 | Column( 254 | crossAxisAlignment: CrossAxisAlignment.end, 255 | children: [ 256 | SizedBox( 257 | height: 17, 258 | ), 259 | Container( 260 | height: 3, 261 | width: 40, 262 | decoration: BoxDecoration(color: widget.lineColor), 263 | ), 264 | ], 265 | ) 266 | ], 267 | ); 268 | } else if (measurementLineList[index].type == Line.small) { 269 | return Column( 270 | crossAxisAlignment: CrossAxisAlignment.end, 271 | children: [ 272 | SizedBox( 273 | height: 19, 274 | ), 275 | Container( 276 | height: 1, 277 | width: 20, 278 | decoration: BoxDecoration(color: widget.lineColor), 279 | ), 280 | ], 281 | ); 282 | } else { 283 | return Column( 284 | crossAxisAlignment: CrossAxisAlignment.end, 285 | children: [ 286 | SizedBox( 287 | height: 18, 288 | ), 289 | Container( 290 | height: 2, 291 | width: 27, 292 | decoration: BoxDecoration(color: widget.lineColor), 293 | ), 294 | ], 295 | ); 296 | } 297 | }, 298 | ) 299 | ], 300 | ), 301 | ); 302 | } 303 | 304 | void _createListOfLinesToDraw() { 305 | for (int i = 0; i <= widget.maxValue; i++) { 306 | measurementLineList.add(MeasurementLine(type: Line.big, value: i)); 307 | for (int j = 1; j <= widget.linesBetweenTwoPoints; j++) { 308 | measurementLineList.add(j != widget.middleLineAt 309 | ? MeasurementLine(type: Line.small, value: i) 310 | : MeasurementLine(type: Line.medium, value: i)); 311 | } 312 | } 313 | } 314 | 315 | _scaleScrollListener() { 316 | widget.onChanged(widget.scaleController.offset.toInt()); 317 | } 318 | } 319 | -------------------------------------------------------------------------------- /lib/model/measurement_line.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class MeasurementLine { 4 | int value; 5 | Line type; 6 | 7 | MeasurementLine({this.value, @required this.type}); 8 | } 9 | 10 | enum Line { 11 | big, 12 | medium, 13 | small, 14 | } 15 | -------------------------------------------------------------------------------- /preview/height_weight_sclae.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AubergineDevelopers/flutter_scale/9f674d0bfc5c3b5217894eabfbfa352e6c912041/preview/height_weight_sclae.gif -------------------------------------------------------------------------------- /preview/horizontal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AubergineDevelopers/flutter_scale/9f674d0bfc5c3b5217894eabfbfa352e6c912041/preview/horizontal.gif -------------------------------------------------------------------------------- /preview/vertical.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AubergineDevelopers/flutter_scale/9f674d0bfc5c3b5217894eabfbfa352e6c912041/preview/vertical.gif -------------------------------------------------------------------------------- /pubspec.lock: -------------------------------------------------------------------------------- 1 | # Generated by pub 2 | # See https://dart.dev/tools/pub/glossary#lockfile 3 | packages: 4 | async: 5 | dependency: transitive 6 | description: 7 | name: async 8 | url: "https://pub.dartlang.org" 9 | source: hosted 10 | version: "2.2.0" 11 | boolean_selector: 12 | dependency: transitive 13 | description: 14 | name: boolean_selector 15 | url: "https://pub.dartlang.org" 16 | source: hosted 17 | version: "1.0.4" 18 | charcode: 19 | dependency: transitive 20 | description: 21 | name: charcode 22 | url: "https://pub.dartlang.org" 23 | source: hosted 24 | version: "1.1.2" 25 | collection: 26 | dependency: transitive 27 | description: 28 | name: collection 29 | url: "https://pub.dartlang.org" 30 | source: hosted 31 | version: "1.14.11" 32 | flutter: 33 | dependency: "direct main" 34 | description: flutter 35 | source: sdk 36 | version: "0.0.0" 37 | flutter_test: 38 | dependency: "direct dev" 39 | description: flutter 40 | source: sdk 41 | version: "0.0.0" 42 | matcher: 43 | dependency: transitive 44 | description: 45 | name: matcher 46 | url: "https://pub.dartlang.org" 47 | source: hosted 48 | version: "0.12.5" 49 | meta: 50 | dependency: transitive 51 | description: 52 | name: meta 53 | url: "https://pub.dartlang.org" 54 | source: hosted 55 | version: "1.1.6" 56 | path: 57 | dependency: transitive 58 | description: 59 | name: path 60 | url: "https://pub.dartlang.org" 61 | source: hosted 62 | version: "1.6.2" 63 | pedantic: 64 | dependency: transitive 65 | description: 66 | name: pedantic 67 | url: "https://pub.dartlang.org" 68 | source: hosted 69 | version: "1.7.0" 70 | quiver: 71 | dependency: transitive 72 | description: 73 | name: quiver 74 | url: "https://pub.dartlang.org" 75 | source: hosted 76 | version: "2.0.3" 77 | sky_engine: 78 | dependency: transitive 79 | description: flutter 80 | source: sdk 81 | version: "0.0.99" 82 | source_span: 83 | dependency: transitive 84 | description: 85 | name: source_span 86 | url: "https://pub.dartlang.org" 87 | source: hosted 88 | version: "1.5.5" 89 | stack_trace: 90 | dependency: transitive 91 | description: 92 | name: stack_trace 93 | url: "https://pub.dartlang.org" 94 | source: hosted 95 | version: "1.9.3" 96 | stream_channel: 97 | dependency: transitive 98 | description: 99 | name: stream_channel 100 | url: "https://pub.dartlang.org" 101 | source: hosted 102 | version: "2.0.0" 103 | string_scanner: 104 | dependency: transitive 105 | description: 106 | name: string_scanner 107 | url: "https://pub.dartlang.org" 108 | source: hosted 109 | version: "1.0.4" 110 | term_glyph: 111 | dependency: transitive 112 | description: 113 | name: term_glyph 114 | url: "https://pub.dartlang.org" 115 | source: hosted 116 | version: "1.1.0" 117 | test_api: 118 | dependency: transitive 119 | description: 120 | name: test_api 121 | url: "https://pub.dartlang.org" 122 | source: hosted 123 | version: "0.2.5" 124 | typed_data: 125 | dependency: transitive 126 | description: 127 | name: typed_data 128 | url: "https://pub.dartlang.org" 129 | source: hosted 130 | version: "1.1.6" 131 | vector_math: 132 | dependency: transitive 133 | description: 134 | name: vector_math 135 | url: "https://pub.dartlang.org" 136 | source: hosted 137 | version: "2.0.8" 138 | sdks: 139 | dart: ">=2.2.2 <3.0.0" 140 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: flutter_scale 2 | description: A Flutter package allows you to easily integrate Scale widget. 3 | version: 0.1.2 4 | author: Aubergine Solutions 5 | homepage: https://github.com/AubergineDevelopers/flutter_scale 6 | issue_tracker : https://github.com/AubergineDevelopers/flutter_scale/issues 7 | 8 | 9 | environment: 10 | sdk: ">=2.1.0 <3.0.0" 11 | 12 | dependencies: 13 | flutter: 14 | sdk: flutter 15 | 16 | dev_dependencies: 17 | flutter_test: 18 | sdk: flutter 19 | 20 | # For information on the generic Dart part of this file, see the 21 | # following page: https://dart.dev/tools/pub/pubspec 22 | 23 | # The following section is specific to Flutter. 24 | flutter: 25 | 26 | # To add assets to your package, add an assets section, like this: 27 | # assets: 28 | # - images/a_dot_burr.jpeg 29 | # - images/a_dot_ham.jpeg 30 | # 31 | # For details regarding assets in packages, see 32 | # https://flutter.dev/assets-and-images/#from-packages 33 | # 34 | # An image asset can refer to one or more resolution-specific "variants", see 35 | # https://flutter.dev/assets-and-images/#resolution-aware. 36 | 37 | # To add custom fonts to your package, add a fonts section here, 38 | # in this "flutter" section. Each entry in this list should have a 39 | # "family" key with the font family name, and a "fonts" key with a 40 | # list giving the asset and other descriptors for the font. For 41 | # example: 42 | # fonts: 43 | # - family: Schyler 44 | # fonts: 45 | # - asset: fonts/Schyler-Regular.ttf 46 | # - asset: fonts/Schyler-Italic.ttf 47 | # style: italic 48 | # - family: Trajan Pro 49 | # fonts: 50 | # - asset: fonts/TrajanPro.ttf 51 | # - asset: fonts/TrajanPro_Bold.ttf 52 | # weight: 700 53 | # 54 | # For details regarding fonts in packages, see 55 | # https://flutter.dev/custom-fonts/#from-packages 56 | --------------------------------------------------------------------------------