The method '>=' was called on null. Receiver: null

The method '>=' was called on null. Receiver: null - flutter

So, I figured out that the mistake producing the error is the double _bmi inside the calculateBMI() method. However, I would like to know why including double produces this error? What is the logical process?
import 'dart:math';
class CalculatorBrain {
CalculatorBrain({this.height, this.weight});
final int height;
final int weight;
double _bmi;
String calculateBMI() {
double _bmi = height / pow(height / 100, 2);
return _bmi.toStringAsFixed(1);
}
String getResult() {
if (_bmi >= 25.0) {
return 'Overweight';
} else if (_bmi > 18.5) {
return 'Normal';
} else {
return 'Underweight';
}
}
}

Fron the calculateBMI() function, you have redeclared the _bmi variable double _bmi = height / pow(height / 100, 2);.
It's supposed to be:
_bmi = height / pow(height / 100, 2);

Related

Creating a Proper Semi Circular Slider Widget in Flutter

how do we create a proper Semi Circular Slider that has "steps" line division.
I have checked out many packages on pub.dev but they doesn't seem to provide a proper Semi Circular Slider. They look more like progress bar rather than a slider
Any thoughts please?

This can be done with a CustomPainter, GestureDetector, and a bunch of math.
Full example: https://gist.github.com/PixelToast/7dfbc4d743b108755b6521d0b8f24fd9
DartPad: https://dartpad.dartlang.org/?id=7dfbc4d743b108755b6521d0b8f24fd9
class SemiCircleSlider extends StatefulWidget {
const SemiCircleSlider({
Key? key,
required this.initialValue,
required this.divisions,
required this.onChanged,
required this.image,
}) : super(key: key);
final int initialValue;
final int divisions;
final ValueChanged<int> onChanged;
final ImageProvider image;
#override
State<SemiCircleSlider> createState() => _SemiCircleSliderState();
}
class _SemiCircleSliderState extends State<SemiCircleSlider> {
late var value = widget.initialValue;
#override
Widget build(BuildContext context) {
return SizedBox(
width: 350,
child: LayoutBuilder(
builder: (context, constraints) {
// Apply some padding to the outside so the nub doesn't go past the
// edge of the painter.
const inset = 32.0;
final arcWidth = constraints.maxWidth - inset * 2;
final height = (arcWidth / 2) + inset * 2;
final arcHeight = (height - inset * 2) * 2;
final arcRect = Rect.fromLTRB(
inset,
height - (inset + arcHeight),
arcWidth + inset,
height - inset,
);
Widget child = TweenAnimationBuilder<double>(
tween: Tween(begin: value.toDouble(), end: value.toDouble()),
duration: const Duration(milliseconds: 50),
curve: Curves.ease,
builder: (context, value, child) {
return CustomPaint(
painter: SemiCircleSliderPainter(
divisions: widget.divisions,
arcRect: arcRect,
// Map the value to the angle at which to display the nub
nubAngle: (1 - (value / (widget.divisions - 1))) * pi,
),
child: SizedBox(
height: height,
),
);
},
);
child = GestureDetector(
// Use TweenAnimationBuilder to smoothly animate between divisions
child: child,
onPanUpdate: (e) {
// Calculate the angle of the tap relative to the center of the
// arc, then map that angle to a value
final position = e.localPosition - arcRect.center;
final angle = atan2(position.dy, position.dx);
final newValue =
((1 - (angle / pi)) * (widget.divisions - 1)).round();
if (value != newValue &&
newValue >= 0 &&
newValue < widget.divisions) {
widget.onChanged(newValue);
setState(() {
value = newValue;
});
}
},
);
// Subtract by one to prevent the background from bleeding through
// and creating a seam
const imageInset = inset + SemiCircleSliderPainter.lineWidth - 1;
const imageTopInset = inset - SemiCircleSliderPainter.lineWidth / 2;
child = Stack(
fit: StackFit.passthrough,
children: [
// Position the image so that it fits neatly inside the semicircle
Positioned(
left: imageInset,
top: imageTopInset,
right: imageInset,
bottom: imageInset,
child: ClipRRect(
// A clever trick to round it into a semi-circle: round the
// bottom left and bottom right a large amount
borderRadius: const BorderRadius.vertical(
bottom: Radius.circular(1000.0),
),
child: Image(
image: widget.image,
fit: BoxFit.cover,
),
),
),
child,
],
);
return child;
},
),
);
}
}
class SemiCircleSliderPainter extends CustomPainter {
SemiCircleSliderPainter({
required this.divisions,
required this.arcRect,
required this.nubAngle,
});
final int divisions;
final Rect arcRect;
final double nubAngle;
static const nubRadius = 16.0;
static const lineWidth = 16.0;
static const stepThickness = 3.0;
static const stepLength = 2.0;
late final lineArcRect = arcRect.deflate(lineWidth / 2);
late final xradius = lineArcRect.width / 2;
late final yradius = lineArcRect.height / 2;
late final center = arcRect.center;
late final nubPath = Path()
..addPath(
Path()
..moveTo(0, 0)
..arcTo(
const Offset(nubRadius / 2, -nubRadius) &
const Size.fromRadius(nubRadius),
5 * pi / 4,
3 * pi / 2,
false,
),
Offset(
center.dx + cos(nubAngle) * xradius,
center.dy + sin(nubAngle) * yradius,
),
matrix4: Matrix4.rotationZ(nubAngle).storage,
);
#override
void paint(Canvas canvas, Size size) {
// Paint large arc
canvas.drawPath(
Path()
// Extend a line on the left and right so the markers aren't sitting
// right on the border
..moveTo(lineArcRect.right, lineArcRect.center.dy - lineWidth / 2)
..arcTo(
lineArcRect,
0,
pi,
false,
)
..lineTo(lineArcRect.left, lineArcRect.center.dy - lineWidth / 2),
Paint()
..style = PaintingStyle.stroke
..color = Colors.black
..strokeWidth = lineWidth,
);
// Paint division markers
for (var i = 0; i < divisions; i++) {
final angle = pi * i / (divisions - 1);
final xnorm = cos(angle);
final ynorm = sin(angle);
canvas.drawLine(
center +
Offset(
xnorm * (xradius - stepLength),
ynorm * (yradius - stepLength),
),
center +
Offset(
xnorm * (xradius + stepLength),
ynorm * (yradius + stepLength),
),
Paint()
..style = PaintingStyle.stroke
..color = Colors.white
..strokeWidth = stepThickness
..strokeCap = StrokeCap.round,
);
}
// Paint nub
canvas.drawPath(
nubPath,
Paint()..color = Colors.pink.shade200,
);
}
#override
bool? hitTest(Offset position) {
// Only respond to hit tests when tapping the nub
return nubPath.contains(position);
}
#override
bool shouldRepaint(SemiCircleSliderPainter oldDelegate) =>
divisions != oldDelegate.divisions ||
arcRect != oldDelegate.arcRect ||
nubAngle != oldDelegate.nubAngle;
}

