feat: wip plan view, and component numeric pad #9
|
@ -33,6 +33,10 @@ class PathAssets {
|
|||
static const String iconMoneyReceive = 'assets/icons/icon-money-receive.png';
|
||||
static const String iconCoins = 'assets/icons/icon-coins.png';
|
||||
static const String iconQuestion = 'assets/icons/icon-question.png';
|
||||
static const String iconCake = 'assets/icons/icon-cake.png';
|
||||
static const String iconHouse = 'assets/icons/icon-house.png';
|
||||
static const String iconToga = 'assets/icons/icon-toga.png';
|
||||
static const String iconCreatePlan = 'assets/icons/icon-create-plan.png';
|
||||
|
||||
/// IMAGE
|
||||
static const String imgSplashLogo = 'assets/images/splash-logo.png';
|
||||
|
|
|
@ -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) {
|
42
lib/application/component/custom_app_bar/custom_app_bar.dart
Normal file
42
lib/application/component/custom_app_bar/custom_app_bar.dart
Normal 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
46
lib/application/component/goal_investing_view.dart
Normal 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
109
lib/application/component/numeric_pad/numeric_pad.dart
Normal 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,
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
import 'package:cims_apps/application/assets/path_assets.dart';
|
||||
import 'package:cims_apps/application/component/button/button_back.dart';
|
||||
import 'package:cims_apps/application/component/button/back_button_view.dart';
|
||||
import 'package:cims_apps/application/component/button/button_view.dart';
|
||||
import 'package:cims_apps/application/component/image/image_view.dart';
|
||||
import 'package:cims_apps/application/component/text_form/text_form_view.dart';
|
||||
|
@ -61,7 +61,7 @@ class _LoginViewState extends State<LoginView> {
|
|||
title: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
ButtonBack(),
|
||||
BackButtonView(),
|
||||
const Text('Sign In'),
|
||||
SizedBox(
|
||||
width: SizeConfig.width * 0.1,
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import 'package:cims_apps/application/assets/path_assets.dart';
|
||||
import 'package:cims_apps/application/component/button/button_view.dart';
|
||||
import 'package:cims_apps/application/component/image/image_view.dart';
|
||||
import 'package:cims_apps/application/component/numeric_pad/numeric_pad.dart';
|
||||
import 'package:cims_apps/application/component/text_form/text_form_view.dart';
|
||||
import 'package:cims_apps/application/component/text_title/text_title.dart';
|
||||
import 'package:cims_apps/application/theme/color_palette.dart';
|
||||
|
@ -35,6 +36,7 @@ class PhoneNumberView extends StatelessWidget {
|
|||
inputFormatters: [
|
||||
FilteringTextInputFormatter.deny(RegExp(r'^0'))
|
||||
],
|
||||
contentPadding: EdgeInsets.all(1),
|
||||
prefixIcon: Container(
|
||||
width: SizeConfig.width * .23,
|
||||
padding:
|
||||
|
@ -108,6 +110,10 @@ class PhoneNumberView extends StatelessWidget {
|
|||
)
|
||||
)
|
||||
],
|
||||
),
|
||||
NumericPad(
|
||||
onNumberSelected: (p0) {
|
||||
},
|
||||
)
|
||||
],
|
||||
),
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import 'package:cims_apps/application/assets/path_assets.dart';
|
||||
import 'package:cims_apps/application/component/button/button_back.dart';
|
||||
import 'package:cims_apps/application/component/button/back_button_view.dart';
|
||||
import 'package:cims_apps/application/component/button/button_view.dart';
|
||||
import 'package:cims_apps/application/component/image/image_view.dart';
|
||||
import 'package:cims_apps/application/component/text_caption/text_caption.dart';
|
||||
|
@ -93,7 +93,7 @@ class GuideScreen extends StatelessWidget {
|
|||
title: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
const ButtonBack(),
|
||||
const BackButtonView(),
|
||||
const Text('Guide'),
|
||||
SizedBox(
|
||||
width: SizeConfig.width * 0.1,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import 'package:cims_apps/application/assets/path_assets.dart';
|
||||
import 'package:cims_apps/application/component/button/button_back.dart';
|
||||
import 'package:cims_apps/application/component/button/back_button_view.dart';
|
||||
import 'package:cims_apps/application/component/button/button_view.dart';
|
||||
import 'package:cims_apps/application/component/image/image_view.dart';
|
||||
import 'package:cims_apps/application/theme/color_palette.dart';
|
||||
|
@ -37,7 +37,7 @@ class _QuestionViewState extends State<QuestionView> {
|
|||
title: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
ButtonBack(),
|
||||
BackButtonView(),
|
||||
const Text('Risk Profile', textAlign: TextAlign.center),
|
||||
SizedBox(width: SizeConfig.width * 0.1)
|
||||
],
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import 'package:cims_apps/application/assets/path_assets.dart';
|
||||
import 'package:cims_apps/application/component/button/button_back.dart';
|
||||
import 'package:cims_apps/application/component/button/back_button_view.dart';
|
||||
import 'package:cims_apps/application/component/button/button_view.dart';
|
||||
import 'package:cims_apps/application/component/image/image_view.dart';
|
||||
import 'package:cims_apps/application/theme/color_palette.dart';
|
||||
|
@ -26,7 +26,7 @@ class ResultsView extends StatelessWidget {
|
|||
title: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
ButtonBack(),
|
||||
BackButtonView(),
|
||||
const Text('Risk Profile', textAlign: TextAlign.center),
|
||||
SizedBox(
|
||||
width: SizeConfig.width * 0.1
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import 'package:cims_apps/application/assets/path_assets.dart';
|
||||
import 'package:cims_apps/application/component/button/button_back.dart';
|
||||
import 'package:cims_apps/application/component/button/back_button_view.dart';
|
||||
import 'package:cims_apps/application/component/button/button_view.dart';
|
||||
import 'package:cims_apps/application/component/image/image_view.dart';
|
||||
import 'package:cims_apps/application/theme/color_palette.dart';
|
||||
|
@ -22,7 +22,7 @@ class RiskProfileView extends StatelessWidget {
|
|||
title: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
ButtonBack(),
|
||||
BackButtonView(),
|
||||
const Text('Risk Profile', textAlign: TextAlign.center),
|
||||
SizedBox(width: SizeConfig.width * 0.1)
|
||||
],
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import 'package:cims_apps/application/theme/color_palette.dart';
|
||||
import 'package:cims_apps/features/dashboard/dashboard_account/view/homepage/homepage_view.dart';
|
||||
import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/plan_view.dart';
|
||||
import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
|
@ -18,9 +19,7 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
|
|||
///TODO: masukan pagenya dilistWidget ini
|
||||
List<Widget> listWidget = [
|
||||
HomeView(),
|
||||
Container(
|
||||
color: Colors.redAccent,
|
||||
),
|
||||
PlanView(),
|
||||
Container(),
|
||||
PortofolioView(),
|
||||
Container(),
|
||||
|
@ -32,8 +31,8 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
|
|||
label: 'Home',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(Icons.search),
|
||||
label: 'Search',
|
||||
icon: Icon(Icons.file_open),
|
||||
label: 'Plan',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(Icons.compare_arrows),
|
||||
|
@ -51,7 +50,10 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
|
|||
|
||||
return Scaffold(
|
||||
body: listWidget[_selectedIndex],
|
||||
bottomNavigationBar: BottomNavigationBar(
|
||||
bottomNavigationBar: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
child: BottomNavigationBar(
|
||||
elevation: 0,
|
||||
onTap: (value) {
|
||||
setState(() {
|
||||
_selectedIndex = value;
|
||||
|
@ -66,6 +68,7 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
|
|||
selectedLabelStyle: const TextStyle(color: ColorPalette.primary),
|
||||
unselectedLabelStyle: const TextStyle(color: Colors.black),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import 'package:cims_apps/application/assets/path_assets.dart';
|
||||
import 'package:cims_apps/application/component/button/button_back.dart';
|
||||
import 'package:cims_apps/application/component/button/back_button_view.dart';
|
||||
import 'package:cims_apps/application/component/image/image_view.dart';
|
||||
import 'package:cims_apps/application/component/text_title/text_title.dart';
|
||||
import 'package:cims_apps/application/theme/color_palette.dart';
|
||||
|
@ -53,7 +53,7 @@ class _InvestTypeViewState extends State<InvestTypeView> {
|
|||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
const ButtonBack(),
|
||||
const BackButtonView(),
|
||||
TextTitle(title: widget.title, color: Colors.white),
|
||||
SizedBox(
|
||||
width: SizeConfig.width * 0.1,
|
||||
|
|
|
@ -0,0 +1,22 @@
|
|||
import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
|
||||
import 'package:cims_apps/application/component/goal_investing_view.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class PlanView extends StatelessWidget {
|
||||
const PlanView({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: CustomAppBar(height: 70, title: 'Investment Plan'),
|
||||
body: SingleChildScrollView(
|
||||
padding: EdgeInsets.all(24),
|
||||
child: Column(
|
||||
children: [
|
||||
GoalInvestingView()
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,7 +1,7 @@
|
|||
import 'dart:math';
|
||||
|
||||
import 'package:cims_apps/application/assets/path_assets.dart';
|
||||
import 'package:cims_apps/application/component/button/button_back.dart';
|
||||
import 'package:cims_apps/application/component/button/back_button_view.dart';
|
||||
import 'package:cims_apps/application/component/button/button_view.dart';
|
||||
import 'package:cims_apps/application/component/image/image_view.dart';
|
||||
import 'package:cims_apps/application/component/text_form/text_form_view.dart';
|
||||
|
@ -112,7 +112,7 @@ class _ProductViewState extends State<ProductView> {
|
|||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
ButtonBack(),
|
||||
BackButtonView(),
|
||||
Wrap(
|
||||
spacing: 12,
|
||||
children: [
|
||||
|
|
Loading…
Reference in New Issue
Block a user