[flutter 프로젝트] 개발일지 02

---

오늘의 목표

• MySetting부분 화면 구현

---

수행한 작업

1. Setting 부분
2. mvvm 구조로 변경하기

---

문제 및 해결 방법

문제:

• Switch를 모양이 변경이 안됨?

해결 방법:

• 모양이 Cupertino의 Switch가 있고, Material의 Switch가 두종류 존재한다.
• 조금더 다양한 커스텀을 하고싶다면 MateralSwitch를 사용하지만, 아이폰의 스위치 모양을 하고싶다면 Cupertino를 사용함

---

성과 및 배운 점

• 상태관리와 mvvm 모델을 구성하여 사용해봤다.
  일단 간단한걸로 userSetting에 관한것을 객체를 생성하고, 해당 부분의 view_model를 만들어 상태관리를 조정해보았다.

Notification_toggle

import 'package:applus_market/theme.dart';
import 'package:applus_market/view_models/my/user_app_setting_store.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class NotificationToggle extends ConsumerStatefulWidget {
  const NotificationToggle({super.key});

  @override
  ConsumerState<NotificationToggle> createState() => _NotificationToggleState();
}

class _NotificationToggleState extends ConsumerState<NotificationToggle> {
  @override
  Widget build(BuildContext context) {
    final state = ref.watch(UserAppsettingProvider);
    final notifier = ref.read(UserAppsettingProvider.notifier);

    return Container(
      width: 100,
      height: 50,
      child: Transform.scale(
        scale: 0.8,
        child: CupertinoSwitch(
          value: state.isAlarmed,
          onChanged: (bool value) {
            setState(() {
              notifier.toggleAlarm();
            });
          },
          // activeColor: APlusTheme.labelTertiary,
        ),
      ),
    );
  }
}

UserAppSetting

import 'dart:ffi';

/*
  2025.1.22 하진희 : 유저 휴태폰 셋팅 객체
 */
class UserAppSetting {
  int user_id;
  bool isAlarmed;
  UserAppSetting({required this.user_id, this.isAlarmed = false});

  UserAppSetting init(UserAppSetting mySetting) {
    return UserAppSetting(
        user_id: mySetting.user_id, isAlarmed: mySetting.isAlarmed);
  }
}

view_model

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../../models/my/user_app_setting_state.dart';

class UserAppSettingNotifier extends Notifier<UserAppSetting> {
  @override
  UserAppSetting build() {
    // TODO: implement build
    return UserAppSetting(user_id: 1, isAlarmed: true);
  }

  void toggleAlarm() {
    state.isAlarmed = !state.isAlarmed;
  }
}

final UserAppsettingProvider =
    NotifierProvider<UserAppSettingNotifier, UserAppSetting>(
  () => UserAppSettingNotifier(),
);

내일의 계획

• 아이디찾기, 비밀번호찾기 화면구현

---

참고

• https://api.flutter.dev/flutter/material/Switch-class.html

• https://api.flutter.dev/flutter/cupertino/CupertinoSwitch-class.html

  [Switch class - material library - Dart API

A Material Design switch. Used to toggle the on/off state of a single setting. The switch itself does not maintain any state. Instead, when the state of the switch changes, the widget calls the onChanged callback. Most widgets that use a switch will listen

api.flutter.dev](https://api.flutter.dev/flutter/material/Switch-class.html)

[CupertinoSwitch class - cupertino library - Dart API

An iOS-style switch. Used to toggle the on/off state of a single setting. The switch itself does not maintain its toggle state. Instead, when the toggle state of the switch changes, the widget calls the onChanged callback. Most widgets that use a switch wi

api.flutter.dev](https://api.flutter.dev/flutter/cupertino/CupertinoSwitch-class.html)