[Flutter] Input 값 받기, List, Map 활용하기

1) TextEditingController() 이용하기

var inputData = TextEditingController(); //인풋값 받는 controller 설정 

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title:Text('Contact'),
      content: TextField(
          controller:inputData, //controller 
          decoration:InputDecoration(hintText: '인풋값')
      ),

 

사용자가 입력을 하면 inputData.text에 저장됨!

 

하지만  input이 10개면 controller를 10개 만드셔야합니다. 

그게 길어져서 싫다면 TextFormField() 위젯과 onSaved: 파라미터를 활용

 

2) OnChange() 활용

var inputData2 =''; //인풋값 받는 controller 설정 

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title:Text('Contact'),
      content: TextField(
          onChange(text){inputData2 = text;}
          decoration:InputDecoration(hintText: '인풋값')
      ),

 

TextField()가 많은 경우 변수를 계속 설정해야하나? 

- [] List ,  {} Map : 한 변수에 여러자료 저장 

 

예제) 사람 추가(빈칸 입력은 X), 삭제

list 추가 방법 : list.add(값);

list 삭제 방법 : list.removeAt(index)

map 추가 방법 : map[key]=value;

map 정렬 방법

var sortedName = Map.fromEntries(name.entries.toList()..sort((e1,e2) => e1.key.compareTo(e2.key)))

 

map 접근 방법 : map[key]

map의 값을 key로 하나씩 불러오면서 ListTile만드는 법

body: ListView.builder(
           itemCount: sortedName.length,
           itemBuilder: (context,i){ //일반적으로 c,i로 작명
             String key = sortedName.keys.elementAt(i);
             return ListTile(
               leading: Icon(Icons.account_circle),
               title:Text(key),
               subtitle: Text(sortedName[key].toString()),
               trailing: ElevatedButton(
                   child: Text("삭제"),
                   onPressed:(){
                     setState(() {
                       sortedName.remove(key);
                       name.remove(key);
                     });
                   }),
               
             ); //이 위젯이 3번 반복됨
           }

 

AlertDialog content에 TextField 2개 이상 넣는 법

return AlertDialog(
      title:Text('Contact'),
      content:Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              TextField(
                  onChanged: (text){inputData1=text;},
                  decoration:InputDecoration(hintText: '이름')
              ),
              TextField(
                  onChanged: (text){inputData2=text;},
                  decoration:InputDecoration(hintText: '전화번호')
              ),
            ]),
      actions: <Widget>[
        Container(
            child : Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(
                  child: Text('Cancel'),
                  onPressed: (){
                    Navigator.pop(context); //창닫기
                  },
                ),
                TextButton(
                  child: Text('완료'),
                  onPressed: (){
                    widget.addOne(inputData1, inputData2);
                    Navigator.of(context).pop(); //창닫기-세밀한 제어가능
                  },
                ),
              ],
            )
        )
      ],
    );