다이얼로그
body: Dialog(child: Text('asg')),
onPressed: (){
showDialog(context: context, builder: (context){
return Dialog(child: Text('안녕'));
});
},
이렇게 넣으면 버튼 누를 때 뜨게끔 만들려 했는데 안됨… MaterialApp 을 바깥으로 보낼 것
void main() {
runApp(MaterialApp(
home: MyApp()
)); // 앱 시작해주세요 라는 뜻임
}
이렇게 해주면 동작 함.
왜 이렇게 되는 것이냐…(원리)
context 에대한 설명
context란, 커스텀 위젯을 만들 때 마다 강제로 생성됨. build 함수 안에 context라는 파타미터, 이게 계속 쓰는 애임.
이 context가 무슨 뜻이냐 (부모 위젯이 누구인지 정보를 담고 있는 정보임)
Scaffold의 부모 위젯들을 뜻함. (쉽게 말해 족보임) scaffold이거의 부모 위젯? MaterialApp 임.
onPressed: (){
print(context.findAncestorWidgetOfExactType<MaterialApp>());
showDialog(context: context, builder: (context){
return Dialog(child: Text('안녕'));
});
},
위와 같이 코딩하면 부모중에 MaterialApp을 찾아줌
context를 사용해야하는 함수들
showDialog
Scaffold.of
Navigator.pop
Theme.of
등등
context 입력 안하면 작동 안함. 그런데 showDialog 는 context를 입력해줘야하는데 부모중에 MaterialApp 이라는 애가 있어야 잘 작동을 함. 그런데 아까 동작 안하는 코드는 build 안에 return MaterialApp 이였기 때문에 부모가 없이 곧장 MaterialApp 을 가리키기 때문에 동작을 안함 그래서 부모를 밖으로 뺀 것임
또 다른 방법 : context(족보) 생성해주는 방법
전구 표시 눌러서 wrap with builder
이걸 눌러서 builder를 만들면 context가 새로 정해짐.
Class 간에 변수 공유 어떻게할거냐…
변수 범위라는게 있기 때문에 맘대로 갔다 쓸 수 없음.
state를 전송을 해줘야하는데,
- 보내고
- 등록하고
- 쓰면 됨.
1. 전송
Custom Widget
return DialogUI(작명 : 변수명)
2. 등록
const DialogUI({Key? key, this.state}) : super(key: key);
final state; // 변경 못함, 안하는게 좋기 때문에 관습적으로 final 씀
이렇게 사용하면 됨.
3. 쓰기
child: Text(state.toString())),
변수의 지정
const DialogUI(a,b) //이렇게 저장가능
const DialogUI({Key? key, this.state}) //중괄호로 감싸면 선택적 변수를 의미함
숙제
완료 버튼 누르면 a state + 1 되게 만들 것.
부모에게 state 전송 못함. (패륜전송 불가!) 옆집에게 state 전송 못함. (불륜전송 불가!)
최대한 위에 있는 부모가 가지고 있는것이 좋다.
함숫 만들기
addOne(){
setState((){
total++;
});
}
함수 보내기
return DialogUI(addOne: addOne);
함수 사용하기
TextButton(onPressed: (){addOne();}, child: Text('완료')),
변수 만들어서 담기
// 1. controller 만들기
var inputData = TextEditingController();
TextField( controller: inputData),
// 2. onChaged 사용하기
var inputData2 = '';
TextField( onChanged: (text){ inputData2 = text; },),
TextFiled가 여러개일 경우 2번째 방법이 좋다.
변수 여러개 만들땐
[](List),{}(Map) 이렇게 쓰면 된다.
숙제
완료 버튼 누를 시 사람 항목 새로 생성될 수 있도록 힌트 : state 수정만 되면 됨
// 함수 생성
addState(text){
name.add(text);
}
// 사용하기
TextButton(onPressed: (){
addState(inputData2);
addOne();
}, child: Text('완료')),
응용 사항
- 빈칸이면 완료눌러도 추가 안되게
- 이름 옆에 삭제버튼
- 이름 순 정렬
- 폰번호 추가 (배열 구조 변경)