[Flutter/Dart] 팀 소개 어플 만들기(3) : overflow, SharedPreferences, autofocus, EdgeInsets

원문 포스팅 🔗
container에 이미지를 넣으려고 witdh, height 값을 지정함

코드 공유해서 다른 팀원이 작업하니까 해상도가 달라서 overflow 발생...

Expanded()

자식(Child)이 사용 가능한 공간을 채우도록 행(Row), 열(Column) 또는 유연한영역(Flex)의 자식을 확장하는 위젯

Flexible()

차지해야하는 공간보다 더 공간을 차지하게 하고 싶다면 flexible 적용

Row에 속해있는 Container 들을 flexible로 각각 비율 지정해서 오류 해결함.

SharedPreferences 저장 패키지 사용하기

저장패키지 🔗

상세페이지 메모칸 입력하고 저장, 리로드 했을 때 저장된거 불러오기!!

1. 패키지 설치

flutter pub add shared_preferences

터미널에 flutter pub add shared_preferences 설치하고 pubspec.yaml 파일에 설치된거 확인

2. 선언하기

prefs = await SharedPreferences.getInstance();

3. 입력받은 데이터 리스트화, 리스트에서 String으로 변환

createProfile(
      {required String photo,
      ...
      }) {
    Profile memo = Profile(
        photo: photo,
        ...
        );
    profileList.add(memo);
    notifyListeners(); // Consumer<MemoService>의 builder 부분을 호출해서 화면 새로고침
    saveProfileList();
  }

  updateProfile({required int index, required String content}) {
    Profile memo = profileList[index];
    memo.content = content;
    notifyListeners(); // Consumer<MemoService>의 builder 부분을 호출해서 화면 새로고침
    saveProfileList();
  }

  deleteProfile({required int index}) {
    profileList.removeAt(index);
    notifyListeners();
    saveProfileList();
  }

  saveProfileList() {
    List profileJsonList = profileList.map((memo) => memo.toJson()).toList();

    String jsonString = jsonEncode(profileJsonList);

    prefs.setString('profileList', jsonString);
  }

  loadProfileList() {
    String? jsonString = prefs.getString('profileList');

    if (jsonString == null) return; // null 이면 로드하지 않음

    List profileJsonList = jsonDecode(jsonString);

    profileList =
        profileJsonList.map((json) => Profile.fromJson(json)).toList();
  }

Textfield(autofocus: false)

페이지 이동할 때 자동으로 텍스트필드에 focus 안되게 설정하기

color: Colors.transparent

Text, Icon가 같은 Container에 있는데 여백을 클릭하면 링크로 안넘어가는 문제
👉 해당 컨테이너에 투명색 배경 컬러 지정

child: GestureDetector(
    onTap: () {
      final url = profile.blog;
      launchURL(url);
    },
    child: Container(
      color: Colors.transparent,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Icon(
              CupertinoIcons.link,
              color: Colors.white,
              size: 15,
            ),
            Text(
              "Blog",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 15,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    ),
),

padding: EdgeInsets

1. .fromLTRB : 순서대로 left, top, right, bottom 여백 지정

2. .all : LTRB 모두 일괄 여백 지정

3. .symmetric : 일부지정 (vertical: or horizontal: )

4. .only : 오직 한 부분만 여백 지정

padding: EdgeInsets.symmetric(horizontal: 20.0),