[굿위시 제작기] 11. 굿즈 추가 페이지 제작과정 - 굿즈와 위시 변경 버튼

 

 

---

굿즈 <-> 위시 모드 변경하기

굿즈 추가 페이지의 상단을 보면, [GoodsList | WishList] 버튼이 있습니다.

굿즈 추가 페이지를 통해, GoodsList와 WishList를 작성할 수 있는 기능을 구현하기 위해 이 버튼을 만들었습니다.

 

 

 

 

 

버튼을 클릭하면 오른쪽 사진처럼 Add Wish로 전환됩니다.

버튼을 누르면 GoodsListProvider와 연결되어서 굿즈 정보를 추가하거나, WishListProvider와 연결되어서 위시 정보를 추가할 수 있게 만드는 것이 목표입니다.

 

 

 

 

 

 

---

AddGoodsPage의 코드 분석

import 'package:flutter/material.dart';
import 'package:goodwishes/constants/ui_numbers.dart';
import 'package:goodwishes/widgets/goods/add_goods_list.dart';
import 'package:goodwishes/widgets/wish/add_wish_list.dart';
import 'package:goodwishes/widgets/change_goods_wish_button.dart';
import 'package:goodwishes/widgets/top_with_profile.dart';

class AddGoodsPage extends StatefulWidget {
  const AddGoodsPage({
    super.key,
  });

  @override
  State<AddGoodsPage> createState() => _AddGoodsPageState();
}

class _AddGoodsPageState extends State<AddGoodsPage> {
  bool isGoods = true;
  @override
  Widget build(BuildContext context) {
    void isGoodsChangeHandler() {
      setState(() {
        isGoods = !isGoods;
      });
    }

    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(
                horizontal: UIDefault.pageHorizontalPadding),
            child: TopWithProfile(title: isGoods ? 'Add Goods' : 'Add Wish'),
          ),
          const SizedBox(
            height: UIDefault.sizedBoxHeight,
          ),
          ChangeGoodsWishButton(
            isGoods: isGoods,
            onClick: isGoodsChangeHandler,
          ),
          const SizedBox(
            height: UIDefault.sizedBoxHeight,
          ),
          isGoods ? const AddGoodsList() : const AddWishList(),
        ],
      ),
    );
  }
}

위 코드가 굿즈 추가 페이지의 코드인데, StatefulWidget으로 제작되었습니다.

 

 

 

그리고 isGoods라는 state와, 이 state를 변경하기 위한 handler 함수가 있습니다.

 

 

 

 

 

isGoods가 true(기본값)일 경우 AddGoodsList

isGoods가 false일 경우 AddWishList가 출력되는 구조입니다.

 

 

 

 

굿즈와 위시는 각각 다른 정보를 입력받도록 되어 있습니다.

버튼을 누르면, 자동으로 각 스타일에 맞는 Input 위젯들이 출력됩니다.

 

 

 

---

ChangeGoodsWishButton의 코드 분석

          ChangeGoodsWishButton(
            isGoods: isGoods,
            onClick: isGoodsChangeHandler,
          ),

굿즈와 위시모드를 설정해주는 버튼은 'ChangeGoodsWishButton'이라는 커스텀 위젯입니다.

isGoods state와, isGoods의 값을 변경해주는 handler 함수를 onClick 속성으로 전달받습니다.

 

 

 

 

import 'package:flutter/material.dart';
import 'package:goodwishes/constants/ui_numbers.dart';

class ChangeGoodsWishButton extends StatelessWidget {
  final bool isGoods;
  final Function onClick;

  const ChangeGoodsWishButton({
    super.key,
    required this.isGoods,
    required this.onClick,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        onClick();
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GoodsButton(
            isGoods: isGoods,
          ),
          WishButton(
            isGoods: isGoods,
          ),
        ],
      ),
    );
  }
}

class GoodsButton extends StatelessWidget {
  final bool isGoods;
  const GoodsButton({
    super.key,
    required this.isGoods,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 30,
      width: 100,
      decoration: BoxDecoration(
        color: isGoods ? UIDefault.activeColor : UIDefault.inactiveColor,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(5),
          bottomLeft: Radius.circular(5),
          bottomRight: Radius.circular(0),
          topRight: Radius.circular(0),
        ),
      ),
      child: const Center(
        child: Text(
          'GoodsList',
          style: TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

class WishButton extends StatelessWidget {
  final bool isGoods;
  const WishButton({
    super.key,
    required this.isGoods,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 30,
      width: 100,
      decoration: BoxDecoration(
        color: isGoods ? UIDefault.inactiveColor : UIDefault.activeColor,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(0),
          bottomLeft: Radius.circular(0),
          bottomRight: Radius.circular(5),
          topRight: Radius.circular(5),
        ),
      ),
      child: const Center(
        child: Text(
          'WishList',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: Color(0xAA000000),
          ),
        ),
      ),
    );
  }
}

 

ChangeGoodsWishButton의 코드 전문입니다.

 

 

ChangeGoodsWishButton은 GoodsButton과 WishButton이라는 자식 위젯을 받습니다.

 

 

 

 

(좌)GoodsButton (우)WishButton

각 버튼은 isGoods의 값에 따라, 버튼의 색상이 달라집니다.

borderRadius 속성도 각 버튼의 위치에 따라 다르게 적용한 모습입니다.

 

 

 

 

끝.