subscriptions design phase 2
parent
4b58a4f2dc
commit
4e78e6fdc1
@ -0,0 +1,31 @@
|
||||
import 'package:car_provider_app/views/subscriptions/widget/subscriptions_card.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:mc_common_app/extensions/int_extensions.dart';
|
||||
import 'package:mc_common_app/theme/colors.dart';
|
||||
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
|
||||
|
||||
class MySubscriptionsPage extends StatelessWidget {
|
||||
const MySubscriptionsPage({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: const CustomAppBar(
|
||||
title: "My Subscriptions",
|
||||
),
|
||||
body: SizedBox(
|
||||
width: double.infinity,
|
||||
height: double.infinity,
|
||||
child: Column(
|
||||
children: [
|
||||
21.height,
|
||||
SubscriptionsCard(
|
||||
isSubscribed: true,
|
||||
backgroundColor: MyColors.darkIconColor,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import 'package:car_provider_app/views/subscriptions/widget/subscriptions_card.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:mc_common_app/extensions/int_extensions.dart';
|
||||
import 'package:mc_common_app/theme/colors.dart';
|
||||
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
|
||||
import 'package:mc_common_app/widgets/dropdown/dropdow_field.dart';
|
||||
import 'package:mc_common_app/widgets/tab/menu_tabs.dart';
|
||||
|
||||
class SubscriptionsPage extends StatelessWidget {
|
||||
const SubscriptionsPage({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: const CustomAppBar(
|
||||
title: "Subscriptions",
|
||||
),
|
||||
body: SizedBox(
|
||||
width: double.infinity,
|
||||
height: double.infinity,
|
||||
child: Column(
|
||||
children: [
|
||||
21.height,
|
||||
MenuTabs(
|
||||
0,
|
||||
[
|
||||
DropValue(0, "1 Month", ""),
|
||||
DropValue(1, "2 Month", ""),
|
||||
DropValue(2, "3 Month", ""),
|
||||
],
|
||||
selectedColor: MyColors.primaryColor,
|
||||
onSelect: (DropValue selectedValue) {},
|
||||
),
|
||||
21.height,
|
||||
SubscriptionsCard(
|
||||
isSubscribed: true,
|
||||
),
|
||||
21.height,
|
||||
SubscriptionsCard()
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,141 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:mc_common_app/extensions/int_extensions.dart';
|
||||
import 'package:mc_common_app/extensions/string_extensions.dart';
|
||||
import 'package:mc_common_app/theme/colors.dart';
|
||||
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
|
||||
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
|
||||
|
||||
class SubscriptionsCard extends StatelessWidget {
|
||||
bool isSubscribed;
|
||||
Color? backgroundColor;
|
||||
late Color textColor;
|
||||
|
||||
SubscriptionsCard({Key? key, this.isSubscribed = false, this.backgroundColor}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
textColor = backgroundColor == null ? Colors.black : Colors.white;
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: "Silver Plan".toText(
|
||||
fontSize: 18,
|
||||
color: textColor,
|
||||
),
|
||||
),
|
||||
if (isSubscribed)
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
color: MyColors.white,
|
||||
padding: const EdgeInsets.all(2),
|
||||
child: const Icon(
|
||||
Icons.done,
|
||||
size: 8,
|
||||
color: MyColors.primaryColor,
|
||||
),
|
||||
).toCircle(
|
||||
borderRadius: 122,
|
||||
),
|
||||
6.width,
|
||||
"Subscribed".toText(color: Colors.white, isBold: true)
|
||||
],
|
||||
).toContainer(
|
||||
backgroundColor: MyColors.primaryColor,
|
||||
borderRadius: 20,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 6,
|
||||
vertical: 3,
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
6.height,
|
||||
showItem("Ads:", "10"),
|
||||
showItem("Users:", "20"),
|
||||
showItem("Branches:", "5"),
|
||||
14.height,
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
"30,000".toText(
|
||||
fontSize: 26,
|
||||
isBold: true,
|
||||
color: textColor,
|
||||
),
|
||||
2.width,
|
||||
"SAR/Month".toText(
|
||||
color: MyColors.lightTextColor,
|
||||
fontSize: 16,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (!isSubscribed)
|
||||
Row(
|
||||
children: [
|
||||
"Upgrade".toText(
|
||||
fontSize: 14,
|
||||
color: textColor,
|
||||
),
|
||||
4.width,
|
||||
const Icon(
|
||||
Icons.arrow_forward,
|
||||
size: 16,
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
if (isSubscribed)
|
||||
Row(
|
||||
children: [
|
||||
"Expires on 3 Mar, 2023".toText(
|
||||
fontSize: 14,
|
||||
color: textColor,
|
||||
),
|
||||
6.width,
|
||||
"Renew".toText(
|
||||
color: MyColors.primaryColor,
|
||||
fontSize: 14,
|
||||
textDecoration: TextDecoration.underline,
|
||||
isBold: true,
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
).toWhiteContainer(
|
||||
width: double.infinity,
|
||||
allPading: 12,
|
||||
backgroundColor: backgroundColor,
|
||||
margin: const EdgeInsets.symmetric(
|
||||
horizontal: 21,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget showItem(String title, String value) {
|
||||
return Row(
|
||||
children: [
|
||||
title.toText(
|
||||
fontSize: 14,
|
||||
color: textColor,
|
||||
),
|
||||
2.width,
|
||||
value.toText(
|
||||
fontSize: 14,
|
||||
color: textColor,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue