Flutter - 자식이 위젯에서 부모 위젯의 state 바꾸기, input 받기

부모 위젯에서 받아온 값을 자식위젯에서 이벤트가 발생할때 바꾸려고 한다. 

하지만 그냥 바꾸면 안된다. 간접적으로 조작하면 된다. 

 

1. 미리 state를 조작하는 함수를 부모 위젯에 만든다.

 

  addOne(){ setState(() {
    total ++;
  });

  }

 

함수명(){} 이렇게 함수를 정의하면 되고 

값이 바뀌므로 setState를 사용함

 

이제 이 함수를 보내고, 등록하는것은 앞서했던 변수를 전달하는 방법과 같다. 

 

 

사용자의 input 받기

유저가 textField에 입력한 내용을 가져오는 방법

 

class DialogUI extends StatelessWidget {
  DialogUI({Key? key,this.state,this.addOne}) : super(key: key);
  final state;
  final addOne;
  var inputData = TextEditingController();

 

 TextEditingController() 변수를 하나 만들어준다.

 

   TextField(controller: inputData,),

 

이러면 inputData에 유저가 입력한 값들이 저장된다. 

 

(input이 10개면 controller를 10개 만들어야한다. 그게 싫으면 TextFormField() 위젯과 onSaved 파라미터를 사용)

 

숙제)

textField에 입력되는 값 화면에 표시하기

 

list에 원소를 추가하는 함수를 부모에 만들고 

자식 위젯에 가져가서 입력받은 파라미터를 가져온 함수에 담으면 될것 같다. 

 

 addName(a){setState(() {
    name.add(a);

  });
  }

 

  TextButton( child: Text('완료'), onPressed:(){
                  addName(inputData.text);
            } ),

 

그리고 앞서만든 ListView에서 item 갯수를 3개로 정했는데 list 길이로(리스트이름.length) 바꿈으로 동적으로 item 을 만들수 있다 

 

 

 

 

추가응용) 

 

1. 완료버튼 눌러도 창 닫히게

 

 

     addName(inputData.text);
     Navigator.pop(context);

 

textField에 입력값 처리하고  pop으로 창 닫음

 

2. 입력값이 없으면 완료 안되게 

 

현재 textField 값을 읽고 if 문으로 코드 실행하면 될것 같다. 

 

textField 가 비었을때 어떤 값을 반환하는지 알야하는데 null 도 안되고 isEmpty해도 조건문을 통과했다. 

print 찍어보니 

 

 

다음같이 나온다. 

뭔지 몰라서 질문해보니 ''라고 했다. 

 

그래서

a != ''

다음 조건으로 입력값이 있을때면 코드가 실행되게 하였다. 

 

3. 이름 삭제 버튼 만들기

 

 

       return ListTile(
                leading: Image.asset('peachs.jpeg'),
                title : Text(name[i]),
                trailing: TextButton(child: Text('삭제'), onPressed: (){
                  removeName(i);
                },),

 

ListTile 파라미터중 하나인 trailing 으로 버튼을 추가하고 

onPressed 함수에서 remove 로 list의 원소를 없앴는데 동작하지 않았다. 

생각해보니 재랜더링이 안되서 그런거였다. 

 

그래서 state로 함수를 따로 만들어 줬다

 

  removeName(i){
    setState(() {
      name.remove(name[i]);
    });
  }

 

4. 번호도 입력 받기

 

controller 하나 더 만들어서 해줌

만들고, 등록, 사용