For semi-circle, I would recommend sleek_circular_slider which doesn't require any kind of license. You can see this YouTube video for visual learning.
If you are ok with circular sliders, you've just got more options. You can use flutter_circular_slider package and the author has the behind the scene explanation here.
Here is another video tutorial if you are more into built on my own attitude. Here is the complete source code for it.
https://github.com/JideGuru/youtube_videos/tree/master/rainbow_circular_slider

This is based on the source code of sleek_circular_slider customized to be almost exactly the screenshot provided. I've included some new properties like touchWidth, innerTrackWidth, outerTrackWidth, handlerSize and handlerWidth.
Check out the live demo on DartPad
Source code:
/*
Copyright (c) 2019 Mat Nuckowski
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import 'dart:math' as math;
import 'dart:ui' as ui;
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _modifier(double value) => '${value.ceil().toInt()}';
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xff827c7e),
body: Center(
child: CircularSlider(
appearance: CircularSliderAppearance(
startAngle: 180,
angleRange: 180,
size: 300,
counterClockwise: true,
infoProperties: InfoProperties(modifier: _modifier),
customColors: CustomSliderColors(),
customWidths: CustomSliderWidths(
touchWidth: 60,
innerTrackWidth: 10,
outerTrackWidth: 4,
handlerSize: 20,
handlerWidth: 20,
),
),
min: 0,
max: 10,
initialValue: 6,
onChange: (value) {},
),
),
);
}
}
typedef OnChange = void Function(double value);
typedef InnerWidget = Widget Function(double percentage);
class CircularSlider extends StatefulWidget {
final double initialValue;
final double min;
final double max;
final CircularSliderAppearance appearance;
final OnChange? onChange;
final OnChange? onChangeStart;
final OnChange? onChangeEnd;
final InnerWidget? innerWidget;
static const defaultAppearance = CircularSliderAppearance();
double get angle =>
valueToAngle(initialValue, min, max, appearance.angleRange);
const CircularSlider({
Key? key,
this.initialValue = 50,
this.min = 0,
this.max = 100,
this.appearance = defaultAppearance,
this.onChange,
this.onChangeStart,
this.onChangeEnd,
this.innerWidget,
}) : assert(min <= max),
assert(initialValue >= min && initialValue <= max),
super(key: key);
#override
State<CircularSlider> createState() => _CircularSliderState();
}
class _CircularSliderState extends State<CircularSlider>
with SingleTickerProviderStateMixin {
bool _isHandlerSelected = false;
bool _animationInProgress = false;
_CurvePainter? _painter;
double? _oldWidgetAngle;
double? _oldWidgetValue;
double? _curAngle;
late double _startAngle;
late double _angleRange;
double? _selectedAngle;
double? _rotation;
SpinAnimationManager? _spinManager;
ValueChangedAnimationManager? _animationManager;
late int _appearanceHashCode;
bool get _interactionEnabled => (widget.onChangeEnd != null ||
widget.onChange != null && !widget.appearance.spinnerMode);
#override
void initState() {
super.initState();
_startAngle = widget.appearance.startAngle;
_angleRange = widget.appearance.angleRange;
_appearanceHashCode = widget.appearance.hashCode;
if (!widget.appearance.animationEnabled) return;
widget.appearance.spinnerMode ? _spin() : _animate();
}
#override
void didUpdateWidget(CircularSlider oldWidget) {
if (oldWidget.angle != widget.angle &&
_curAngle?.toStringAsFixed(4) != widget.angle.toStringAsFixed(4)) {
_animate();
}
super.didUpdateWidget(oldWidget);
}
void _animate() {
if (!widget.appearance.animationEnabled || widget.appearance.spinnerMode) {
_setupPainter();
_updateOnChange();
return;
}
_animationManager ??= ValueChangedAnimationManager(
tickerProvider: this,
minValue: widget.min,
maxValue: widget.max,
durationMultiplier: widget.appearance.animDurationMultiplier,
);
_animationManager!.animate(
initialValue: widget.initialValue,
angle: widget.angle,
oldAngle: _oldWidgetAngle,
oldValue: _oldWidgetValue,
valueChangedAnimation: ((double anim, bool animationCompleted) {
_animationInProgress = !animationCompleted;
setState(() {
if (!animationCompleted) {
_curAngle = anim;
// update painter and the on change closure
_setupPainter();
_updateOnChange();
}
});
}));
}
void _spin() {
_spinManager = SpinAnimationManager(
tickerProvider: this,
duration: Duration(milliseconds: widget.appearance.spinnerDuration),
spinAnimation: ((double anim1, anim2, anim3) {
setState(() {
_rotation = anim1;
_startAngle = math.pi * anim2;
_curAngle = anim3;
_setupPainter();
_updateOnChange();
});
}));
_spinManager!.spin();
}
#override
Widget build(BuildContext context) {
/// _setupPainter excution when _painter is null or appearance has changed.
if (_painter == null || _appearanceHashCode != widget.appearance.hashCode) {
_appearanceHashCode = widget.appearance.hashCode;
_setupPainter();
}
return RawGestureDetector(
gestures: <Type, GestureRecognizerFactory>{
_CustomPanGestureRecognizer:
GestureRecognizerFactoryWithHandlers<_CustomPanGestureRecognizer>(
() => _CustomPanGestureRecognizer(
onPanDown: _onPanDown,
onPanUpdate: _onPanUpdate,
onPanEnd: _onPanEnd,
),
(_CustomPanGestureRecognizer instance) {},
),
},
child: _buildRotatingPainter(
rotation: _rotation,
size: Size(widget.appearance.size, widget.appearance.size)));
}
#override
void dispose() {
_spinManager?.dispose();
_animationManager?.dispose();
super.dispose();
}
void _setupPainter({bool counterClockwise = false}) {
var defaultAngle = _curAngle ?? widget.angle;
if (_oldWidgetAngle != null) {
if (_oldWidgetAngle != widget.angle) {
_selectedAngle = null;
defaultAngle = widget.angle;
}
}
_curAngle = calculateAngle(
startAngle: _startAngle,
angleRange: _angleRange,
selectedAngle: _selectedAngle,
defaultAngle: defaultAngle,
counterClockwise: counterClockwise);
_painter = _CurvePainter(
startAngle: _startAngle,
angleRange: _angleRange,
angle: _curAngle! < 0.5 ? 0.5 : _curAngle!,
appearance: widget.appearance);
_oldWidgetAngle = widget.angle;
_oldWidgetValue = widget.initialValue;
}
void _updateOnChange() {
if (widget.onChange != null && !_animationInProgress) {
final value =
angleToValue(_curAngle!, widget.min, widget.max, _angleRange);
widget.onChange!(value);
}
}
Widget _buildRotatingPainter({double? rotation, required Size size}) {
if (rotation != null) {
return Transform(
transform: Matrix4.identity()..rotateZ((rotation) * 5 * math.pi / 6),
alignment: FractionalOffset.center,
child: _buildPainter(size: size));
}
return _buildPainter(size: size);
}
Widget _buildPainter({required Size size}) {
return CustomPaint(
painter: _painter,
child: SizedBox(
width: size.width,
height: size.height,
child: _buildChildWidget()));
}
Widget? _buildChildWidget() {
if (widget.appearance.spinnerMode) return null;
final value = angleToValue(_curAngle!, widget.min, widget.max, _angleRange);
final childWidget = widget.innerWidget != null
? widget.innerWidget!(value)
: SliderLabel(
value: value,
appearance: widget.appearance,
);
return childWidget;
}
void _onPanUpdate(Offset details) {
if (!_isHandlerSelected) return;
if (_painter?.center == null) return;
_handlePan(details, false);
}
void _onPanEnd(Offset details) {
_handlePan(details, true);
if (widget.onChangeEnd != null) {
widget.onChangeEnd!(
angleToValue(_curAngle!, widget.min, widget.max, _angleRange));
}
_isHandlerSelected = false;
}
void _handlePan(Offset details, bool isPanEnd) {
if (_painter?.center == null) return;
RenderBox renderBox = context.findRenderObject() as RenderBox;
var position = renderBox.globalToLocal(details);
final double touchWidth = widget.appearance.touchWidth >= 25.0
? widget.appearance.touchWidth
: 25.0;
if (isPointAlongCircle(
position, _painter!.center!, _painter!.radius, touchWidth)) {
_selectedAngle = coordinatesToRadians(_painter!.center!, position);
// setup painter with new angle values and update onChange
_setupPainter(counterClockwise: widget.appearance.counterClockwise);
_updateOnChange();
setState(() {});
}
}
bool _onPanDown(Offset details) {
if (_painter == null || _interactionEnabled == false) {
return false;
}
RenderBox renderBox = context.findRenderObject() as RenderBox;
var position = renderBox.globalToLocal(details);
final angleWithinRange = isAngleWithinRange(
startAngle: _startAngle,
angleRange: _angleRange,
touchAngle: coordinatesToRadians(_painter!.center!, position),
previousAngle: _curAngle,
counterClockwise: widget.appearance.counterClockwise);
if (!angleWithinRange) {
return false;
}
final double touchWidth = widget.appearance.touchWidth >= 25.0
? widget.appearance.touchWidth
: 25.0;
if (isPointAlongCircle(
position, _painter!.center!, _painter!.radius, touchWidth)) {
_isHandlerSelected = true;
if (widget.onChangeStart != null) {
widget.onChangeStart!(
angleToValue(_curAngle!, widget.min, widget.max, _angleRange));
}
_onPanUpdate(details);
} else {
_isHandlerSelected = false;
}
return _isHandlerSelected;
}
}
typedef SpinAnimation = void Function(
double animation1, double animation2, double animation3);
class SpinAnimationManager {
final TickerProvider tickerProvider;
final Duration duration;
final SpinAnimation spinAnimation;
SpinAnimationManager({
required this.spinAnimation,
required this.duration,
required this.tickerProvider,
});
late Animation<double> _animation1;
late Animation<double> _animation2;
late Animation<double> _animation3;
late AnimationController _animController;
void spin() {
_animController = AnimationController(
vsync: tickerProvider, duration: duration)
..addListener(() {
spinAnimation(_animation1.value, _animation2.value, _animation3.value);
})
..repeat();
_animation1 = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: _animController,
curve: const Interval(0.5, 1.0, curve: Curves.linear)));
_animation2 = Tween<double>(begin: -80.0, end: 100.0).animate(
CurvedAnimation(
parent: _animController,
curve: const Interval(0, 1.0, curve: Curves.linear)));
_animation3 = Tween(begin: 0.0, end: 360.0).animate(CurvedAnimation(
parent: _animController,
curve: const Interval(0.0, 1.0, curve: SpinnerCurve())));
}
void dispose() {
_animController.dispose();
}
}
class SpinnerCurve extends Curve {
const SpinnerCurve();
#override
double transform(double t) => (t <= 0.5) ? 1.9 * t : 1.85 * (1 - t);
}
typedef ValueChangeAnimation = void Function(
double animation, bool animationFinished);
class ValueChangedAnimationManager {
final TickerProvider tickerProvider;
final double durationMultiplier;
final double minValue;
final double maxValue;
ValueChangedAnimationManager({
required this.tickerProvider,
required this.minValue,
required this.maxValue,
this.durationMultiplier = 1.0,
});
late Animation<double> _animation;
late final AnimationController _animController =
AnimationController(vsync: tickerProvider);
bool _animationCompleted = false;
void animate(
{required double initialValue,
double? oldValue,
required double angle,
double? oldAngle,
required ValueChangeAnimation valueChangedAnimation}) {
_animationCompleted = false;
final duration = (durationMultiplier *
valueToDuration(
initialValue, oldValue ?? minValue, minValue, maxValue))
.toInt();
_animController.duration = Duration(milliseconds: duration);
final curvedAnimation = CurvedAnimation(
parent: _animController,
curve: Curves.easeOut,
);
_animation =
Tween<double>(begin: oldAngle ?? 0, end: angle).animate(curvedAnimation)
..addListener(() {
valueChangedAnimation(_animation.value, _animationCompleted);
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_animationCompleted = true;
_animController.reset();
}
});
_animController.forward();
}
void dispose() {
_animController.dispose();
}
}
class _CurvePainter extends CustomPainter {
final double angle;
final CircularSliderAppearance appearance;
final double startAngle;
final double angleRange;
Offset? handler;
Offset? center;
late double radius;
_CurvePainter(
{required this.appearance,
this.angle = 30,
required this.startAngle,
required this.angleRange});
#override
void paint(Canvas canvas, Size size) {
radius =
math.min(size.width / 2, size.height / 2) - appearance.touchWidth * 0.5;
center = Offset(size.width / 2, size.height / 2);
final trackPaint = Paint()
..style = PaintingStyle.stroke
..color = appearance.outerTrackColor
..strokeWidth = appearance.outerTrackWidth;
drawCircularArc(
canvas: canvas,
size: Size(size.width, size.height),
paint: trackPaint,
radius: radius +
appearance.innerTrackWidth / 2 +
appearance.outerTrackWidth / 2,
ignoreAngle: true,
spinnerMode: appearance.spinnerMode);
trackPaint.color = appearance.innerTrackColor;
trackPaint.strokeWidth = appearance.innerTrackWidth;
drawCircularArc(
canvas: canvas,
size: size,
paint: trackPaint,
radius: radius,
ignoreAngle: true,
spinnerMode: appearance.spinnerMode);
final currentAngle = appearance.counterClockwise ? -angle : angle;
var dividersPaint = Paint()
..color = Colors.white
..strokeWidth = 1.5;
for (final angle in [0, 18, 36, 54, 72, 108, 126, 144, 162, 180]) {
Offset handler = degreesToCoordinates(center!, -math.pi / 2 + angle + 1.5,
radius - appearance.innerTrackWidth / 2 + 2);
Offset handler2 = degreesToCoordinates(
center!,
-math.pi / 2 + angle + 1.5,
radius + appearance.innerTrackWidth / 2 - 2);
canvas.drawLine(handler, handler2, dividersPaint);
}
var dotPaint = Paint();
Offset dotHandler =
degreesToCoordinates(center!, -math.pi / 2 + 90 + 1.5, radius);
dotPaint.shader = ui.Gradient.radial(
dotHandler,
appearance.innerTrackWidth / 3,
[const Color(0xfff963b5), const Color(0xfffe94cd)]);
canvas.drawCircle(dotHandler, appearance.innerTrackWidth / 3, dotPaint);
Offset handler = degreesToCoordinates(
center!, -math.pi / 2 + startAngle + currentAngle + 1.5, radius);
Offset handler2 = degreesToCoordinates(
center!,
-math.pi / 2 + startAngle + currentAngle + 1.5,
radius + appearance.handlerWidth);
var handlerPaint = Paint()
..shader = ui.Gradient.linear(handler, handler2,
[const Color(0xfffbf9fa), const Color(0xffff7ba3)]);
final path = Path()
..moveTo(handler2.dx, handler2.dy)
..arcTo(
Rect.fromCenter(
center: handler2,
width: appearance.handlerSize,
height: appearance.handlerSize),
degreeToRadians(currentAngle) + math.pi / 2 - math.pi / 4,
math.pi + math.pi / 2,
true,
)
..lineTo(handler.dx, handler.dy)
..close();
canvas.drawPath(path, handlerPaint);
}
drawCircularArc({
required Canvas canvas,
required Size size,
required Paint paint,
required double radius,
bool ignoreAngle = false,
bool spinnerMode = false,
}) {
final double angleValue = ignoreAngle ? 0 : (angleRange - angle);
final range = appearance.counterClockwise ? -angleRange : angleRange;
final currentAngle = appearance.counterClockwise ? angleValue : -angleValue;
canvas.drawArc(
Rect.fromCircle(center: center!, radius: radius),
degreeToRadians(spinnerMode ? 0 : startAngle),
degreeToRadians(spinnerMode ? 360 : range + currentAngle),
false,
paint,
);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
double degreeToRadians(double degree) => (math.pi / 180) * degree;
double radiansToDegrees(double radians) => radians * (180 / math.pi);
Offset degreesToCoordinates(Offset center, double degrees, double radius) =>
radiansToCoordinates(center, degreeToRadians(degrees), radius);
Offset radiansToCoordinates(Offset center, double radians, double radius) {
var dx = center.dx + radius * math.cos(radians);
var dy = center.dy + radius * math.sin(radians);
return Offset(dx, dy);
}
double coordinatesToRadians(Offset center, Offset coords) {
var a = coords.dx - center.dx;
var b = center.dy - coords.dy;
return radiansNormalized(math.atan2(b, a));
}
double radiansNormalized(double radians) {
var normalized = radians < 0 ? -radians : 2 * math.pi - radians;
return normalized;
}
bool isPointInsideCircle(Offset point, Offset center, double rradius) {
var radius = rradius * 1.2;
return point.dx < (center.dx + radius) &&
point.dx > (center.dx - radius) &&
point.dy < (center.dy + radius) &&
point.dy > (center.dy - radius);
}
bool isPointAlongCircle(
Offset point, Offset center, double radius, double width) {
var dx = math.pow(point.dx - center.dx, 2);
var dy = math.pow(point.dy - center.dy, 2);
var distance = math.sqrt(dx + dy);
return (distance - radius).abs() < width;
}
double calculateRawAngle({
required double startAngle,
required double angleRange,
required double selectedAngle,
bool counterClockwise = false,
}) {
double angle = radiansToDegrees(selectedAngle);
if (!counterClockwise) {
if (angle >= startAngle && angle <= 360.0) return angle - startAngle;
return 360.0 - startAngle + angle;
}
if (angle <= startAngle) return startAngle - angle;
return 360.0 - angle + startAngle;
}
double calculateAngle({
required double startAngle,
required double angleRange,
required selectedAngle,
required defaultAngle,
bool counterClockwise = false,
}) {
if (selectedAngle == null) return defaultAngle;
double calcAngle = calculateRawAngle(
startAngle: startAngle,
angleRange: angleRange,
selectedAngle: selectedAngle,
counterClockwise: counterClockwise,
);
if (calcAngle - angleRange > (360.0 - angleRange) * 0.5) return 0.0;
if (calcAngle > angleRange) return angleRange;
return calcAngle;
}
bool isAngleWithinRange({
required double startAngle,
required double angleRange,
required touchAngle,
required previousAngle,
bool counterClockwise = false,
}) {
double calcAngle = calculateRawAngle(
startAngle: startAngle,
angleRange: angleRange,
selectedAngle: touchAngle,
counterClockwise: counterClockwise);
return !(calcAngle > angleRange);
}
int valueToDuration(double value, double previous, double min, double max) {
final divider = (max - min) / 100;
return divider != 0 ? (value - previous).abs() ~/ divider * 15 : 0;
}
double valueToPercentage(double value, double min, double max) =>
value / ((max - min) / 100);
double valueToAngle(double value, double min, double max, double angleRange) =>
percentageToAngle(valueToPercentage(value - min, min, max), angleRange);
double percentageToValue(double percentage, double min, double max) =>
((max - min) / 100) * percentage + min;
double percentageToAngle(double percentage, double angleRange) {
final step = angleRange / 100;
if (percentage > 100) return angleRange;
if (percentage < 0) return 0.5;
return percentage * step;
}
double angleToValue(double angle, double min, double max, double angleRange) {
return percentageToValue(angleToPercentage(angle, angleRange), min, max);
}
double angleToPercentage(double angle, double angleRange) {
final step = angleRange / 100;
if (angle > angleRange) return 100;
if (angle < 0.5) return 0;
return angle / step;
}
class _CustomPanGestureRecognizer extends OneSequenceGestureRecognizer {
final Function onPanDown;
final Function onPanUpdate;
final Function onPanEnd;
_CustomPanGestureRecognizer({
required this.onPanDown,
required this.onPanUpdate,
required this.onPanEnd,
});
#override
void addPointer(PointerEvent event) {
if (onPanDown(event.position)) {
startTrackingPointer(event.pointer);
resolve(GestureDisposition.accepted);
} else {
stopTrackingPointer(event.pointer);
}
}
#override
void handleEvent(PointerEvent event) {
if (event is PointerMoveEvent) {
onPanUpdate(event.position);
}
if (event is PointerUpEvent) {
onPanEnd(event.position);
stopTrackingPointer(event.pointer);
}
}
#override
String get debugDescription => 'customPan';
#override
void didStopTrackingLastPointer(int pointer) {}
}
class SliderLabel extends StatelessWidget {
final double value;
final CircularSliderAppearance appearance;
const SliderLabel({Key? key, required this.value, required this.appearance})
: super(key: key);
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: builtInfo(appearance),
);
}
List<Widget> builtInfo(CircularSliderAppearance appearance) {
var widgets = <Widget>[];
if (appearance.infoTopLabelText != null) {
widgets.add(Text(
appearance.infoTopLabelText!,
style: appearance.infoTopLabelStyle,
));
}
final modifier = appearance.infoModifier(value);
widgets.add(
Text(modifier, style: appearance.infoMainLabelStyle),
);
if (appearance.infoBottomLabelText != null) {
widgets.add(Text(
appearance.infoBottomLabelText!,
style: appearance.infoBottomLabelStyle,
));
}
return widgets;
}
}
typedef PercentageModifier = String Function(double percentage);
class CircularSliderAppearance {
static const double _defaultSize = 150.0;
static const double _defaultStartAngle = 150.0;
static const double _defaultAngleRange = 240.0;
static const Color _defaultInnerTrackColor = Colors.black;
static const Color _defaultOuterTrackColor = Colors.white;
String _defaultPercentageModifier(double value) =>
'${value.ceil().toInt()} %';
final double size;
final double startAngle;
final double angleRange;
final bool animationEnabled;
final bool spinnerMode;
final bool counterClockwise;
final double animDurationMultiplier;
final int spinnerDuration;
final CustomSliderWidths? customWidths;
final CustomSliderColors? customColors;
final InfoProperties? infoProperties;
double? get _customInnerTrackWidth => customWidths?.innerTrackWidth;
double? get _customOuterTrackWidth => customWidths?.outerTrackWidth;
double? get _customTouchWidth => customWidths?.touchWidth;
double? get _customHandlerSize => customWidths?.handlerSize;
double? get _customHandlerWidth => customWidths?.handlerWidth;
double get innerTrackWidth => _customInnerTrackWidth ?? touchWidth / 4.0;
double get outerTrackWidth => _customOuterTrackWidth ?? touchWidth / 4.0;
double get touchWidth => _customTouchWidth ?? size / 10.0;
double get handlerSize => _customHandlerSize ?? touchWidth / 5.0;
double get handlerWidth => _customHandlerWidth ?? touchWidth / 5.0;
Color? get _customInnerTrackColor => customColors?.innerTrackColor;
Color? get _customOuterTrackColor => customColors?.outerTrackColor;
Color get innerTrackColor =>
_customInnerTrackColor ?? _defaultInnerTrackColor;
Color get outerTrackColor =>
_customOuterTrackColor ?? _defaultOuterTrackColor;
String? get _topLabelText => infoProperties?.topLabelText;
String? get _bottomLabelText => infoProperties?.bottomLabelText;
TextStyle? get _mainLabelStyle => infoProperties?.mainLabelStyle;
TextStyle? get _topLabelStyle => infoProperties?.topLabelStyle;
TextStyle? get _bottomLabelStyle => infoProperties?.bottomLabelStyle;
PercentageModifier? get _modifier => infoProperties?.modifier;
PercentageModifier get infoModifier =>
_modifier ?? _defaultPercentageModifier;
String? get infoTopLabelText => _topLabelText;
String? get infoBottomLabelText => _bottomLabelText;
TextStyle get infoMainLabelStyle =>
_mainLabelStyle ??
TextStyle(
fontWeight: FontWeight.w100,
fontSize: size / 5.0,
color: const Color.fromRGBO(30, 0, 59, 1.0));
TextStyle get infoTopLabelStyle =>
_topLabelStyle ??
TextStyle(
fontWeight: FontWeight.w600,
fontSize: size / 10.0,
color: const Color.fromRGBO(147, 81, 120, 1.0));
TextStyle get infoBottomLabelStyle =>
_bottomLabelStyle ??
TextStyle(
fontWeight: FontWeight.w600,
fontSize: size / 10.0,
color: const Color.fromRGBO(147, 81, 120, 1.0));
const CircularSliderAppearance({
this.customWidths,
this.customColors,
this.size = _defaultSize,
this.startAngle = _defaultStartAngle,
this.angleRange = _defaultAngleRange,
this.infoProperties,
this.animationEnabled = true,
this.counterClockwise = false,
this.spinnerMode = false,
this.spinnerDuration = 1500,
this.animDurationMultiplier = 1.0,
});
}
class CustomSliderWidths {
final double? innerTrackWidth;
final double? outerTrackWidth;
final double? touchWidth;
final double? handlerSize;
final double? handlerWidth;
CustomSliderWidths({
this.innerTrackWidth,
this.outerTrackWidth,
this.touchWidth,
this.handlerSize,
this.handlerWidth,
});
}
class CustomSliderColors {
final Color? innerTrackColor;
final Color? outerTrackColor;
CustomSliderColors({
this.innerTrackColor,
this.outerTrackColor,
});
}
class InfoProperties {
final PercentageModifier? modifier;
final TextStyle? mainLabelStyle;
final TextStyle? topLabelStyle;
final TextStyle? bottomLabelStyle;
final String? topLabelText;
final String? bottomLabelText;
InfoProperties({
this.topLabelText,
this.bottomLabelText,
this.mainLabelStyle,
this.topLabelStyle,
this.bottomLabelStyle,
this.modifier,
});
}

You can use CustomPaint to paint various arcs and slider in your widget,
and then you can use GestureDetector to detect the pan action and slide the slider in the widget according to the pan update (onPanUpdate).
check out the working example of code here.
here is the screenshot of widget I made,
,
here is the code,
class CircularSlider extends StatefulWidget {
final double rotateAngle;
const CircularSlider({super.key, this.rotateAngle = 0});
#override
State<CircularSlider> createState() => _CircularSliderState();
}
class _CircularSliderState extends State<CircularSlider> {
double arcAngle = 0.0;
#override
void initState() {
arcAngle = widget.rotateAngle;
super.initState();
}
inRadiusArea(Offset position) {
final pos = position.translate(200.0, 200.0);
return 100 < pos.distance && 120 > pos.distance;
}
double getRadians(Offset center, Offset coords, double radius) {
var a = coords.dx - center.dx;
if (a > radius) {
a = radius;
} else if (a < -radius) {
a = -radius;
}
return math.acos(a / radius);
}
void _onPanUpdate(DragUpdateDetails details) {
final pos = details.localPosition;
final rad = getRadians(const Offset(200, 200), pos, 200);
if (rad >= 0 && rad <= math.pi) {
setState(() {
arcAngle = rad;
});
}
return;
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onPanUpdate: _onPanUpdate,
behavior: HitTestBehavior.translucent,
child: SizedBox(
height: 400,
width: 400,
child: Column(
children: [
CustomPaint(
painter: MyPainter(
strokeWidth: 20,
color: Colors.white,
radius: 102,
),
),
CustomPaint(
painter: MyPainter(
strokeWidth: 15,
color: Colors.black,
radius: 100,
),
),
CustomPaint(
painter: MyStepsPainter(
strokeWidth: 13,
color: Colors.white,
radius: 102,
),
),
_MySlider(
radius: 118,
arcAngle: arcAngle,
color: Colors.pink,
),
],
),
),
);
}
}
class MyPainter extends CustomPainter {
double startAngle;
double endAngle;
double sweepAngle;
double strokeWidth;
double radius;
Color color;
MyPainter({
this.startAngle = 0.0,
this.endAngle = 0.0,
this.sweepAngle = math.pi,
this.radius = 200,
this.color = Colors.black,
this.strokeWidth = 4.0,
});
#override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
final rect = Rect.fromCircle(center: center, radius: radius);
const useCenter = false;
final paint = Paint()
..color = color
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth;
canvas.drawArc(rect, startAngle, sweepAngle, useCenter, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class MyStepsPainter extends CustomPainter {
double startAngle;
double sweepAngle;
double stepSweepAngle;
double strokeWidth;
double radius;
int stepNumber;
Color color;
MyStepsPainter({
this.startAngle = 0.0,
this.sweepAngle = math.pi,
this.stepSweepAngle = math.pi / 100,
this.radius = 200,
this.stepNumber = 10,
this.color = Colors.black,
this.strokeWidth = 0.5,
});
#override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
final rect = Rect.fromCircle(center: center, radius: radius);
const useCenter = false;
final paint = Paint()
..color = color
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth;
final steps = 2 * stepNumber + 2;
final sweepInterval = 2 * math.pi / steps;
final halfStepSweepAngle = stepSweepAngle / 2;
var angle = 0.0;
var firstHalf = angle - halfStepSweepAngle;
var secondHalf = angle + halfStepSweepAngle;
while (angle < math.pi) {
final startA = firstHalf > 0 ? firstHalf : angle;
final endA = secondHalf <= math.pi ? secondHalf : angle;
canvas.drawArc(rect, startA, endA - startA, useCenter, paint);
angle += sweepInterval;
firstHalf = angle - halfStepSweepAngle;
secondHalf = angle + halfStepSweepAngle;
}
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class _MySlider extends StatelessWidget {
final Color color;
final double radius;
final double arcAngle;
const _MySlider({
this.color = Colors.pink,
this.radius = 210.0,
this.arcAngle = 0.0,
});
#override
Widget build(BuildContext context) {
var sinT = math.sin(arcAngle);
var cosT = math.cos(arcAngle);
final center = Offset(cosT * radius, sinT * radius);
print(sinT);
print(cosT);
print(arcAngle);
return Transform.rotate(
origin: center,
angle: arcAngle,
child: CustomPaint(
painter: MySlider(
radius: radius,
arcAngle: arcAngle,
color: color,
),
),
);
}
}
class MySlider extends CustomPainter {
final Color color;
final double radius;
final double arcAngle;
MySlider({
this.color = Colors.pink,
this.radius = 210.0,
this.arcAngle = 0.0,
});
#override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = color
..style = PaintingStyle.fill
..strokeWidth = 1;
var sinT = math.sin(arcAngle);
var cosT = math.cos(arcAngle);
var path = Path();
path.moveTo(cosT * radius - 20, sinT * radius);
path.lineTo(cosT * radius, sinT * radius - 20);
path.lineTo(cosT * radius, sinT * radius + 20);
path.lineTo(cosT * radius - 20, sinT * radius);
path.moveTo(cosT * radius, sinT * radius);
final center = Offset(cosT * radius, sinT * radius);
final rect = Rect.fromCircle(center: center, radius: 20.0);
path.addArc(rect, -math.pi / 2, math.pi);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}

How do I properly initialize a late variable

I have a late property(_bmi) set to null by default and then I initialize it in a method calcBMI(), after its initialization, I use its value in two more methods, result and interpretation to fulfill some bool conditions, but I run into a lateinitialisationerror, because the first method (result()) doesn't recognize the value I initialized in calcBMI(), it rather defaults to the initial null value that the _bmi property had, however the interpretation() method recognizes the initialized value. How I know it's only the first method that doesn't recognize it is coz when I pass a value to the _bmi property when I'm setting it, the app doesn't throw the error, it works, but then it uses the set value for the first method, but the initialised value from calcBMI() for the second method, what am I doing wrong, here is the code.
class CalculatorBrain {
CalculatorBrain({required this.weight, required this.height});
int weight;
int height;
late double _bmi = 30; // when I set this value, result() works with it, but interpretation() works with the value passed in calcBMI();
String calcBMI() {
_bmi = weight / pow(height / 100, 2);
return _bmi.toStringAsFixed(1);
}
String result() {
if(_bmi >= 25) {
return 'overweight';
} else if(_bmi > 18.5) {
return 'normal';
} else {
return 'underweight';
}
}
String interpretation() {
if(_bmi >= 25) {
return 'You have a higher than normal body weight. Try to exercise more.';
} else if(_bmi > 18.5) {
return 'You have a normal body weight. Good job.';
} else {
return 'You have a lower than normal body weight. You can eat a bit more.';
}
}
}
this is where I use my class
BottomButton(
onTap: () {
CalculatorBrain calc = CalculatorBrain(
weight: weight,
height: height,
);
setState(() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return ResultsPage(result: calc.result(), bMI: calc.calcBMI(), interpretation: calc.interpretation());
}
),
);
});
},
title: 'CALCULATE',
),

If you got a LateInitializationError before, it's not that "[result()] doesn't recognize the value I initialized in calcBMI()", it's that you called result() before you called calcBMI().
Giving _bmi an initial value avoids the LateInitializationError, but you still have the same fundamental problem: you're reading _bmi before you call calcBMI() to assign it the value you actually want.
In particular, you have:
return ResultsPage(result: calc.result(), bMI: calc.calcBMI(), interpretation: calc.interpretation());
Dart evaluates function arguments in left-to-right order, so you'll call calc.result() first, then calc.calcBMI(), and then calc.interpretation(). Changing the order should fix your problem:
return ResultsPage(
bMI: calc.calcBMI(),
result: calc.result(),
interpretation: calc.interpretation(),
);
However, relying on argument evaluation order would be poor style. It would not be obvious to readers (including your future self) that argument order matters. It would be much better to explicitly order operations that are order-dependent:
var bmi = calc.calcBMI();
return ResultsPage(
result: calc.result(),
bMI: bmi,
interpretation: calc.interpretation(),
);
Note that this has nothing to do with _bmi being late. Declaring _bmi as late provides no purpose in your code as currently written, and you could just remove it. But you also should consider rewriting your code to make CalculatorBrain less dependent on consumers calling its methods in a particular order. Some possibilities:
Compute _bmi dynamically
You could make _bmi a getter that computes the correct value for weight/height on every access:
class CalculatorBrain {
CalculatorBrain({required this.weight, required this.height});
int weight;
int height;
double get _bmi => weight / pow(height / 100, 2);
String calcBMI() => _bmi.toStringAsFixed(1);
String result() {
final _bmi = this._bmi;
if(_bmi >= 25) {
return 'overweight';
} else if(_bmi > 18.5) {
return 'normal';
} else {
return 'underweight';
}
}
...
Compute _bmi exactly once
If you make weight/height final, then you can compute _bmi once and be done:
class CalculatorBrain {
CalculatorBrain({required this.weight, required this.height});
final int weight;
final int height;
// `late` computes `_bmi` lazily, which is necessary because it depends on
// `weight` and `height`.
late final double _bmi = weight / pow(height / 100, 2);
...
Update _bmi automatically if weight or height changes
If you weight/height must be mutable, then you could create setters so that _bmi is always updated automatically:
class CalculatorBrain {
CalculatorBrain({required int weight, required int height})
: _weight = weight,
_height = height {
_updateBmi();
}
late double _bmi;
int _weight;
int get weight => _weight;
set weight(int value) {
_weight = value;
_updateBmi();
}
int _height;
int get height => _height;
set height(int value) {
_height = value;
_updateBmi();
}
void _updateBmi() {
_bmi => weight / pow(height / 100, 2);
}
...

late modifier means that you will at some point define it, which you are doing in calcBMI(), after which you call interpretation() where _bmi already has a value.
Your code would crash if you just call result() since _bmi still isn't defined.

Getting error when retrieving device screen info in Flutter

I have defined a class to retrieve the device info such as the width, height, orientation, and so on.
import 'package:flutter/material.dart';
class Device {
static double? height;
static double? width;
static String? orientationType;
static String? deviceType;
void init(BuildContext context) {
final mediaQueryData = MediaQuery.of(context);
final appBar = AppBar();
final appBarHeight = appBar.preferredSize.height;
final statusBarHeight = mediaQueryData.padding.top;
final bottomBarHeight = mediaQueryData.padding.bottom;
height = mediaQueryData.size.height - appBarHeight - statusBarHeight - bottomBarHeight;
width = mediaQueryData.size.width;
orientationType = (mediaQueryData.orientation == Orientation.portrait) ? "Portrait" : "Landscape";
deviceType = (orientationType == "Portrait" && width! < 600) ? "Mobile" : "Tablet";
}
}
When I try to calculate the size then as shown below I'm getting an error.
return Container(
width: Device.width! * 0.9,
);
Error message:
Null check operator used on a null value
But when I use it without multiplying width: Device.width it works fine and need not have to insert the null check operator as well.

Converting it to singleton class with parameters.
import 'package:flutter/material.dart';
class Device {
late double height;
late double width;
late String orientationType;
late String deviceType;
static final Device _inst = Device._internal();
Device._internal();
factory Device({BuildContext context}) {
final mediaQueryData = MediaQuery.of(context);
final appBar = AppBar();
final appBarHeight = appBar.preferredSize.height;
final statusBarHeight = mediaQueryData.padding.top;
final bottomBarHeight = mediaQueryData.padding.bottom;
_inst.height = mediaQueryData.size.height - appBarHeight - statusBarHeight - bottomBarHeight;
_inst.width = mediaQueryData.size.width;
_inst.orientationType = (mediaQueryData.orientation == Orientation.portrait) ? "Portrait" : "Landscape";
_inst.deviceType = (orientationType == "Portrait" && width! < 600) ? "Mobile" : "Tablet";
return _inst;
}
}
Use it like this:
Device(context: context).height
For more info on this topic visit:
How do you build a Singleton in Dart?
In Dart, is it possible to pass an argument in a singleton?

The following NoSuchMethodError was thrown building Builder(dirty): The method '>=' was called on null. Receiver: null The relevant error-causing was:

So, I want to pass data to a new screen, by calling methods and passing it into a String. The first method calc.calculateBMI() was passed in successfully into bmiResult.. But I got the error below for calc.getInterpretation
First Screen's Code.
ButtomButton(
buttonTitle: 'CALCULATE',
onTap: (){
CalculatorBrain calc = CalculatorBrain(height: height, weight: weight);
Navigator.push(context, MaterialPageRoute(builder: (context){
return ResultsPage(
bmiResult: calc.calculateBMI(),
interpretation: calc.getInterpretation(),
);
}));
},
),
import 'dart:math';
class CalculatorBrain {
CalculatorBrain({this.height, this.weight});
final int height;
final int weight;
double _bmi;
String calculateBMI() {
double _bmi = weight / pow(height/100, 2);
return _bmi.toStringAsFixed(1);
}
String getInterpretation() {
if (_bmi >= 25){
return 'You have a higher than normal body weight. try to exercise more';
} else if (_bmi > 18.5) {
return 'You have a normal body weight. Good job!';
} else {
return 'You have a lower than normal body weight. You can eat a bit more';
}
}
}
The Error I got
======== Exception caught by widgets library =======================================================
The following NoSuchMethodError was thrown building Builder(dirty):
The method '>=' was called on null.
Receiver: null
Tried calling: >=(27)
The relevant error-causing widget was:
MaterialApp file:///C:/Users/MICHEAL/AndroidStudioProjects/bmi_calculator/lib/main.dart:9:12
When the exception was thrown, this was the stack:
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1 CalculatorBrain.getInterpretation (package:bmi_calculator/calculator_brain.dart:27:14)
#2 _InputPageState.build.<anonymous closure>.<anonymous closure> (package:bmi_calculator/screens/input_page.dart:214:40)
#3 MaterialPageRoute.buildContent (package:flutter/src/material/page.dart:55:55)
#4 MaterialRouteTransitionMixin.buildPage (package:flutter/src/material/page.dart:108:27)
...
====================================================================================================

The error in the code above is caused by the fact that we're not initializing the _bmi variable inside the CalculatorBrain class.
To do so we can proceed by using the following code:
import 'dart:math';
class CalculatorBrain {
CalculatorBrain({this.height, this.weight}) {
_bmi = weight / pow(height/100, 2);
}
final int height;
final int weight;
double _bmi;
String calculateBMI() =>
_bmi.toStringAsFixed(1);
String getInterpretation() {
if (_bmi >= 25){
return 'You have a higher than normal body weight. try to exercise more';
} else if (_bmi > 18.5) {
return 'You have a normal body weight. Good job!';
} else {
return 'You have a lower than normal body weight. You can eat a bit more';
}
}
}
The same snippet with null-safety would be:
import 'dart:math';
class CalculatorBrain {
CalculatorBrain({required this.height, required this.weight}) {
_bmi = weight / pow(height / 100, 2);
}
final int height;
final int weight;
late double _bmi;
String calculateBMI() => _bmi.toStringAsFixed(1);
String getInterpretation() {
if (_bmi >= 25) {
return 'You have a higher than normal body weight. try to exercise more';
} else if (_bmi > 18.5) {
return 'You have a normal body weight. Good job!';
} else {
return 'You have a lower than normal body weight. You can eat a bit more';
}
}
}

Flutter Rotate CupertinoPicker

Is there any way to rotate the CupertinoPicker in Flutter by 90 degrees? So that you can pick horizontally and not vertically. Transform.rotate is not an option because then the width of the Picker is limited to the height of the parent widget. Or is there any good way to force the cupertino picker to be bigger than its parent widget?

How about the RotatedBox widget?
RotatedBox(
quarterTurns: 1,
child: CupertinoPicker(...),
)
Unlike Transform, which applies a transform just prior to painting, this object applies its rotation prior to layout, which means the entire rotated box consumes only as much space as required by the rotated child.

So I found 2 solutions. First you can use a RotatedBox. Thx to josxha for that idea. 2. solution: Make a complete custom picker. So if anyone has the same problem you can use my custom picker. The code is a total mess please dont judge lmao.
class CustomPicker extends StatefulWidget {
CustomPicker(
{#required double this.width,
#required double this.height,
#required double this.containerWidth,
#required double this.containerHeight,
#required double this.gapScaleFactor,
#required List<Widget> this.childrenW,
Function(int) this.onSnap});
double width;
double height;
double containerWidth;
double containerHeight;
double gapScaleFactor;
List<Widget> childrenW;
Function(int) onSnap;
_CustomPicker createState() => _CustomPicker(width, height, containerWidth,
containerHeight, gapScaleFactor, childrenW, onSnap);
}
class _CustomPicker extends State<CustomPicker>
with SingleTickerProviderStateMixin {
AnimationController controller;
double width;
double height;
double containerWidth;
double containerHeight;
double gapScaleFactor;
double currentScrollX = 0;
double oldAnimScrollX = 0;
double animDistance = 0;
int currentSnap = 0;
List<Widget> childrenW;
List<Positioned> scrollableContainer = [];
final Function(int) onSnap;
int currentPos;
_CustomPicker(
double this.width,
double this.height,
double this.containerWidth,
double this.containerHeight,
double this.gapScaleFactor,
List<Widget> this.childrenW,
Function(int) this.onSnap) {
initController();
init();
}
void initController() {
controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 200),
lowerBound: 0,
upperBound: 1,
)..addListener(() {
setState(() {
currentScrollX = oldAnimScrollX + controller.value * animDistance;
init();
});
});
}
void init() {
scrollableContainer.clear();
if (currentScrollX < 0) {
currentScrollX = 0;
}
double scrollableLength =
(containerWidth + containerWidth * gapScaleFactor) *
(childrenW.length) -
containerWidth * gapScaleFactor;
if (currentScrollX > scrollableLength - containerWidth) {
currentScrollX = scrollableLength - containerWidth;
}
for (int i = 0; i < childrenW.length; i++) {
double leftPos = width / 2 -
containerWidth / 2 -
currentScrollX +
containerWidth * i +
containerWidth * gapScaleFactor * i;
double mid = width / 2 - containerWidth / 2;
double topPos = containerHeight *
0.9 *
((leftPos - mid).abs() / scrollableLength) /
2;
scrollableContainer.add(Positioned(
//calculate X position
left: leftPos,
top: topPos,
child: Container(
height: containerHeight -
containerHeight *
0.9 *
((leftPos - mid).abs() / scrollableLength),
width: containerWidth -
containerWidth *
0.9 *
((leftPos - mid).abs() / scrollableLength),
child: childrenW[i],
)));
}
}
void lookForSnappoint() {
double distance = 1000000;
double animVal = 0;
int index = -2032;
for (int i = 0; i < scrollableContainer.length; i++) {
double snappoint = width / 2 - containerWidth / 2;
double currentLeftPos = width / 2 -
containerWidth / 2 -
currentScrollX +
containerWidth * i +
containerWidth * gapScaleFactor * i;
if ((currentLeftPos - snappoint).abs() < distance) {
distance = (currentLeftPos - snappoint).abs();
animVal = currentLeftPos - snappoint;
index = i;
}
}
animDistance = animVal;
oldAnimScrollX = currentScrollX;
controller.reset();
controller.forward();
this.onSnap(index);
}
#override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
child: GestureDetector(
onPanUpdate: (DragUpdateDetails dragUpdateDetails) {
setState(() {
this.currentScrollX -= dragUpdateDetails.delta.dx;
init();
});
},
onPanEnd: (DragEndDetails dragEndDetails) {
lookForSnappoint();
},
behavior: HitTestBehavior.translucent,
child: LayoutBuilder(builder: (context, constraint) {
return Container(
child: Stack(
children: <Widget>[
Stack(children: scrollableContainer),
],
),
);
}),
),
);
}
}

Categories

We Keep Coding

iphone swift flutter scala powershell matlab mongodb postgresql perl eclipse

The method '>=' was called on null. Receiver: null - flutter

Fron the calculateBMI() function, you have redeclared the _bmi variable double _bmi = height / pow(height / 100, 2);. It's supposed to be: _bmi = height / pow(height / 100, 2);

Related

Creating a Proper Semi Circular Slider Widget in Flutter

How do I properly initialize a late variable

Getting error when retrieving device screen info in Flutter

The following NoSuchMethodError was thrown building Builder(dirty): The method '>=' was called on null. Receiver: null The relevant error-causing was:

Flutter Rotate CupertinoPicker

Categories

Resources