원가계산기 CardWidget

 

원가계산기에 #4에 들어갈 커스텀 CardWidget을 만들었다. 

Slidable 패키지를 사용해서 옆으로 쓸면 카드가 삭제가 되는 기능도 넣었다. 

카드 위젯이라 Index정보가 없다. 이건 #4페이지에 리스트를 만들면서 진행해야겠다. 

 

class 모델을 사용하는 방법이 조금씩 이해가 되가고 있다. 

역시 이해가 안되면 그냥 더 하면 되는 것 같다...ㅋㅋ

 

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:recipe_calculator1230/model/calculator_model.dart';
import 'package:recipe_calculator1230/model/ingredient.dart';




class CardWidget extends StatelessWidget {

  final CalculaotrRecipe  calculatorrecipe;
  final Ingredient ingredient;

  const CardWidget({
    Key? key,required this.calculatorrecipe,required this.ingredient
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Slidable(
      key: const ValueKey(0),
      startActionPane: ActionPane(
        motion: const ScrollMotion(),
        dismissible: DismissiblePane(onDismissed: () {}),
        children: [
          const SizedBox(
            width: 2,
          ),
          SlidableAction(
            borderRadius: BorderRadius.circular(16),
            onPressed: (_) {},
            backgroundColor: const Color(0xff2da9ef),
            foregroundColor: Colors.white,
            icon: Icons.done_outline_rounded,
            label: 'Done',
          ),
          const SizedBox(
            width: 2,
          ),
          SlidableAction(
            borderRadius: BorderRadius.circular(16),
            onPressed: (_) {},
            backgroundColor: const Color(0xFFFE4A49),
            foregroundColor: Colors.white,
            icon: Icons.delete,
            label: 'Remove',
          ),
        ],
      ),
      child: Card(
        elevation: 8,
        shadowColor: const Color(0xff2da9ef),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(
            10,
          ),
        ),
        child: Container(
          width: 200,
          height: 80,
          child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(onPressed: (){}, child: Text('${ingredient.name}'),),
              Text('${ingredient.gramprice}'),//g/원
              SizedBox(height : 20,width: 50,
                  child: TextField()),
              Text('${calculatorrecipe.recipePrice}원'), //총합계
            ],
          ),

        ),
      ),
    );
  }
}