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?
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((){});
},