cims_apps/lib/application/component/subscribe/other_plan_view.dart

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/custom_app_bar/custom_app_bar.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/component/text_form/text_form_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 Plan {
  String img, name;

  Plan(this.img, this.name);
}

class OtherPlanView extends StatefulWidget {
  final void Function(String value) selectedPlan;
  const OtherPlanView({super.key, required this.selectedPlan});

  @override
  State<OtherPlanView> createState() => _OtherPlanViewState();
}

class _OtherPlanViewState extends State<OtherPlanView> {
  TextEditingController createController = TextEditingController();
  Plan selectedPlan = Plan('', '');

  List<Plan> listPlan = [
    Plan(PathAssets.iconToga, 'Education'),
    Plan(PathAssets.iconCake, 'Marriage'),
    Plan(PathAssets.iconHouse, 'Home'),
    Plan(PathAssets.iconTicket, 'Entertainment'),
    Plan(PathAssets.iconGadget, 'Gadget'),
    Plan(PathAssets.iconMarket, 'Business'),
    Plan(PathAssets.iconBag, 'Fashion'),
    Plan(PathAssets.iconCart, 'Shop'),
    Plan(PathAssets.iconCar, 'Vehicle'),
    Plan(PathAssets.iconPlane, 'Holiday'),
    Plan(PathAssets.iconCreatePlan, 'Create Plan'),
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    createController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(
        height: 70,
        title: 'Other Plan'
      ),
      body: GridView(
        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 32),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        children: listPlan.map((e) => cardPlan(e)).toList(),
      ),
      bottomNavigationBar: Container(
        height: 110,
        padding: EdgeInsets.symmetric(horizontal: 24),
        child: ButtonView(
          name: 'Select',
          disabled: !(selectedPlan.img != ''),
          onPressed: () {
            Navigator.pop(context);
            widget.selectedPlan(selectedPlan.name);
          },
          heightWrapContent: true,
          width: SizeConfig.width,
          contentPadding: EdgeInsets.symmetric(vertical: 12),
          textColor: selectedPlan.img == '' ? ColorPalette.slate500 : ColorPalette.white,
          disabledBgColor: ColorPalette.slate200,
          backgroundColor: ColorPalette.primary,
        ),
      ),
    );
  }

  Widget cardPlan(Plan plan) {
    return GestureDetector(
      onTap: () {
        if(plan.name == 'Create Plan'){
          showModalBottomSheet(
            context: context,
            builder: (context) => modalCreatePlan(),
          );
        }
        setState(() {
          selectedPlan = plan;
        });
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          border: Border.all(color: selectedPlan == plan ? ColorPalette.primary : Colors.transparent)
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: SizeConfig.width * 0.12,
              height: SizeConfig.width * 0.12,
              padding: EdgeInsets.all(12),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: ColorPalette.blue200.withOpacity(0.5)
              ),
              child: ImageView(image: plan.img)
            ),
            SizedBox(height: 12),
            Text(plan.name,
              style: TextStyle(
                color: selectedPlan == plan ? ColorPalette.primary : ColorPalette.slate800,
                fontWeight: FontWeight.w600
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget modalCreatePlan() {
    return Container(
      padding: EdgeInsets.all(24),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Create your plan',
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  color: ColorPalette.slate800,
                  fontSize: 16
                ),
              ),
              GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Icon(Icons.close_rounded),
              )
            ],
          ),
          TextFormView(
            name: 'Objective Name',
            ctrl: createController,
          ),
          SizedBox(height: 24),
          ButtonView(
            name: 'Select',
            marginVertical: 0,
            disabled: !(createController.text != ''),
            onPressed: () {
              Navigator.of(context)..pop()..pop();
              widget.selectedPlan(selectedPlan.name);
            },
            heightWrapContent: true,
            width: SizeConfig.width,
            contentPadding: EdgeInsets.symmetric(vertical: 16),
            textColor: createController.text == '' ? ColorPalette.slate500 : ColorPalette.white,
            disabledBgColor: ColorPalette.slate200,
            backgroundColor: ColorPalette.primary,
          ),
        ],
      ),
    );
  }
}