import 'package:cims_apps/application/assets/path_assets.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/theme/color_palette.dart'; import 'package:cims_apps/core/utils/size_config.dart'; import 'package:flutter/material.dart'; class SubscribeDetailView extends StatelessWidget { const SubscribeDetailView({Key? key}) : super(key: key); Widget _stepper( TextTheme textTheme, { required String description, String? date, time, bool isActive = false, bool isDone = false, bool isLast = false, }) { return Container( padding: const EdgeInsets.only(top: 8.0, left: 16.0), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Column( children: [ Padding( padding: const EdgeInsets.only(left: 2.0, top: 8.0), child: Icon( Icons.circle_rounded, size: 10, color: isDone ? ColorPalette.primary : isActive ? ColorPalette.primary : ColorPalette.slate400, ), ), if (!isLast) ConstrainedBox( constraints: BoxConstraints.expand( height: SizeConfig.width * .2, width: 0.0), child: Padding( padding: const EdgeInsets.symmetric(vertical: 4.0), child: VerticalDivider( color: isDone ? ColorPalette.primary : ColorPalette.slate400, thickness: 2.0, ), ), ), ], ), Padding( padding: const EdgeInsets.only(left: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.only(bottom: 8.0), child: Text( description, style: TextStyle( fontSize: 16, fontWeight: FontWeight.w600, color: isDone ? Colors.black87 : isActive ? ColorPalette.primary : ColorPalette.slate400, ), ), ), isDone ? Row( children: [ Text(date ?? ''), const Padding( padding: EdgeInsets.symmetric(horizontal: 4.0), child: Icon( Icons.circle, size: 6, color: ColorPalette.slate400, ), ), Text(time ?? ''), ], ) : const SizedBox(), ], ), ) ], ), ); } Widget _listProduct(BuildContext context) { TextTheme textTheme = Theme.of(context).textTheme; return Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), child: Column( children: [ Row( children: [ ImageView( image: PathAssets.imgProduct, width: SizeConfig.width * .1, ), Padding( padding: const EdgeInsets.only(left: 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Gemilang Dana Kas Maxima', style: textTheme.headlineSmall, ), Container( padding: const EdgeInsets.symmetric( horizontal: 8.0, vertical: 2.0), decoration: BoxDecoration( color: ColorPalette.purple100, border: Border.all( width: 1, color: ColorPalette.purple, ), borderRadius: const BorderRadius.all(Radius.circular(24)), ), child: const Text( 'Money Market', style: TextStyle( color: ColorPalette.purple500, ), )), ], ), ), ], ), Padding( padding: const EdgeInsets.symmetric(vertical: 8.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ const Text('Investment Amount'), Text( 'Rp 2.000.000', style: textTheme.headlineSmall, ), ], ), ), const Divider( color: ColorPalette.slate200, ), ], ), ); } Widget _cardContent(BuildContext context) { TextTheme textTheme = Theme.of(context).textTheme; List mySteps = const [ { 'desc': 'Payment Being Verified', 'date': '07 Feb 2024 ', 'time': '21:01', 'isActive': false, 'isDone': true, 'isLast': false, }, { 'desc': 'Successful Payment', 'date': '07 Feb 2024 ', 'time': '21:01', 'isActive': true, 'isDone': false, 'isLast': false, }, { 'desc': 'Investment Manager Verification', 'date': '07 Feb 2024 ', 'time': '21:01', 'isActive': false, 'isDone': false, 'isLast': false, }, { 'desc': 'Successful Purchase', 'date': '07 Feb 2024 ', 'time': '21:01', 'isActive': false, 'isDone': false, 'isLast': true, }, ]; return SingleChildScrollView( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ const Icon(Icons.access_time, color: ColorPalette.slate400), const Padding( padding: EdgeInsets.symmetric(horizontal: 8.0), child: Text('Waiting for Payment'), ), Text('23:56:42', style: textTheme.headlineSmall), ], ), Padding( padding: const EdgeInsets.symmetric(vertical: 16.0), child: Text('Purchase Details', style: textTheme.headlineSmall), ), Container( margin: const EdgeInsets.symmetric(vertical: 8.0), padding: const EdgeInsets.only(bottom: 16.0), decoration: BoxDecoration( color: Colors.white, border: Border.all(width: 1, color: ColorPalette.slate200), borderRadius: const BorderRadius.all(Radius.circular(12)), ), child: ExpansionTile( shape: ShapeBorder.lerp( const StadiumBorder(side: BorderSide.none), InputBorder.none, 0), title: Row( children: [ ImageView( image: PathAssets.iconEducation, width: SizeConfig.width * .08, ), const Padding( padding: EdgeInsets.only(left: 8.0), child: Text('Education'), ), ], ), subtitle: Padding( padding: const EdgeInsets.only(left: 40.0), child: Text('3 Subscriptions', style: textTheme.bodyMedium), ), children: [ _listProduct(context), _listProduct(context), ], ), ), ...mySteps.map((e) { return _stepper( textTheme, description: '${e['desc']}', date: e['date'], time: e['time'], isActive: e['isActive'], isDone: e['isDone'], isLast: e['isLast'], ); }), Container( margin: const EdgeInsets.symmetric(vertical: 8.0), // padding: const EdgeInsets.only(bottom: 16.0), decoration: BoxDecoration( color: Colors.white, border: Border.all(width: 1, color: ColorPalette.slate200), borderRadius: const BorderRadius.all(Radius.circular(12)), ), child: ExpansionTile( shape: ShapeBorder.lerp( const StadiumBorder(side: BorderSide.none), InputBorder.none, 0), title: Row( children: [ const Expanded( child: Text('When Is My Purchase Complete?')), ImageView( image: PathAssets.imgExpandPurchase, width: SizeConfig.width * .15, ), ], ))), ], ), ); } @override Widget build(BuildContext context) { return Scaffold( body: SizedBox( child: Stack( children: [ const ImageView(image: PathAssets.imgDashboardAccount), Column( children: [ SizedBox(height: SizeConfig.height * .05), Padding( padding: const EdgeInsets.all(16.0), child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ BackButtonView( onPress: () => Navigator.pop(context), ), const Padding( padding: EdgeInsets.symmetric(horizontal: 80.0), child: Text( 'Subscribe Detail', style: TextStyle( fontSize: 18, color: Colors.white, fontWeight: FontWeight.bold, ), ), ), ], ), ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ImageView( image: PathAssets.imgProduct, width: SizeConfig.width * .08, ), const Padding( padding: EdgeInsets.only(left: 8.0), child: Text( 'Shopping Pay', style: TextStyle( fontWeight: FontWeight.bold, color: Colors.white, ), ), ), ], ), const Padding( padding: EdgeInsets.only(top: 8.0), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'No.Subscribe : ', style: TextStyle( fontWeight: FontWeight.normal, color: Colors.white, ), ), Text( 'PI9393084SDMI1', style: TextStyle( fontWeight: FontWeight.bold, color: Colors.white, ), ), ], ), ), Expanded( child: Container( color: Colors.transparent, width: SizeConfig.width, padding: const EdgeInsets.only(top: 32.0), child: Container( margin: const EdgeInsets.only(top: 32.0), padding: const EdgeInsets.only(top: 32.0), decoration: const BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(24), topRight: Radius.circular(24)), ), child: _cardContent(context)), ), ), ], ) ], ), ), ); } }