Home > Blockchain >  How can I add a container widget by pressing the button?
How can I add a container widget by pressing the button?

Time:10-29

As shown in the picture below, there is a container widget with image and text field, and I would like to create an additional container when I click the button.
I have no idea how to implement this.
Can you suggest a way to implement this?

enter image description here

      Container _productForm() {
    return Container(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _productImage(),
              _productImage(),
            ],
          ),
          _heightPadding(15),
          _inputText("input text", _controller2),
          _heightPadding(15),
          _inputText("input text", _controller3),
        ],
      ),
    );
  }
  
     Widget _inputText(String hint, TextEditingController textEditingController) {
        return Container(
          width: double.infinity,
          // height: 200,
          child: TextField(
            controller: textEditingController,
            //엔터키 이벤트
            onSubmitted: (value) {},
            //높이를 부모 위젯의 높이로 설정 (컨테이너 전체를 텍스트필드로 사용)
            // expands: true,
            maxLines: null,
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(5),
              ),
              hintText: hint,
            ),
          ),
        );
      }

   Widget _addButton() {
return Container(
              width: 200,
              height: 65,
              child: ElevatedButton(
                onPressed: () {
                  //상품썸네일 아래에 상품썸네일 하나 더 추가
                },
                child: Text(
                  'Add Container',
                  style: TextStyle(
                      fontSize: 17, fontWeight: FontWeight.bold),
                ),
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue, // background
                  onPrimary: Colors.white, // foregro// und
                ),
              ),
            );
  }

CodePudding user response:

try put in the List:

List<Container> _containers = [_productForm(),_productForm(),];

                onPressed: () {
                  //상품썸네일 아래에 상품썸네일 하나 더 추가
                  _containers.add(_productForm());
                  setState((){});
                },

then Load your _containers list with ListView

CodePudding user response:

create list of widget

List<Container> _containers = [_productForm(),_productForm(),];

set dynamic children in row

Row(
  children: _containers
      .map((_) => _productForm())
      .toList(),
)

on press of your button

onPressed: () {
    _containers.add(_productForm());
    setState((){});            
},
  • Related