Flutter async await에서 setState의 올바른 사용 방법

Chance·2024년 6월 10일

Flutter 코드에서 setState를 잘못 사용하고 있는 것이 문제입니다. setState 메서드는 async로 사용해서는 안 됩니다.
async 로직은 setState 외부에서 처리하고 상태 업데이트는 setState 내부에서 처리해야 합니다.

Material(
  color: Colors.transparent,
  child: InkWell(
    onTap: () async {
      final DateTime? birthDate = await showDatePicker(
        context: context,
        initialEntryMode: DatePickerEntryMode.calendarOnly,
        firstDate: DateTime(1950),
        lastDate: DateTime(3000),
      );

      if (birthDate != null) {
        setState(() {
          _birth = '${birthDate.year}-${birthDate.month}-${birthDate.day}';
        });
      }
    },
    child: Container(
      height: 56.h,
      width: MediaQuery.of(context).size.width,
      child: Row(
        children: [
          Padding(
            padding: EdgeInsets.only(left: 10.w),
            child: Text(
              _birth.isNotEmpty ? _birth : '생년월일을 선택해주세요.',
            ),
          ),
        ],
      ),
    ),
  ),
);

async 키워드는 onTap 메서드에 사용됩니다.
await showDatePicker 호출은 setState 외부에 있습니다.
setState 호출은 birthDate가 선택된 후에 상태를 업데이트하는 데만 사용됩니다.
이렇게 하면 상태가 제대로 업데이트되어 UI가 변경 사항을 반영합니다.

0개의 댓글