버튼을 누르면 위젯이 리스트 안에 추가 됨 : Flutter Add Widgets in List

 

 

Add Widgets in List Flutter | Complete Guide - YouTube

 

 

 

위 영상을 참고하였습니다. 

---

 

현재 원가 계산기를 만들고 있다. 

 

재료 합산 페이지를 만들기 위해 버튼을 누르면 리스트 안에 위젯들이 추가 되는 기능을 구현하고 싶었다.

 

이곳저곳을 찾아다니는 끝에 위 영상을 발견 하였다. 

 

 

1.위젯 리스트에 관한 mylist변수를 선언해준다. 

var mylist = <Widget>[];

 

2. 버튼을 만들어서 저 리스트에 들어간 위젯을 만들어준다. 

 

 ElevatedButton(onPressed: (){
            setState(() {
              mylist.add(Row(mainAxisAlignment : MainAxisAlignment.spaceEvenly,
                children: [
                  Container(child: TextButton(onPressed: (){}, child: Text('재료명'))),
                  Text('g/원'),
                  Container(height: 40,
                  width: 100,child: TextField(),),

                  Text('원')

              ],));
            });
          }, child:Text('추가') ),

 

 

3. 리스트 뷰에 연결 시켜준다. 

 

//1번
Expanded(
            child: SizedBox(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: ListView(
                children: [Column(
                  children:mylist,

                )

                ],
              ),
            ),
          )
        ],
      ),
      
      
      
      
      //2번
      Expanded(
            child: SizedBox(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: ListView(
                children: [Column(
                  children:[...mylist,]

                )

                ],
              ),
            ),
          )
        ],
      ),

 

 

연결 할 때  두 가지 방식이 있다.  mylist 라는 변수 자체가 리스트 이기 때문에 리스트 안에 리스트를 넣을 수 없다. 해서 

1번 처럼 [] 칸 없이 넣는방법, 2번은 스프레드 연산자를 이용해서 넣는 방법이다. 

 

그러면 다음과 같이 잘 나온다 :)