Flutter_22. CardList, Add Card, TextField, TextArea, Clear Button

예~전 포스팅에 이어 Card List에 Card를 추가하는 화면을 구현해보도록 하겠다.

이전 내용은 아래 링크 참고! 

2023.05.08 - [개발하기] - Flutter_15. List, Detail View, Message, Static 변수

2023.05.10 - [개발하기] - Flutter_18. DialogAlert, Slider Function, Size, List, Switch

 

 

 

 

 

 

Figma, Function Check

 

 

 

1) 구현해야할 화면 체크

🌿 체크 항목
1) TextField : clear Button
2) TextArea : TextField + maxLines
3) Image 

 

 

 

2) card_add.dart 파일에 AppBar와 Scaffold 칼라 설정

 

 

 

3) 변수 셋팅

이번 포스팅에서 Image는 우선 1개 고정으로 놓고, 카드 리스트 추가 기능을 구현하겠다.
다음에는 picker로 선택, 그 다음에는 upload 순으로 복습 및 공부해보려 한다.

 

 

 

4) 키보드 내리기 FocusScope 설정

 

 

 

 

 

 

TextField, Clear Button

 

 

1) body에 TextField 추가

텍스트필드 내에 있는 Clear Button은 아이콘 버튼으로 구현한다.
Icon Button 클릭 시 이벤트로 해당 텍스트필드의 TextEditingController를 clear() 해주면 텍스트필드 값이 초기화 된다.

❊ TextField
- controller : TextEditingController
- keyboardType : TextInputType
- decoration : InputDecoration
- style : TextStyle

❊ InputDecoration
- border : OutlineInputBorder()  → borderSide로 두께 설정
- contentPadding : EdgeInsets.symmetric 로 가로 세로 패딩 간격 설정
- label : Text
- suffix : IconButton()  → 컨트롤러.clear()로 clear 버튼 구현

  TextField(
    controller: _controllerArtName,
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
      border: const OutlineInputBorder(
        borderSide: BorderSide(width: 0.5),
      ),
      contentPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
      label: const Text('Art Name'),
      suffix: IconButton(
        onPressed: () => _controllerArtName.clear(), 
        icon: const Icon(Icons.close)
      ),
    ),
    style: const TextStyle(
      fontSize: 18
    ),    
  ),

 

 

 

 

 

 

Textarea : TextField, MaxLines

 

 

1) body에 TextField로 TextArea 만들기

텍스트필드에 maxLines을 설정해 주면, TextArea처럼 사용이 가능하다.
maxLength도 100정도로 설정하여 너무 긴 문장이 들어가지 못하도록 하였다.
그리고, 이번에는 clear Button 영역에 조건을 추가해보았다. isEmpt이면, 버튼을 출력하지 않는다.

    TextField(
      maxLines: 3,
      maxLength: 100,
      controller: _controllerArtContents,
      keyboardType: TextInputType.text,
      decoration: InputDecoration(
        border: const OutlineInputBorder(
          borderSide: BorderSide(width: 0.5),
        ),
        contentPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
        label: const Text('Art Contents'),
        suffix: _controllerArtContents.text.isEmpty
                ? null
                : IconButton(
                  onPressed: () => _controllerArtContents.clear(), 
                  icon: const Icon(Icons.clear)
                ),
      ),
      style: const TextStyle(
        fontSize: 18
      ),    
    ),

 

 

 

 

 

 

 

Image, Button, Navigator.pop

 

 

 

1) 이미지 SizedBox > Column으로 영역 잡아서 출력

    // --- Image Area ---
    SizedBox(
      width: 350,
      height: 350,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            _addImagePath,
            width: 250,
            height: 250,
          ),
        ],
      ),
    ),
    const SizedBox(
      height: 20,
    ),

 

 

 

2) 버튼 형태 만들고 화면 확인

우선, 기본 셋팅으로 Navigator.pop(context)를 넣었다.
버튼을 클릭하면, 우선 해당 화면은 pop되고 뒤에 있던 화면(List)이 보여진다.

    // --- Button Area ---
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: (){
            // --------
            Navigator.pop(context);
          }, 
          style: ElevatedButton.styleFrom(
            backgroundColor: const Color.fromARGB(255, 134, 98, 243),
            minimumSize: const Size(150, 50),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            )
          ),
          child: const Text('Save')
        ),
        const SizedBox(
          width: 20,
        ),
        ElevatedButton(
          onPressed: (){
            // --------
            Navigator.pop(context);
          }, 
          style: ElevatedButton.styleFrom(
            backgroundColor: const Color.fromARGB(255, 134, 98, 243),
            minimumSize: const Size(150, 50),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            )
          ),                  
          child: const Text('Cancel')
        ),
      ],
    ),

 

 

 

 

 

 

 

Add List Function

 

 

 

1) 텍스트 필드 2개 모두 Empty가 아닐 경우, addList 함수 호출

 

 

2) addList 함수

Static 변수에 입력값을 모두 담아준다.

 

 

3) card_list.dart 파일에 .then 추가

Add Card 화면이 pop되면, 아래 표시해둔 ~~pushNamed(context, '/add')여기서 부터 다시 시작 된다.

이부분에 .then을 추가해주자. 다녀와서 어떻게 할 것 인지를 정의해주는 것이다.

데이터를 리스트에 추가할 것임으로, rebuildData() 함수를 만들어 사용 할 것임을 적어주자.

 

 

4) rebuildData 함수 만들기

setState로 List.add(ArtCard)
ArtCard의 값들은 모두, Static에 저장해놓은 값들로 담아준다.

  // Func
  rebuildData(){
    setState(() {
      artcardList.add(ArtCard(
        imagePath: Message.imagePath, 
        artName: Message.artName, 
        artContents: Message.artContents));
    });
  }

 

 

 

 

 

 

Add List 진행 여부 체크

 

 

위에 코드까지만 실행하면, Static에 Message 값들이 계속 남아 있어서

Add Card 화면에 진입했다가 다시 List 화면으로 돌아가기만 하면, Card가 계속~~ 추가되는 에러가 있다.

이를 해결하기 위해, Add List 진행 여부를 체크하는 bool 타입 Static 변수가 하나 더 필요하다.

 

 

1) Message.dart 파일에 Static 변수 "action" 추가

 

 

2) card_add.dart 파일에 있는 addList() 함수 안에, 리스트가 추가된다는 의미로 action을 true 값으로 추가

 

 

3) card_list.dart 파일에 있는 rebuildData() 함수에서 조건문 추가

action이 true일 경우에만 setState로 리스트에 데이터 추가해주자.
추가 완료 후에는 action 값을 false로 변경해주어, 중복으로 계속 카드가 등록되는 에러를 해결! :)

 

 

4) 저장하고 화면 최종 확인

1) 카드 이름과 내용, 이미지 선택 후 [Save] >> 리스트에 카드 추가
2) 카드 이름만 적고 [Save] >> 리스트 추가 없음
3) [취소] 또는 [<]뒤로가기 버튼 >> 리스트 추가 없음

 

 

 

 

 

 

 

 

 

반응형