trackoffical_app/lib/view/ingame/process_card.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trackoffical_app/model/m_control_point.dart';
import '../../service/game/game.dart';

class ProcessCard extends GetView<GameService> {
  const ProcessCard({super.key});

  final cardHeight = 50.0;
  final cardWidth = 62.0;

  Widget _divider({required Color color}){
    return Image.asset('assets/images/ic_arrow2_up.png',
        height: 16,
        width: 16,
        color: color);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Obx((){
          final out = <Widget>[];
          final p = controller.getNextWantPoint(1);
          if(p != null){
             out.add(_ProcessCardOne(
               color: const Color(0xffd8d8d8),
               sn: p.sn,
               id: p.areaId,
               height: cardHeight,
               width: cardWidth,
             ));
            out.add(_divider(color: const Color(0xff333333)));
          }
          return Column(children: out);
        }),
        Obx((){
          final p = controller.getNextWantPoint(0);
          var sn = '--';
          var id = '--';
          if (p != null){
            sn = p.sn;
            id = p.areaId;
          }
          return _ProcessCardOne(
            color: const Color(0xffff870d),
            title: '请前往',
            sn: sn,
            id: id,
            height: cardHeight,
            width: cardWidth,
          );
        }),
        // Obx((){
        //
        //   final out = <Widget>[];
        //   final p = controller.getLastCheckedPoint();
        //   if(p != null){
        //     out.add(_divider(color: const Color(0xff333333)));
        //     out.add(_ProcessCardOne(
        //       title: '当前点',
        //       color: p.success?const Color(0xff00ca93):const Color(0xffff4848),
        //       sn: p.sn,
        //       id: p.id,
        //       height: cardHeight,
        //       width: cardWidth,
        //     ));
        //
        //   }
        //   return Column(children: out);
        // })
      ],
    );
  }
}

class _ProcessCardOne extends StatelessWidget {
  final Color color;
  final String? title;
  final String sn;
  final String id;
  final double height;
  final double width;

  const _ProcessCardOne(
      {super.key,
      required this.color,
      required this.height,
      required this.width,
      this.title, required this.sn, required this.id});


  Widget _snWidget(String sn){
    if(sn == MControlPoint.snStart){
      return Image.asset('assets/images/ic_point_start.png');
    }else if(sn ==MControlPoint.snFinish){
      return Image.asset('assets/images/ic_point_finish.png');
    }else{
      return Text(sn,
          textAlign: TextAlign.center,
          style: const TextStyle(fontSize: 14, color: Colors.white,
              fontWeight: FontWeight.w900));
    }
  }

  @override
  Widget build(BuildContext context) {
    final children = <Widget>[];
    if (title != null) {
      children.add(Text(title!,
          style: const TextStyle(fontSize: 10, color: Colors.white)));
    }
    children.add(
        Row(
          textBaseline: TextBaseline.alphabetic,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.baseline,
          children: [
            SizedBox(width: 18, height: 16, child:
            _snWidget(sn)
            ),
            const Text('/',
                style: TextStyle(fontSize: 14, color: Colors.white,
                    fontWeight: FontWeight.w900)),
            SizedBox(width: 21, height: 12,child: Text(id,
                style: const TextStyle(fontSize: 10, color: Colors.white,
                    fontWeight: FontWeight.w900, overflow: TextOverflow.clip)))
            ,
          ],
        )

);

    return SizedBox(
      height: height,
      width: width,
      child: Card(
        color: color,
        surfaceTintColor: Colors.white,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: children,
        ),
      ),
    );
  }
}