feat: wip plan view, and component numeric pad

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

View File

@ -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';

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),

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);
}

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),
);
})
],
);
}
}

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,
)
);
}
}

View File

@ -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,

View File

@ -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) {
},
)
],
),

View File

@ -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,

View File

@ -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)
],

View File

@ -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

View File

@ -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)
],

View File

@ -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,20 +50,24 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
return Scaffold(
body: listWidget[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: (value) {
setState(() {
_selectedIndex = value;
});
},
currentIndex: _selectedIndex,
items: listNavigation,
type: BottomNavigationBarType.fixed,
showUnselectedLabels: true,
selectedItemColor: ColorPalette.primary,
unselectedItemColor: Colors.black,
selectedLabelStyle: const TextStyle(color: ColorPalette.primary),
unselectedLabelStyle: const TextStyle(color: Colors.black),
bottomNavigationBar: Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: BottomNavigationBar(
elevation: 0,
onTap: (value) {
setState(() {
_selectedIndex = value;
});
},
currentIndex: _selectedIndex,
items: listNavigation,
type: BottomNavigationBarType.fixed,
showUnselectedLabels: true,
selectedItemColor: ColorPalette.primary,
unselectedItemColor: Colors.black,
selectedLabelStyle: const TextStyle(color: ColorPalette.primary),
unselectedLabelStyle: const TextStyle(color: Colors.black),
),
),
);
}

View File

@ -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,

View File

@ -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()
],
),
),
);
}
}

View File

@ -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: [