Created
December 29, 2019 21:16
-
-
Save Elrashid/1b0ede380403c73a51d7923e0288e9a8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| import 'dart:math'; | |
| void main() { | |
| runApp(new MyApp()); | |
| } | |
| class MyApp extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| home: App(), | |
| ); | |
| } | |
| } | |
| class App extends StatefulWidget { | |
| @override | |
| _AppState createState() => _AppState(); | |
| } | |
| class _AppState extends State<App> { | |
| double _dragPercentage = 0; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| body: Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: <Widget>[ | |
| WaveSlider( | |
| onChanged: (double dragUpdate) { | |
| setState(() { | |
| print(dragUpdate); | |
| }); | |
| }, | |
| ), | |
| Padding( | |
| padding: const EdgeInsets.all(8.0), | |
| child: Text( | |
| 'Drag percentage', | |
| style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), | |
| ), | |
| ), | |
| Padding( | |
| padding: const EdgeInsets.all(8.0), | |
| child: Text( | |
| '$_dragPercentage', | |
| style: TextStyle(fontSize: 16), | |
| ), | |
| ) | |
| ], | |
| ), | |
| ); | |
| } | |
| } | |
| class WaveSlider extends StatefulWidget { | |
| final double value; | |
| final double barWidth; | |
| final int maxBarHight; | |
| final double width; | |
| final double min; | |
| final double max; | |
| final Color barColor; | |
| final Color barSideColor; | |
| final Color inActiveColor; | |
| final ValueChanged<double> onChanged; | |
| WaveSlider( | |
| {this.value = 0.0, | |
| this.barWidth = 5.0, | |
| this.maxBarHight = 50, | |
| this.width = 60.0, | |
| this.min = 0.0, | |
| this.max = 1.0, | |
| this.barColor = Colors.white, | |
| this.barSideColor = Colors.black, | |
| this.inActiveColor = Colors.grey, | |
| @required this.onChanged}); | |
| @override | |
| State<StatefulWidget> createState() => WaveSliderState(); | |
| } | |
| class WaveSliderState extends State<WaveSlider> | |
| with SingleTickerProviderStateMixin { | |
| AnimationController positionController; | |
| List<int> bars = []; | |
| double barPosition; | |
| double barWidth; | |
| int maxBarHight; | |
| double width; | |
| int numberOfBars; | |
| @override | |
| void initState() { | |
| super.initState(); | |
| barPosition = widget.value; | |
| barWidth = widget.barWidth; | |
| maxBarHight = widget.maxBarHight.toInt(); | |
| width = widget.width; | |
| if (bars.isNotEmpty) bars = []; | |
| numberOfBars = width ~/ barWidth; | |
| randomNumberGenerator(); | |
| } | |
| void randomNumberGenerator() { | |
| Random r = Random(); | |
| for (var i = 0; i < numberOfBars; i++) { | |
| bars.add(r.nextInt(maxBarHight - 10) + 10); | |
| } | |
| } | |
| _onTapDown(TapDownDetails details) { | |
| var x = details.globalPosition.dx; | |
| print("tapped " + (x).toString()); | |
| // print(positionController.value); | |
| setState(() { | |
| barPosition = x; | |
| }); | |
| widget.onChanged(x); | |
| } | |
| void _onHorizontalDragUpdate(DragUpdateDetails details) { | |
| setState(() { | |
| barPosition = details.globalPosition.dx; | |
| }); | |
| } | |
| @override | |
| Widget build(BuildContext context) { | |
| int barItem = 0; | |
| return Center( | |
| child: GestureDetector( | |
| onTapDown: _onTapDown, | |
| onHorizontalDragUpdate: _onHorizontalDragUpdate, | |
| child: Container( | |
| child: Row( | |
| crossAxisAlignment: CrossAxisAlignment.end, | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: bars.map((int height) { | |
| Color color = barItem + 1 < barPosition / barWidth | |
| ? widget.barColor | |
| : widget.inActiveColor; | |
| barItem++; | |
| return Row( | |
| children: <Widget>[ | |
| Container( | |
| width: .1, | |
| height: height.toDouble(), | |
| color: widget.barSideColor, | |
| ), | |
| Container( | |
| decoration: BoxDecoration( | |
| color: color, | |
| borderRadius: BorderRadius.only( | |
| topLeft: const Radius.circular(1.0), | |
| topRight: const Radius.circular(1.0), | |
| ), | |
| ), | |
| height: height.toDouble(), | |
| width: 4.8, | |
| ), | |
| Container( | |
| width: .1, | |
| height: height.toDouble(), | |
| color: widget.barSideColor, | |
| ), | |
| ], | |
| ); | |
| }).toList(), | |
| ), | |
| ), | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment