[Flutter Project] 플레이어 설정 만들기

✅시작

플레이어를 이름을 설정할 수 있는 기능 만들기,

1️⃣ 기본 이름은 플레이어1~플레이어10까지이다.

2️⃣ 플레이어의 이름이 변경된 후 추가되는 플레이어가 있을 경우 기존 플레이어의 이름은 그대로여야한다.

3️⃣ 플레이어의 이름이 변경된 후 빠지는 플레이어는 뒤에서 부터 빠진다.

 

☑️Code

Padding(
    padding: EdgeInsets.all(10.r),
    child:Divider(height: 5.h,thickness: 2,color: const Color(0xffaecdff),)),
Get.put(SettingController()).playerList.isEmpty ?
 Expanded(child: Text('먼저 인원수를 지정한 후,\n설정페이지로 들어와주세요.', style: TextStyle(color:Colors.red, fontWeight: FontWeight.bold,fontSize: 20.sp),textAlign: TextAlign.center,)) :
Expanded(
  child: Container(
    padding:  EdgeInsets.symmetric(horizontal: 16.w),
    child: ListView.separated(
      itemCount: Get.put(SettingController()).playerList.length,
      itemBuilder: (BuildContext ctx, int index){
        return Container(
          color: Colors.white,
          height: 30.h,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                   SizedBox(width: 10.w,),
                  Text('${index+1}', style:  TextStyle(fontSize: 15.sp, fontWeight: FontWeight.bold),),
                   SizedBox(width: 30.w,),
                  Image.asset(Get.put(SettingController()).playerList[index].image, height: 30.h),
                   SizedBox(width: 20.w,),
                  SizedBox(
                    height: 60.h,
                    width: 200.w,
                    child: TextFormField(
                      controller:  Get.put(PlayerSettingController()).txtController[index],
                      decoration: InputDecoration(
                        contentPadding:  EdgeInsets.symmetric(vertical: 6.h),
                        hintText: Get.put(SettingController()).playerList[index].name,
                        hintStyle: TextStyle(color: Colors.grey.withOpacity(0.4)),
                        suffix: IconButton(
                          alignment: Alignment.bottomCenter,
                            icon:  Icon(Icons.clear, color: const Color(0xffaecdff),size: 24.sp,),
                            onPressed: () => Get.put(PlayerSettingController()).txtController[index].clear(),
                          ),
                        enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(
                            color: Colors.grey.withOpacity(0.4),
                          ),
                        ),
                        focusedBorder: const UnderlineInputBorder(
                          borderSide: BorderSide(
                            color: Color(0xffaecdff)
                          )
                        ),
                      ),
                      cursorColor: const Color(0xffaecdff),
                      style:  TextStyle(
                        fontSize: 16.sp, color: const Color(0xffaecdff), fontWeight: FontWeight.bold
                      ),
                      textAlignVertical: TextAlignVertical.bottom,
                    ),
                  )
                ],
              ),
            ],
          ),
        );
      },
      separatorBuilder: (BuildContext ctx, int index){
        return  const Divider();
      },
    ),
  ),
),

플레이어 수를 지정하지 않고 들어갈 경우 플레이어 설정 후 들어오라는 문구 출력,

플레이어수가 지정되있으면 ListView로 플레이어 리스트가 나타나고 전에 이름은 hint text로 나타남,

 

 

☑️Controller Code

class PlayerSettingController extends GetxController{
  List<TextEditingController> txtController = [];

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

  void makeTxtController(){
    for(var i =0; i<Get.put(SettingController()).playerList.length; i++){
      txtController.add(TextEditingController());
    }
  }

  void saveTXT(){
    for(var i = 0; i< Get.put(SettingController()).playerList.length;i++){
      if((Get.put(SettingController()).playerList[i].name = txtController[i].text).isNotEmpty) {
        Get.put(SettingController()).playerList[i].name = txtController[i].text;
      }else if(txtController[i].text.isEmpty){
        Get.put(SettingController()).playerList[i].name = '플레이어${i+1}';
      }
    }
  }
}

컨트롤러가 실행될 때, (플레이어 설정 페이지가 켜질 때) 플레이어 수만큼 TextEditController를 생성해준 후 리스트에 표시

저장을 누르면 SettingController에있는 PlayerList에 name에 넣어주고 TextEdit의 text가 비어있을 경우 기본 이름으로 들어가도록 만들었다.

 

그리고 저장을 하지 않고 나갈경우 다이얼로그로 저장되지 않았음을 경고해주게 했다.

for(var i = 0; i< Get.put(PlayerSettingController()).txtController.length;i++){
  if(Get.put(PlayerSettingController()).txtController[i].text != Get.put(SettingController()).playerList[i].name){
    backWarn();
    break;
  }
  if(i == Get.put(PlayerSettingController()).txtController.length-1){
    Get.back();
  }
}

❌ 구성상 텍스트 필드에서 전에 쓰던 이름은 hint로 표시되고, text는 비어 있는 상태라 기존이름이 저장 되지않음.

 

✔️개선

for(var i = 0; i< Get.put(PlayerSettingController()).txtController.length; i++){
  if(Get.put(PlayerSettingController()).txtController[i].text.isNotEmpty && Get.put(PlayerSettingController()).txtController[i].text != Get.put(SettingController()).playerList[i].name){
    backWarn();
    break;
  }else{
    if(i == Get.put(PlayerSettingController()).txtController.length - 1){
      Get.back();
    }
  }
}

 

✅결과