nugrohob825/cims_apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: wip plan view, and component numeric pad

Browse Source
This commit is contained in:
Prajna Prayoga
2024-02-15 19:55:21 +07:00
parent 8537045d74
commit 7e9c109fa2
15 changed files with 268 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/application/component/button/button_back.dart → lib/application/component/button/back_button_view.dart
View File

@@ -2,10 +2,10 @@ import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:flutter/material.dart';
class ButtonBack extends StatelessWidget {
class BackButtonView extends StatelessWidget {
final EdgeInsets? margin;
final void Function()? onPress;
const ButtonBack({super.key, this.margin, this.onPress});
const BackButtonView({super.key, this.margin, this.onPress});
@override
Widget build(BuildContext context) {
@@ -16,7 +16,7 @@ class ButtonBack extends StatelessWidget {
style: IconButton.styleFrom(
backgroundColor: Colors.white,
shape: const CircleBorder(
side: BorderSide(color: ColorPalette.slate200)
side: BorderSide(color: ColorPalette.slate200)
)
),
onPressed: onPress ?? () => Navigator.pop(context),

42
lib/application/component/custom_app_bar/custom_app_bar.dart Normal file
View File

@@ -0,0 +1,42 @@
import 'package:cims_apps/application/component/button/back_button_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:flutter/material.dart';
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
final Widget? leading;
final String title;
final List<Widget>? trailing;
final double height;
const CustomAppBar({
Key? key,
required this.height,
this.leading,
required this.title,
this.trailing,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: ColorPalette.slate200))
),
child: AppBar(
toolbarHeight: 70,
backgroundColor: Colors.white,
surfaceTintColor: Colors.white,
automaticallyImplyLeading: false,
leadingWidth: 40,
leading: leading ?? BackButtonView(),
title: Text(title),
centerTitle: true,
actions: trailing ?? [],
),
);
}
@override
Size get preferredSize => Size.fromHeight(height);
}

46
lib/application/component/goal_investing_view.dart Normal file
View File

@@ -0,0 +1,46 @@
import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:flutter/material.dart';
class GoalInvest {
String icon;
String title;
GoalInvest(this.icon, this.title);
}
class GoalInvestingView extends StatelessWidget {
const GoalInvestingView({super.key});
@override
Widget build(BuildContext context) {
List<GoalInvest> listGoalInvest = [
GoalInvest(PathAssets.iconToga, 'Education'),
GoalInvest(PathAssets.iconCake, 'Marriage'),
GoalInvest(PathAssets.iconHouse, 'Old age days'),
GoalInvest(PathAssets.iconCreatePlan, 'Create Plan'),
];
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Your Goal in Investing'),
GestureDetector(
child: Icon(Icons.close_rounded),
),
],
),
...listGoalInvest.asMap().entries.map((e) {
return ListTile(
leading: Image.asset(e.value.icon),
title: Text(e.value.title),
trailing: Icon(Icons.chevron_right_rounded),
);
})
],
);
}
}

109
lib/application/component/numeric_pad/numeric_pad.dart Normal file
View File

@@ -0,0 +1,109 @@
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:flutter/material.dart';
class NumericPad extends StatelessWidget {
final Function(String) onNumberSelected;
final bool isPin;
const NumericPad({super.key, required this.onNumberSelected, this.isPin = false});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
numberWidget('1'),
dividerGradient(false, Alignment.bottomCenter, Alignment.topCenter),
numberWidget('2'),
dividerGradient(false, Alignment.bottomCenter, Alignment.topCenter),
numberWidget('3')
],
),
dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
numberWidget('4'),
dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
numberWidget('5'),
dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
numberWidget('6')
],
),
dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
isPin ? spaceWidget() : numberWidget('0'),
dividerGradient(false, Alignment.topCenter, Alignment.bottomCenter),
numberWidget(isPin ? '0' : '000'),
dividerGradient(false, Alignment.topCenter, Alignment.bottomCenter),
removeWidget()
],
),
],
);
}
Widget dividerGradient(bool isHorizontal, AlignmentGeometry gradientFrom, AlignmentGeometry gradientTo, {bool fullColor = false}) {
return Container(
width: isHorizontal ? SizeConfig.width : 1,
height: isHorizontal ? 1 : SizeConfig.height * 0.11,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
if(isHorizontal) ...[
ColorPalette.slate200.withOpacity(0)
],
ColorPalette.slate200,
fullColor ? ColorPalette.slate200 : ColorPalette.slate200.withOpacity(0)
],
begin: gradientFrom,
end: gradientTo
)
),
);
}
Widget spaceWidget() {
return Expanded(
child: SizedBox()
);
}
Widget numberWidget(String number) {
return Expanded(
child: GestureDetector(
onTap: () {
onNumberSelected(number);
},
child: Container(
padding: EdgeInsets.symmetric(vertical: SizeConfig.height * .028),
child: Text(
number,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold
),
),
),
)
);
}
Widget removeWidget() {
return Expanded(
child: Icon(
Icons.highlight_remove,
size: 28,
)
);
}
}