Панель поиска с градиентом и воздушным индикатором ⇐ Android

[Anonymous]

Это мне нужно спроектировать, но сумма расходов не соответствует правильному виду индикатора баллона. Я попробовал исправить ширину для baar, но в Android это выглядит по-другому

Код: Выделить всё

Widget pendingDiscount(double progressAmount,double emptyBar) {
final screenWidth = MediaQuery.of(context).size.width;
return Container(
// color: Colors.green[100],
height: 120,
padding: const EdgeInsets.only(left:12,right: 12),
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
height: 30,
padding: const EdgeInsets.only(top: 0.0, bottom: 0),
child: CoreTag(
radius: 20,
backgroundColor: CoreColor.neutral100,
borderColor: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
minAmount(width: 35),
5.width,
Expanded(
child: Container(
// color: Colors.green,
),
),
5.width,
maxAmount(),
],
),
),
),
),

Align(
alignment: Alignment.centerRight,
child: Container(
height: 70,
width: 70,
margin: const EdgeInsets.only(right: 30,bottom: 20),
child: upBalloon(false, amount: getRemainingAmount()),
),
),

Align(
alignment: Alignment.center,
child: Container(
//  color: Colors.red[100],
width: emptyBar,
padding: EdgeInsets.only(left: 0,right: 20),
height: 12,
child:   Stack(
alignment: Alignment.center,
children: [
Align(
alignment: Alignment.centerLeft,
child: SizedBox(
//width: 300,
child: EmptyLine(width: emptyBar),
),
),
Align(
alignment: Alignment.centerLeft,
child: Stack(
alignment: Alignment.centerLeft,
children: [
Align(
alignment: Alignment.centerLeft,
child: SeekLine(
width: progressAmount
// width: emptyBar > progressAmount ? emptyBar - progressAmount : emptyBar ,
),
),
const Align(
alignment: Alignment.centerLeft,
child: CircleView(
colors: CoreColor.dataVis,
),
),
],
),
),
],
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
//16+12+5+50
// color: Colors.red[100],
margin:  EdgeInsets.only(left: progressAmount <  250 ? progressAmount +10: progressAmount - 60,top: 55),
child: pendingDownBalloon(amount: getSpendAmount()),
),
),
],
),
);

Я так звоню

Код: Выделить всё

// - 60 is the value of remaining in 300 k and width is 220
var spendAmount = widget.discount?.totalSpent / 1000.toDouble() - 50;
return pendingDiscount(spendAmount,emptyBar);

воздушный шар

Код: Выделить всё

Widget pendingDownBalloon({String amount = '0', bool? isDoneState}) {
return Container(
height: 70,
width: 70,
// color: Colors.limeAccent[100],
child: Column(
children: [
const CircleView(
colors: CoreColor.accentGold,
),
const SizedBox(
height: 5,
),
isDoneState == null
? Assets.svgs.blueBalloon.svg()
: Assets.svgs.yellowDownBalloon.svg(),
Text(
'\$${amount}',
style: CoreTextStyle.mMedium.copyWith(
color:
isDoneState == null ? CoreColor.dataVis : CoreColor.accentGold),
),
],
),
);
}

SeekBar, пустая строка, виджет максимального и минимального количества

Код: Выделить всё

 class SeekLine extends StatelessWidget {
final double radius;
final double width;

const SeekLine({super.key, this.radius = 4, this.width = 0});

@override
Widget build(BuildContext context) {
return Container(
key: seekKey,
width: width,
height: 5,
decoration: BoxDecoration(
gradient: CoreColor.gradient08,
borderRadius: BorderRadius.all(Radius.circular(radius)),
),
);
}
}

class EmptyLine extends StatelessWidget {
final double radius;
final double width;

const EmptyLine({super.key, this.radius = 4, this.width = 0});

@override
Widget build(BuildContext context) {
return Container(
width: width,
height: 5,
decoration: BoxDecoration(
color: CoreColor.neutral200,
borderRadius: BorderRadius.all(Radius.circular(radius)),
),
);
}
}

class CircleView extends StatelessWidget {
final Color colors;

const CircleView({super.key, required this.colors});

@override
Widget build(BuildContext context) {
return Container(
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: colors,
),
);
}
}

Widget minAmount({double? width}) {
return SizedBox(
width: width ?? 40,
child: const Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text('\$0K', style: CoreTextStyle.mRegular),
],
),
);
}

Widget maxAmount() => const SizedBox(
width: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('\$300K', style: CoreTextStyle.mRegular),
],
),
);

Вверх шарик

Код: Выделить всё

Widget upBalloon(bool isZeroState, {String amount = '300.00'}) {
return Column(
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Visibility(visible: isZeroState, child: const Text('')),
Text(
isZeroState ? '\$300.00K' : '\$${amount}',
style: CoreTextStyle.mMedium.copyWith(color: CoreColor.accentGold),
),
],
),
Assets.svgs.yellowBalloon.svg(),
],
);
}

Подробнее здесь: https://stackoverflow.com/questions/786 ... or-flutter