[Flutter] 컴포넌트화 시킨 버튼 클릭시 이미지 변경

하단 아이콘 클릭시 아이콘 배경 색 및 상단의 이미지 변경

main.dart

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: kPrimaryColor,
        scaffoldBackgroundColor: kPrimaryColor,
      ),
      home: ShoppingCartPage(),
    );
  }
}

class ShoppingCartPage extends StatefulWidget {
  const ShoppingCartPage({Key? key}) : super(key: key);

  @override
  _ShoppingCartPageState createState() => _ShoppingCartPageState();
}

class _ShoppingCartPageState extends State<ShoppingCartPage> {
  int selectedIconNum = 0;
  List<String> selectPic = [
    "assets/p1.jpeg",
    "assets/p2.jpeg",
    "assets/p3.jpeg",
    "assets/p4.jpeg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          _productPic(),
          _productSelector(),
        ],
      ),
    );
  Widget _productSelector() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
        //버튼에 자신의 번호, 선택된 번호, 아이콘, setState를 넘겨줌
          ProductIcon(0, selectedIconNum, Icons.directions_bike, changeIcon),
          ProductIcon(1, selectedIconNum, Icons.motorcycle, changeIcon),
          ProductIcon(
              2, selectedIconNum, CupertinoIcons.car_detailed, changeIcon),
          ProductIcon(3, selectedIconNum, CupertinoIcons.airplane, changeIcon),
        ],
      ),
    );
  }

  Widget _productPic() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: AspectRatio(
        aspectRatio: 5 / 3,
        child: Image.asset(
        //setState로 현재 선택된 num을 받아와 리스트에서 이미지를 찾음
          selectPic[selectedIconNum],
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  void changeIcon(int num) {
  //components의 버튼에 함수를 넘겨 main에서 state를 변경
    setState(() {
      selectedIconNum = num;
    });
  }
}

components/product_icon.dart

import 'package:flutter/material.dart';

import '../constants.dart';

class ProductIcon extends StatelessWidget {
  final int productNum;
  final int selectedIconNum;
  final IconData mIcon;
  final Function changeIcon;

  const ProductIcon(
  //main에서 받아와야하는 값 정의
    this.productNum,
    this.selectedIconNum,
    this.mIcon,
    this.changeIcon, {
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 70,
      height: 70,
      decoration: BoxDecoration(
      // 선택된 버튼, 선택안된 버튼 배경색 삼항 연산자로 정의
        color: productNum == selectedIconNum ? kAccentColor : kSecondaryColor,
        borderRadius: BorderRadius.circular(20),
      ),
      child: IconButton(
        onPressed: () {
        //받아온 change함수에 선택된 num 보내서 main에서 state 변경
          changeIcon(productNum);
        },
        icon: Icon(
          mIcon,
          color: Colors.black,
        ),
      ),
    );
  }
}

참고

https://www.youtube.com/watch?v=adA3vPVlh4Q&list=PL93mKxaRDidG6CYF5M_RbOXGkAGLtM_Ct&index=19