I have sizedbox.square which align with text on design, but i can’t understand how can they be on the same level and at the same time be at the beginning of the divider. I tried a lot of things, but now my sizedbox.square is sort of in the middle, as can be seen from the screenshot, but it needs to be like in the design
The code:
return RowExt(
padding: Pad(
bottom: Sizes.s12.orNullIf(isYear),
top: Sizes.s20.orNullIf(!isYear),
),
//todo: remove when alarm will ready
children: <Widget>[
SizedBox.square(
dimension: Sizes.s16,
child: DecoratedBox(
decoration: BoxDecoration(
gradient: context.colors.premiumSelectedPlan,
shape: BoxShape.circle,
),
),
),
Expanded(
child: ColumnExt(
padding: Pad(
left: Sizes.s12,
),
children: <Widget>[
Row(
children: [
Text('Annually'),
_SaleWidget(value: 40)
],
),
Row(
children: [
Text('test'),
Text('test')
],
)
],
),
),
],
);
}
}
class _SaleWidget extends StatelessWidget {
const _SaleWidget({required this.value});
final int value;
@override
Widget build(BuildContext context) {
return Padding(
padding: Pad(left: Sizes.s6),
child: DecoratedBox(
decoration: BoxDecoration(
gradient: context.colors.premiumSale,
borderRadius: BorderRadius.circular(Sizes.s7),
),
child: TextExt(
'-$value%',
style: context.primaryFonts.medium11,
padding: Pad(
horizontal: Sizes.s8,
),
),
),
);
}
}
What i should do [
I was trying to put it in stack, align using position and just put sized box inside row with Annually text, but in the last case the text below was pushed forward when it should be exactly under the text Annually. How to correctly place widgets so that they meet the layout requirements?
2
Answers
Try below code with Row and Column
Try below code I have create same UI like your expected.
Result –![image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)